@layer carousel{.carousel{list-style-type:none;padding-inline:var(--base-padding);gap:var(--base-padding);margin-inline:auto;margin-block:0;padding:0;inline-size:calc(100cqi - var(--base-padding) * 4);display:grid;gap:var(--base-gap);grid-auto-flow:column;justify-items:center;grid-auto-columns:calc(100cqi - var(--base-padding) * 2);scrollbar-width:none;anchor-name:var(--carousel-anchor-name,--carousel);container-type:inline-size scroll-state;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}&::scroll-button(left),&::scroll-button(right){position-area:var(--_inner)}&>li{scroll-snap-align:center;padding:0}&:focus-visible{scrollbar-color:var(--link) #fff0;outline:none}@supports (container-type:scroll-state){>*{container-type:scroll-state;@container scroll-state(snapped:x){interactivity:inert}}@container scroll-state(scrollable:none){&::scroll-button(*),&::scroll-marker-group{display:none!important}}}}.scroll-markers{scroll-marker-group:after;&::scroll-marker-group{position:absolute;position-anchor:var(--carousel-anchor-name,--carousel);container:marker-group / inline-size;display:grid;gap:.5rem;place-content:safe center;box-sizing:border-box;scrollbar-width:none;scroll-behavior:smooth;inline-size:100%;max-inline-size:min(90cqi, 210px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:5px 10px;scroll-padding-inline:10px;top:anchor(bottom);left:calc(anchor(left) - 10%);right:calc(anchor(right) - 10%);margin-block:1rem;grid-auto-columns:1rem;grid-auto-flow:column;justify-self:center}>*{&::scroll-marker{content:" ";scroll-snap-align:center;aspect-ratio:1;border:2px solid var(--link-color);border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:#fff0;text-decoration:none;-webkit-tap-highlight-color:#fff0;transition:var(--transition-default);animation:scale-in-and-out linear both;animation-timeline:view(x);interactivity:auto}&::scroll-marker:target-current{background:var(--link-color);border-color:var(--link-color)}@media (forced-colors:active){&::scroll-marker:target-current{background:Highlight;border-color:Highlight}}&::scroll-marker:not(:active):hover{transform:scale(1.25)}&::scroll-marker:not(:active):focus{outline:2px solid var(--link-color);outline-offset:2px}}}.scroll-buttons{&::scroll-button(*){cursor:pointer;-webkit-tap-highlight-color:#fff0;position:absolute;z-index:1;position-anchor:var(--carousel-anchor-name,--carousel);inline-size:3rem;margin-inline:calc(-1.5 * var(--base-padding) / 2);line-height:1;place-items:center;place-content:center;aspect-ratio:1;background:var(--white);border:none;color:var(--body-color);mask-size:cover;position-area:var(--_outer);transition:var(--transition-default);@media (forced-colors:active){background:Canvas}}&::scroll-button(down),&::scroll-button(up){display:none}&::scroll-button(right){--_inner:center span-inline-start;--_inner-under:block-end span-inline-start;--_inner-over:block-start span-inline-start;--_outer:inline-end center;--_outer-under:end;--_outer-over:block-start inline-end;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'%3E%3C/path%3E%3C/svg%3E") / "Scroll Right"}&::scroll-button(left){--_inner:center span-inline-end;--_inner-under:block-end span-inline-end;--_inner-over:block-start span-inline-end;--_outer:inline-start center;--_outer-under:block-end inline-start;--_outer-over:start;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z'%3E%3C/path%3E%3C/svg%3E") / "Scroll Left"}@container (inline-size>=calc(100cqi - 8rem - 2rem)){&::scroll-button(right),&::scroll-button(left){margin-inline:calc(-2 * var(--base-padding));position-area:var(--_outer-under)}}&::scroll-button(*):not(:disabled):is(:hover,:focus-visible){background-color:var(--white);color:var(--primary);border-color:var(--body-color);transform:scale(1.1)}&::scroll-button(*):not(:active):focus-visible{outline-offset:2px;outline:var(--border-width) solid var(--link-color)}&::scroll-button(right):not(:disabled):active{transform:translateX(5px) scale(.95)}&::scroll-button(left):not(:disabled):active{transform:translateX(-5px) scale(.95)}&::scroll-button(up):not(:disabled):active{transform:translateY(-5px) scale(.95)}&::scroll-button(down):not(:disabled):active{transform:translateY(5px) scale(.95)}&::scroll-button(*):disabled{opacity:25%;cursor:not-allowed}@media (hover){&:not(:hover,:focus-within)::scroll-button(*){opacity:0}}}@keyframes scale-in-and-out{entry 0%{transform:scale(.25)}entry 100%{transform:scale(1)}exit 0%{transform:scale(1)}exit 100%{transform:scale(.25)}}@keyframes interactive-when-visible{0%{interactivity:auto}100%{interactivity:auto}}}