.portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
      gap: var(--space-m);
    }


.card {
      display: grid;
      grid-template-rows: auto 1fr;
      block-size: 100%;
      font-size: var(--fs--1);
      background-color: var(--surface-2);
      border: 1px solid var(--border-subtle);
      border-radius: 0.75rem;
      overflow: hidden;
    }

    .card-image {
      inline-size: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      background-color: var(--surface-4);
    }

    .card-body {
      display: grid;
      align-content: start;
      gap: var(--space-2xs);
      padding: var(--space-s);
    }

    .card-meta {
      font-size: var(--fs--2);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
    }

    .card-title {
      font-size: var(--fs-0);

      a {
        text-decoration: none;
      }
    }

    


.portfolio-item {
  --in-view: true;
}

.portfolio-item {
  --in-view: false;
  animation: portfolio-item-in-view both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

.card {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      animation: card-in 1s both;
      animation-play-state: paused;
      animation-delay: calc(var(--stagger, 0s) * 0.25s);

      @container style(--in-view: true) {
        animation-play-state: running;
      }
    }
  }
}

/* for the staggered animation */
.portfolio-grid {
  --min-col-size: 17rem;
  --gap: 2rem;

  container: portfolio / inline-size;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-col-size), 100%), 1fr)
  );
}

/* 2 cols + 1 gap */
@container portfolio (width > calc(17rem * 2 + 2rem)) {
  .portfolio-item:nth-child(2n) {
    --stagger: 1;
  }
}
/* three cols + 2 gaps */
@container portfolio (width > calc(17rem * 3 + 2rem * 2)) {
  .portfolio-item:nth-child(3n + 1) {
    --stagger: 0;
  }
  .portfolio-item:nth-child(3n + 2) {
    --stagger: 1;
  }
  .portfolio-item:nth-child(3n + 3) {
    --stagger: 2;
  }
}

@keyframes portfolio-item-in-view {
  from {
    --in-view: false;
  }
  to {
    --in-view: true;
  }
}

@keyframes card-reveal {
  from {
    opacity: 0;
    translate: 0 2rem;
    scale: 0.96;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}