/* R */

/*
TODO
- simplify naming: event-full vs. event-full-grid
- better handling if text column is higher than image column
- better positioning of caption
*/

/*
.event-display figure => 100% height
ab 60 em
.event-display div => 100% height
ab 80 em
.event-display div => height auto, aspect-ratio 2 / 3 erzwingen
*/

.event-display {
  position: relative;
}
/*
.event-display figure {
}
*/
.event-display > figure {
  height: 100%;
}
.event-display > figure > div {
  --ratio: 2 / 3;
  aspect-ratio: var(--ratio);
}
.event-display figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-display figure figcaption {
  color: var(--color-base) !important;
  /* font-size: small; */
}
.event-display figure figcaption span {
  color: var(--color-mute) !important;
}
@media screen and (max-width: 29.938em) {
  .event-card-full-grid .event-display figure div {
    --ratio: 3 / 2;
  }
  .event-card-full-grid .event-display figure img {
    object-position: top;
  }
}
@media screen and (min-width: 30em) {
  .event-display figure figcaption {
    position: absolute;
    bottom: 0;
    left: 110%;
    white-space: nowrap;
    /* text-align: right; */
  }
}
/*
@media screen and (min-width: 48em) and (max-width: 79.938em) {
  .event:has(address) .event-display {
    border: 1px solid red;
  }
}
*/
@media screen and (min-width: 48em) {
  .event:has(address) .event-display > figure > div {
    height: 100%;
    aspect-ratio: unset;
  }
}
@media screen and (min-width: 80em) {
  .event-preview:has(address) .event-display > figure > div {
    height: auto;
    aspect-ratio: 2 / 3;
  }
}
@media screen and (min-width: 100em) {
  .event-card:has(address) .event-display > figure > div {
    height: auto;
    aspect-ratio: 2 / 3;
  }
}