/* Desktop — only loads at min-width 901px (PC layout locked here). */

@media (min-width: 901px) {
  .hero-title {
    font-size: clamp(3.5rem, 6.5vw, 5.25rem);
  }

  .closing-title {
    font-size: clamp(2rem, 4.5vw, 2.85rem);
  }

  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }

  .feature--reversed .feature-copy {
    order: 2;
    justify-self: start;
    text-align: left;
    align-items: flex-start;
    padding-inline-start: clamp(0.5rem, 2vw, 1.5rem);
  }

  .feature--reversed .feature-art {
    order: 1;
    justify-content: flex-end;
    padding-inline-end: clamp(0.5rem, 2vw, 1.5rem);
  }

  .feature:not(.feature--reversed) .feature-copy {
    justify-self: end;
    text-align: right;
    align-items: flex-end;
    padding-inline-end: clamp(0.5rem, 2vw, 1.5rem);
  }

  .feature:not(.feature--reversed) .feature-art {
    justify-content: flex-start;
    padding-inline-start: clamp(0.5rem, 2vw, 1.5rem);
  }

  .feature:not(.feature--reversed) .feature-copy p,
  .feature:not(.feature--reversed) .feature-copy .mono-label {
    margin-inline-start: auto;
  }

  .feature-art {
    width: 100%;
  }

  .feature-art img {
    max-width: min(100%, 480px);
    max-height: min(85vh, 1024px);
    margin-inline: 0;
  }

  .feature-art--from-left {
    opacity: 0;
    transform: translateX(-72px) scale(0.96);
    filter: blur(8px);
    transition:
      opacity var(--reveal-ms) var(--ease),
      transform var(--reveal-ms) var(--ease),
      filter calc(var(--reveal-ms) * 0.9) var(--ease);
    transition-delay: 0ms;
  }

  .feature-art--from-right {
    opacity: 0;
    transform: translateX(72px) scale(0.96);
    filter: blur(8px);
    transition:
      opacity var(--reveal-ms) var(--ease),
      transform var(--reveal-ms) var(--ease),
      filter calc(var(--reveal-ms) * 0.9) var(--ease);
    transition-delay: 0ms;
  }

  .feature-art.is-visible {
    opacity: 1;
    filter: blur(0);
    transition-delay: 0.22s;
  }

  .feature-art--from-left.is-visible,
  .feature-art--from-right.is-visible {
    transform: translateX(0) scale(1);
  }
}

@media (min-width: 1200px) {
  .hero-flank-slot {
    width: min(22vw, 300px);
  }
}