@layer components{.hero{display:block;position:relative;overflow:hidden}.hero__track{scroll-snap-type:x mandatory;scrollbar-width:none;display:flex;overflow:auto hidden}.hero__track::-webkit-scrollbar{display:none}.hero__track>*{scroll-snap-align:start;flex:0 0 100%;min-width:0}.hero--sm .hero__slide{min-height:45svh}.hero--md .hero__slide{min-height:80svh}.hero--lg .hero__slide{min-height:calc(100vh - var(--header-stack,3.5rem));min-height:calc(100svh - var(--header-stack,3.5rem))}.hero__arrow{border-radius:var(--radius-pill);background-color:color-mix(in oklch, var(--color-background) 60%, transparent);width:2.25rem;height:2.25rem;color:var(--color-foreground);cursor:pointer;transition:opacity var(--transition-fast);border:none;place-items:center;display:none;position:absolute;top:50%;translate:0 -50%}.hero__arrow:hover{opacity:.8}.hero__arrow svg{width:1.125rem}.hero__arrow--prev{left:var(--space-sm)}.hero__arrow--next{right:var(--space-sm)}.hero__dots{justify-content:center;gap:var(--space-xs);display:flex;position:absolute;inset-block-end:var(--space-md);inset-inline:0}.hero__dot{aspect-ratio:1;border-radius:var(--radius-pill);background-color:color-mix(in oklch, var(--color-background) 50%, transparent);cursor:pointer;width:.5rem;transition:background-color var(--transition-fast);border:none;padding:0}.hero__dot[aria-current]{background-color:var(--color-background)}@media (width>=48rem){.hero__arrow{display:grid}}}