.carrousel{--col-size: calc(100% / var(--cols));--active: 0;--last-slide-column: calc(var(--total-columns) - var(--cols));--scroll: 0px;overflow-x:clip}.carrousel__content{--maximum-left: calc(-1 * var(--last-slide-column) * var(--col-size));--current-left: calc(-1 * var(--active) * var(--col-size) + var(--scroll));display:grid;grid-template-columns:repeat(var(--cols),var(--col-size));grid-template-rows:repeat(var(--rows),1fr);grid-auto-flow:column;grid-auto-columns:var(--col-size);transform:translate3d(clamp(var(--maximum-left),var(--current-left),0px),0,0);transition:.3s transform ease-in-out;margin-left:calc(-1 * var(--gap) / 2);margin-right:calc(-1 * var(--gap) / 2);row-gap:var(--gap);margin-bottom:calc(var(--gap) + 20px)}.carrousel__content>*{margin-left:var(--gap);margin-right:var(--gap)}.carrousel__controls{display:flex;flex-direction:row;justify-content:center;gap:20px}.carrousel__indicators{display:flex;flex-direction:row;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}.carrousel__indicators>span{border-radius:50%;background-color:#00305e1a;width:12px;height:12px;cursor:pointer;outline:none;border:1px solid rgba(0,48,94,.15);transition:all .3s}.carrousel__indicators>span.active{background-color:#00305e;border-color:#00305e;width:16px;height:16px}.carrousel__progress{width:274px;height:8px;border-radius:100px;background:#00305e0d;overflow:hidden;position:relative;margin:0 auto}.carrousel__progress:after{--segment-width: calc(100% / var(--total-columns));--width: calc(var(--segment-width) * var(--cols));--left: calc(var(--active) * var(--segment-width));--max: calc(100% - var(--width));position:absolute;content:" ";width:var(--width);top:0;bottom:0;background:#00305e4d;border-radius:100px;left:clamp(0px,var(--left),var(--max));transition:left .3s ease-in}
