@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.light.min.css";
@layer design.system;

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    background: var(--surface-3);
    block-size: 100%;
  }

  body {
    place-content: center;
    min-block-size: 100%;
    padding-block: 30dvh;
    font-family: system-ui, sans-serif;
    display: grid;
  }

  .cards {
    gap: var(--size-3);
    grid-auto-flow: dense;
    grid-template-columns: repeat(3, var(--size-content-1));
    display: grid;

    & > .card {
      background: linear-gradient(#fff, #fff), var(--gradient-10);
      border-radius: var(--radius-3);
      box-shadow: var(--shadow-3);
      padding-top: var(--size-1);
      line-height: 3;
      font-size: var(--font-size-4);
      font-weight: var(--font-weight-6);
      font-family: var(--font-mono);
      background-origin: border-box;
      background-clip: content-box, border-box;
      place-content: center;
      display: grid;

      &:nth-of-type(4n) {
        background-image: linear-gradient(#fff, #fff), var(--gradient-3);
        grid-row: span 2;
      }

      &:nth-of-type(7n) {
        background-image: linear-gradient(#fff, #fff), var(--gradient-5);
        grid-row: span 3;
      }

      &:nth-of-type(5n) {
        background-image: linear-gradient(#fff, #fff), var(--gradient-18);
        grid-column: span 2;
      }
    }
  }
}

@keyframes slide-fade-in {
  from {
    opacity: 0;
    box-shadow: none;
    transform: scale(.8)translateY(15vh);
  }
}

.card {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      & {
        animation: both slide-fade-in view();
        animation-range: contain contain 50%;
      }
    }
  }
}
/*# sourceMappingURL=index.2cdaf7bc.css.map */