@layer components {
  .carousel { position: relative; width: 100%; }
  .carousel-viewport {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem;
    scrollbar-width: none; &::-webkit-scrollbar { display: none; }
  }
  .carousel-slide {
    flex: 0 0 100%; scroll-snap-align: start; min-height: 12rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    background-color: var(--card); font-size: 0.875rem; color: var(--foreground);
  }
  .carousel-prev, .carousel-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 9999px;
    background-color: var(--background); color: var(--foreground); cursor: pointer;
    box-shadow: var(--shadow-sm); transition: background-color 150ms ease; font-size: 0.875rem;
    &:hover { background-color: var(--accent); }
    & svg { width: 1rem; height: 1rem; }
  }
  .carousel-prev { left: -1rem; }
  .carousel-next { right: -1rem; }
}