html:not(.is-ready) body {
  opacity: 0;
}

html.is-ready body {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    transition: opacity 0.25s ease;
  }
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 100svh;

  @media (width >= 768px) {
    flex-direction: row-reverse;
    align-items: stretch;
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }
}

.card__photo {
  flex-shrink: 0;

  @media (width >= 768px) {
    flex: 0 0 42%;
    max-width: 42%;
    align-self: flex-start;
    height: 100svh;
    max-height: 100svh;
  }

  & figure {
    margin: 0;

    @media (width < 768px) {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: min(28%, 5em);
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(var(--ids__background-RGB), 1)
        );
      }
    }

    @media (width >= 768px) {
      height: 100%;
    }
  }

  & img {
    display: block;
    width: 100%;
    height: auto;

    @media (width >= 768px) {
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }
  }
}

.card__narrative {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--ids__density) * 0.5em) calc(var(--ids__density) * 0.75em)
    calc(var(--ids__density) * 1.5em);

  @media (width >= 768px) {
    min-height: 0;
    overflow-y: auto;
    padding: calc(var(--ids__density) * 2em) calc(var(--ids__density) * 2.5em);
  }

  & .card__content {
    container-type: inline-size;
    width: 100%;
    max-width: 36em;
    margin: 0 auto;

    @media (width >= 768px) {
      margin-block: auto;
      margin-inline: 0;
      max-width: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      opacity: 0;
      transform: translateY(1.25em);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.is-ready .card__content {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.6s ease-out,
      transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-ready .card__content {
    opacity: 1;
    transform: none;
  }
}

#countdown {
  width: 100%;
  max-width: 100%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: min(8em, 20cqi);
}

@media (width >= 768px) {
  #countdown {
    width: auto;
    max-width: none;
    font-size: 8em;
  }
}