.project-slides {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.project-slides::-webkit-scrollbar { display: none; }
.project-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #ecece9;
}
.project-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[data-project-carousel] { position: relative; }
.project-carousel-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.project-carousel-controls[hidden] { display: none; }
.project-slide-count {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: .35rem .7rem;
  border-radius: 2rem;
  background: rgba(16, 18, 17, .78);
  color: #fff;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.project-carousel-controls button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(16, 18, 17, .15);
  border-radius: 50%;
  background: rgba(250, 250, 247, .65);
  color: #101211;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .24);
  pointer-events: auto;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.project-carousel-controls [data-previous] { left: 18px; }
.project-carousel-controls [data-previous][aria-disabled=true] { display: none; }
.project-carousel-controls [data-next] { right: 18px; }
.project-carousel-controls button:hover:not([aria-disabled=true]) {
  background: rgba(16, 18, 17, .70);
  color: var(--paper);
}
.project-carousel-controls button[aria-disabled=true] { opacity: .5; cursor: default; }
.project-carousel-controls svg { width: 23px; height: 23px; stroke-width: 2; }
.project-carousel-controls button:focus-visible,
.project-slides:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.project-slide:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }
.project-card.has-carousel .project-visual { border-radius: 2.5rem; }
.project-card.has-carousel .project-info { margin-top: .75rem; }
@media (max-width: 767px) {
  .project-carousel-controls button { width: 44px; height: 44px; }
  .project-carousel-controls [data-previous] { left: 12px; }
  .project-carousel-controls [data-next] { right: 12px; }
  .project-slide-count { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-carousel-controls button { transition: none; }
}