.carousel{anchor-name:--carousel;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;&:focus-visible{scrollbar-color:blue transparent;outline:none}@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}}.carousel__slide{scroll-snap-align:start;:where(.carousel--offscreen-inert) &{animation:offscreen-inert linear both;animation-timeline:view(x)}:where(.carousel--unsnapped-inert) &{animation:offscreen-inert linear both;animation-timeline:view(x)}:where(.carousel--unsnapped-inert) &{container-type:scroll-state}}.carousel--scroll-markers{scroll-marker-group:before;&::scroll-marker-group{position:absolute;position-anchor:--carousel;container:marker-group/inline-size;display:grid;grid-gap:4px;gap:4px;place-content:safe center;box-sizing:border-box;border-radius:9999px;scrollbar-width:none;scroll-behavior:smooth}&:where(:not(.carousel--vertical),.carousel--bidi)::scroll-marker-group{inline-size:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:5px 10px;scroll-padding-inline:10px;-webkit-mask:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent);mask:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent);top:anchor(bottom);left:calc(anchor(left) - 10%);right:calc(anchor(right) - 10%);margin-block:8px;grid-auto-rows:8px;justify-self:center}.carousel__slide{&::scroll-marker{content:""/attr(data-label);scroll-snap-align:center;aspect-ratio:1;border:1px solid #a9a9a9;border-radius:9999px;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .3s ease,outline-offset .25s ease-in-out;animation:scale-in-and-out linear both;animation-timeline:view(x)}&::scroll-marker:target-current{border-color:blue}@media (forced-colors:active){&::scroll-marker:target-current{background:Highlight;border-color:Highlight}}}}@keyframes scale-in-and-out{entry 0%{transform:scale(.25)}entry to{transform:scale(1)}exit 0%{transform:scale(1)}exit to{transform:scale(.25)}}@keyframes offscreen-inert{entry 0%,exit to{interactivity:inert}entry to,exit 0%{interactivity:auto}}.product-carousel{display:grid;grid-template-rows:[carousel] 1fr [carousel--markers] 75px;max-inline-size:max-content;>.carousel{grid-area:carousel;&::scroll-marker-group{grid-area:carousel--markers}}}.carousel{display:grid;grid-auto-columns:100%;grid-auto-flow:row;grid-gap:20px;gap:20px;border-radius:.5rem;container-type:size scroll-state;block-size:320px;aspect-ratio:1;list-style-type:none;.carousel__slide{position:relative;padding:0;border-radius:16px;background:#d3d3d3;display:grid;&::scroll-marker{content:""/attr(data-label);background-color:#d3d3d3;background-image:var(--img);background-size:contain;background-position:50%;background-repeat:no-repeat;border:1px solid gray;transition:transform .3s ease,outline-offset .25s ease-in-out,border-color .3s ease-in-out}&::scroll-marker:target-current{border-color:blue;background-color:#d3d3d3}&::scroll-marker:is(:hover,:focus-visible){border-color:blue;transform:scale(1.05)}}& picture{transition:opacity .6s;transition-delay:.1s;>img{width:100%;height:100%;object-fit:cover;object-position:center}}&::scroll-marker-group{position:unset;block-size:100%;box-sizing:border-box;grid-auto-flow:column;grid-auto-rows:calc(75px - (10px * 2));margin-block:auto;align-content:center;-webkit-mask:none;mask:none}}