.hero-component figcaption {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 2;
    background: var(--ink);
    color: white;
    padding: .45rem .6rem;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.slider-section .section-heading {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}
.slider-section .section-heading h2 { flex: 1 1 20rem; min-width: 0; }
.slider-section .section-heading > .slider-controls { display: flex; flex-direction: row; gap: .5rem; }
.slider-controls button {
    display: grid; place-items: center; width: 3rem; height: 3rem;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font: inherit; font-size: 1.4rem; cursor: pointer;
}
.slider-controls button:hover { background: var(--accent); color: white; }
.slider-controls button:focus-visible, .slider-track:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[dir="rtl"] .slider-controls button { transform: scaleX(-1); }
.slider-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 54rem); gap: 1.5rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track figure { min-width: 0; scroll-snap-align: start; }
.slider-track img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.slider-track figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-top: .8rem; }
.slider-track figcaption span { color: var(--muted); }