@layer components {
  .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
  }

  /* A card that lights up under the pointer (--x/--y from site.js). */
  .feature {
    position: relative;
    padding: 0 1.75rem 1.75rem;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-large);
    background:
      radial-gradient(22rem circle at var(--x, 50%) var(--y, -20%),
        var(--color-primary-surface),
        transparent 60%),
      var(--color-surface);
    transition: border-color 0.25s, translate 0.25s;

    h3 {
      position: relative;
      margin: -1.5rem 0 0.5rem;
      font-size: 1.2rem;
    }

    p {
      position: relative;
      color: var(--color-ink-muted);
      font-size: 0.97rem;
    }
  }

  /* The feature itself, in the app: a close-up of a screenshot (set inline with the two
     points it drifts between) panning slowly, fading into the card. */
  .feature__proof {
    height: 13rem;
    margin: 0 -1.75rem;
    background-repeat: no-repeat;
    background-size: 300% auto;
    background-position: var(--from);
    mask-image: linear-gradient(var(--black) 45%, transparent);
    opacity: 0.85;
    animation: drift 26s ease-in-out infinite alternate;
    transition: opacity 0.4s;
  }

  .feature:nth-child(2n) .feature__proof {
    animation-duration: 32s;
    animation-delay: -9s;
  }

  .feature:nth-child(3n) .feature__proof {
    animation-delay: -17s;
  }

  .feature:hover .feature__proof {
    opacity: 1;
  }

  @keyframes drift {
    from {
      background-position: var(--from);
    }

    to {
      background-position: var(--to);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .feature__proof {
      animation: none;
    }
  }

  .feature:hover {
    border-color: color-mix(in oklch, var(--color-primary) 40%, transparent);
    translate: 0 -3px;
  }

}