.largemedia {
  --largemedia-reveal-duration: 760ms;
  --largemedia-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --largemedia-image-offset: 30px;
  --largemedia-root-offset: 18px;
  --largemedia-text-offset: 18px;
  --largemedia-body-offset: 14px;
  --largemedia-cta-offset: 10px;
  --largemedia-image-blur: 10px;
  --largemedia-image-delay: 0ms;
  --largemedia-headline-delay: 120ms;
  --largemedia-body-delay: 200ms;
  --largemedia-cta-delay: 280ms;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

html.reveal-on-scroll-ready .largemedia.reveal-on-scroll {
  opacity: 0;
  pointer-events: none;
}

.largemedia__image-wrap {
  width: 100%;
  aspect-ratio: 31 / 16;
  overflow: hidden;
  border-radius: 60px;
  border: 1px solid var(--color-surface-3);
  background: var(--color-surface-3);
}

.largemedia__image-wrap:hover .largemedia__image {
  filter: saturate(1.08) contrast(1.08) brightness(1.03);
}

html.reveal-on-scroll-ready .largemedia.reveal-on-scroll .largemedia__image-wrap {
  opacity: 0;
}

.largemedia__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: filter 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.largemedia__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 0 var(--viewport-gap);
}

html.reveal-on-scroll-ready .largemedia.reveal-on-scroll .largemedia__headline,
html.reveal-on-scroll-ready .largemedia.reveal-on-scroll .largemedia__body,
html.reveal-on-scroll-ready .largemedia.reveal-on-scroll .largemedia__cta {
  opacity: 0;
}


html.reveal-on-scroll-ready .largemedia.reveal-on-scroll .largemedia__headline {
  transform: translate3d(0, var(--largemedia-text-offset), 0);
}

.largemedia__headline.section-heading {
  /* Large media spacing comes from the content layout gap, not shared heading padding. */
  padding-top: 0;
  padding-bottom: 0;
}

.largemedia__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

html.reveal-on-scroll-ready .largemedia.reveal-on-scroll .largemedia__body {
  transform: translate3d(0, var(--largemedia-body-offset), 0);
}

html.reveal-on-scroll-ready .largemedia.reveal-on-scroll .largemedia__cta {
  transform: translate3d(0, var(--largemedia-cta-offset), 0);
}

@media (min-width: 1025px) {
  .largemedia__content {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: stretch;
    column-gap: 48px;
    row-gap: 24px;
  }

  .largemedia__headline {
    grid-column: 1;
  }

  .largemedia__info {
    grid-column: 2;
    gap: 1rem;
  }

  .largemedia__cta {
    justify-self: start;
    align-self: start;
  }
}

.largemedia__body {
  flex-grow: 1;
  max-width: 58ch;
  margin: 0;
  color: var(--color-copy-muted);
  font-family: var(--type-body-large-font-family);
  font-size: var(--type-body-large-font-size);
  font-weight: var(--type-body-large-font-weight);
  line-height: var(--type-body-large-line-height);
  letter-spacing: var(--type-body-large-letter-spacing);
}

@media (max-width: 1024px) {
  .largemedia {
    --largemedia-reveal-duration: 680ms;
    --largemedia-image-offset: 24px;
    --largemedia-image-blur: 8px;
    --largemedia-text-offset: 14px;
    --largemedia-body-offset: 11px;
    --largemedia-cta-offset: 8px;
    --largemedia-headline-delay: 100ms;
    --largemedia-body-delay: 170ms;
    --largemedia-cta-delay: 230ms;
    gap: 20px;
  }

  .largemedia__image-wrap {
    border-radius: 36px;
  }

  .largemedia__content {
    padding: 0;
  }

}

@media (max-width: 720px) {
  .largemedia {
    --largemedia-reveal-duration: 560ms;
    --largemedia-image-offset: 18px;
    --largemedia-root-offset: 12px;
    --largemedia-image-blur: 6px;
    --largemedia-text-offset: 10px;
    --largemedia-body-offset: 8px;
    --largemedia-cta-offset: 6px;
    --largemedia-headline-delay: 80ms;
    --largemedia-body-delay: 130ms;
    --largemedia-cta-delay: 180ms;
    gap: 18px;
  }

  .largemedia__image-wrap {
    border-radius: 28px;
  }

  .largemedia__content {
    gap: 20px;
  }

  .largemedia__body {
    font-size: var(--type-body-font-size);
    line-height: var(--type-body-line-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .largemedia,
  .largemedia__image-wrap,
  .largemedia__headline,
  .largemedia__body,
  .largemedia__cta {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  .largemedia__image {
    filter: none;
    transition-duration: 1ms;
  }
}