.carousel{container-type:inline-size;container-name:carousel;display:grid;width:100%;>*:first-child{--gap: var(--wp--preset--spacing--x-small);&[data-slidewidth="25"]{--slide-width: calc(25% - var(--gap))}&[data-slidewidth="50"]{--slide-width: calc(50% - var(--gap))}&[data-slidewidth="100"]{--slide-width: 100%}display:grid;grid-auto-flow:column;grid-auto-columns:var(--slide-width, 40%);gap:var(--gap);scroll-snap-type:x mandatory;scrollbar-width:none;overflow-y:hidden;overflow-x:auto;@container carousel (width < 1100px){grid-auto-columns:50%;&[data-slidewidth="100"]{grid-auto-columns:100%}}@container carousel (width < 820px){grid-auto-columns:100%}>*{scroll-snap-align:center;margin-block-start:0;contain:paint;width:100%}}>.block-carousel-navigation{margin-block-start:var(--wp--preset--spacing--x-small);padding:1em;display:flex;align-items:center;justify-content:center;gap:.8em;&[data-shownav=true]{display:none}>*{transition:background-color var(--transition--timing-300) ease-in-out;background-color:var(--wp--preset--color--primary-orange-400);transition:width var(--transition--timing-300) ease,border-radius var(--transition--timing-300) ease;border-radius:50%;border:none;height:20px;width:20px;padding:0;cursor:pointer;@container carousel (width < 1100px){width:18px;height:18px}@container carousel (width < 820px){width:16px;height:16px}&:not(.active){aspect-ratio:1}&.active{background-color:var(--wp--preset--color--primary-orange-900);border-radius:12px;width:40px}}}}
