:root {
  --section-gap: clamp(80px, 8vw, 128px);
}

.project-stories {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  container-type: inline-size;
  --story-gap: 24px;
}

.project-stories * {
  box-sizing: border-box;
}

.project-stories h2,.project-stories h3,.project-stories p {
  margin: 0;
}

.project-stories .story-rail {
  display: flex;
  gap: var(--story-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: 32px;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

.project-stories .story-rail::-webkit-scrollbar {
  display: none;
}

.project-stories .story {
  flex: 0 0 calc((100% - 3 * var(--story-gap)) / 4);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.project-stories .art {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  flex-shrink: 0;
}

.project-stories .art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--story-grain);
  opacity: .15;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.project-stories .blue {
  background: radial-gradient(ellipse at 85% 5%,#51ceef 0%,transparent 39%),radial-gradient(ellipse at 58% 78%,#43d5ec 0%,transparent 35%),radial-gradient(ellipse at 10% 65%,#004cef 0%,transparent 50%),linear-gradient(140deg,#008bff,#0075ed 45%,#13c5e5);
}

.project-stories .lilac {
  background: radial-gradient(ellipse at 10% 15%,#ffd789 0%,transparent 65%),radial-gradient(ellipse at 60% 70%,#b47af0 0%,transparent 70%),linear-gradient(130deg,#f0b3c8,#d39ce7 60%,#efc5af);
}

.project-stories .peach {
  background: radial-gradient(ellipse at 0% 80%,#ffe0bd 0%,transparent 65%),radial-gradient(ellipse at 80% 10%,#b2c6ad 0%,transparent 65%),linear-gradient(130deg,#f0d3bc,#d8a8b7 60%,#edd9c8);
}

.project-stories .sage {
  background: radial-gradient(ellipse at 10% 15%,#dce7b2 0%,transparent 60%),radial-gradient(ellipse at 80% 75%,#4a9c95 0%,transparent 65%),linear-gradient(135deg,#b8d3ae,#83bab0 60%,#c4ded1);
}

.project-stories h3 {
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: -.45px;
  font-weight: 450;
  margin-top: 16px;
}

.project-stories .contribution {
  font-size: 14px;
  line-height: 1.55;
  color: #b4b4b4;
  margin-top: 10px;
}

.project-stories .story-rail:focus-visible {
  outline: 2px solid #f5f5f5;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .project-stories .story {
    flex-basis: 286px;
  }
}

@media (max-width: 600px) {
  .project-stories {
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
    --story-gap: 16px;
  }

  .project-stories .story {
    flex-basis: min(82%, 286px);
  }
}