.slider{--slide-size:100%;--slide-gap:20px;--track-colour:var(--line);--ink:var(--slate)}.slider--dark{--track-colour:var(--night-line);--ink:var(--white)}.slider-viewport{cursor:grab;overflow:hidden}.slider-viewport:active{cursor:grabbing}.slider-track{margin-left:calc(var(--slide-gap) * -1);touch-action:pan-y pinch-zoom;display:flex}.slider-slide{flex:0 0 var(--slide-size);min-width:0;padding-left:var(--slide-gap)}.slider-tabs{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:16px;margin-bottom:32px;display:grid}.slider-tab{color:var(--ink);font:inherit;text-align:left;opacity:.55;cursor:pointer;background:0 0;border:0;padding:0 0 12px;font-size:.875rem;font-weight:500;transition:opacity .2s}.slider-tab:hover,.slider-tab[aria-current=true]{opacity:1}.slider-tab-track{background:var(--track-colour);height:1px;margin-top:14px;display:block;overflow:hidden}.slider-fill{border-radius:inherit;background:var(--ink);transform-origin:0;width:100%;height:100%;display:block}.slider-fill--timed{animation-name:slider-fill;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes slider-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.slider-controls{justify-content:space-between;align-items:center;gap:24px;margin-top:32px;display:flex}.slider-dots{flex:1;min-width:0;display:flex}.slider-dot{cursor:pointer;background:0 0;border:0;flex:0 48px;align-items:center;min-width:0;height:44px;padding:0;display:flex;position:relative}.slider-dot:before{content:"";background:var(--track-colour);position:absolute;inset:21px 4px}.slider-dot .slider-fill{height:2px;margin-inline:4px;position:relative}.slider-arrows{gap:10px;display:flex}.slider-arrow{border:1px solid var(--track-colour);width:44px;height:44px;color:var(--ink);cursor:pointer;background:0 0;border-radius:50%;place-items:center;padding:0;transition:background-color .2s,border-color .2s,color .2s,opacity .2s;display:grid}.slider-arrow:hover:not(:disabled){border-color:var(--ink)}.slider-arrow:disabled{opacity:.35;cursor:default}.slider-arrow--prev .arrow{transform:rotate(180deg)}@media (width<=620px){.slider-tabs{gap:10px}.slider-tab{font-size:.8125rem}}