@layer components{@layer base{.carousel{--carousel-gap:var(--grid-gap);--carousel-column-gap:var(--section-gap-md);--carousel-progress-color:var(--color-brand-indigo-600);--carousel-progress-track:var(--color-divider);--carousel-toggle-bg:oklch(from var(--color-brand-indigo-900) l c h / 4%);--carousel-toggle-bg-hover:oklch(from var(--color-brand-indigo-900) l c h / 6%);--carousel-toggle-color:var(--color-brand-indigo-600);row-gap:var(--carousel-column-gap)}.carousel__track{gap:var(--carousel-gap);scroll-snap-type:x mandatory;scrollbar-width:none;grid-auto-columns:100%;grid-auto-flow:column;margin:0;padding:0;list-style:none;display:grid;overflow:auto clip}.carousel__track::-webkit-scrollbar{display:none}.carousel__slide{min-inline-size:0}.carousel__progress{block-size:var(--border-width-thin);background-color:var(--carousel-progress-track);grid-area:progress;overflow:hidden}.carousel__progress-fill{background-color:var(--carousel-progress-color);block-size:100%;inline-size:100%;transform:scaleX(var(--progress,0));transform-origin:0;display:block}[dir=rtl] .carousel__progress-fill{transform-origin:100%}.carousel__controls{display:grid}.carousel[data-variant=center] .carousel__controls{grid-template-columns:1fr;grid-template-areas:"pager"}.carousel[data-variant=end] .carousel__controls{gap:var(--component-space-xs);grid-template:"progress progress""pager toggle"/1fr auto;align-items:center}.carousel__toggle{inline-size:var(--space-7x);block-size:var(--space-7x);color:var(--carousel-toggle-color);appearance:none;cursor:pointer;background-color:var(--carousel-toggle-bg);border:0;flex:none;grid-area:toggle;place-items:center;padding:0;display:inline-grid;position:relative}.carousel__toggle:before{content:"";position:absolute;inset:-.625rem}.carousel__toggle-icon{inline-size:var(--space-5x);block-size:var(--space-5x);position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.carousel__toggle-icon--pause{display:none}.carousel .pager{grid-area:pager;inline-size:100%;max-inline-size:100%}.carousel .pager__row{max-inline-size:100%}.carousel .pager--mobile{display:block}.carousel .pager--tablet,.carousel .pager--desktop{display:none}.carousel .pager--universal{display:block}.carousel .pager.is-hidden,.carousel .carousel__toggle.is-hidden,.carousel--single-page .carousel__progress-fill{display:none}.carousel__toggle:disabled{pointer-events:none;cursor:default;opacity:var(--pager-disabled-opacity,.4)}}@layer variants{.carousel[data-variant=center] .pager .pager__sequence{scroll-snap-type:x mandatory;justify-content:center;min-inline-size:0;overflow-x:auto}.carousel[data-variant=end] .pager .pager__sequence{justify-content:start}.carousel[data-variant=end] .pager .pager__row{flex-wrap:wrap}@media (width>=768px){.carousel{--carousel-column-gap:var(--section-gap-lg)}.carousel .pager--mobile{display:none}.carousel .pager--tablet,.carousel--no-tablet-pager .pager--desktop{display:block}.carousel[data-controls-tablet=empty] .carousel__controls{display:none}.carousel__track{grid-auto-columns:calc((100% - (var(--carousel-items-per-page-tablet,1) - 1) * var(--carousel-gap)) / var(--carousel-items-per-page-tablet,1))}.carousel__controls{inline-size:50%;min-inline-size:max-content;max-inline-size:var(--grid-content-max-4col)}.carousel[data-variant=center] .carousel__controls{justify-self:center}.carousel[data-variant=end] .carousel__controls{justify-self:end}}@media (width>=1280px){.carousel .pager--tablet{display:none}.carousel .pager--desktop{display:block}.carousel[data-controls-desktop=empty] .carousel__controls{display:none}.carousel:not([data-controls-desktop=empty]) .carousel__controls{display:grid}.carousel__track{grid-auto-columns:calc((100% - (var(--carousel-items-per-page-desktop,1) - 1) * var(--carousel-gap)) / var(--carousel-items-per-page-desktop,1))}}.carousel--playing .carousel__toggle-icon--play{display:none}.carousel--playing .carousel__toggle-icon--pause{display:block}}@layer states{@media (hover:hover){.carousel__toggle:hover{background-color:var(--carousel-toggle-bg-hover)}}.carousel__toggle:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset)}@media (prefers-reduced-motion:reduce){.carousel__track{scroll-behavior:auto}}@media (forced-colors:active){.carousel__progress-fill{background-color:canvastext}.carousel__toggle{outline:var(--border-width-hairline) solid CanvasText}}}}