.slider-section { overflow: hidden; }
.slider-controls { display: flex; gap: .6rem; }
.slider-controls button { width: 3rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 58rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track figure { scroll-snap-align: start; }
.slider-track img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.slider-track figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; font-size: .72rem; text-transform: uppercase; }
.slider-track figcaption span { color: var(--muted); }

.hero-component figcaption {
    position: absolute;
    inset-inline-end: var(--gutter);
    bottom: 1rem;
    z-index: 3;
    color: white;
    font-size: .56rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
}

@media (max-width: 800px) {
    .slider-track { grid-auto-columns: 88vw; }
}