:root{--breakpoint-mobile:$breakpoint-mobile;--breakpoint-tablet:$breakpoint-tablet;--breakpoint-desktop:$breakpoint-desktop;--spacing:$spacing}@layer components-carousel{.carousel{width:100%;max-width:100%;position:relative;margin:0 auto;padding:0}.carousel-container,.carousel-slides{position:relative;display:flex;align-items:center;width:100%}.carousel-slides{overflow:hidden;justify-content:center;background:#f5f5f5;border-radius:8px;min-height:400px}@media(max-width:640px){.carousel-slides{min-height:250px}}.carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.carousel-slide--active{opacity:1;visibility:visible;position:relative}.carousel-slide img{max-width:100%;max-height:100%;object-fit:contain}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background-color:hsla(0,0%,100%,.9);border:2px solid #333;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:all .2s ease;padding:0}.carousel-button:hover{background-color:#fff;box-shadow:0 .25rem rgba(0,0,0,.15);transform:translateY(-50%) scale(1.05)}.carousel-button:focus{outline:3px solid #06c;outline-offset:.125rem;background-color:#fff}.carousel-button:active{transform:translateY(-50%) scale(.95)}.carousel-button svg{width:24px;height:24px;color:#333}.carousel-button--prev{left:1.25rem}.carousel-button--next{right:1.25rem}@media(max-width:640px){.carousel-button{width:40px;height:40px}.carousel-button svg{width:20px;height:20px}.carousel-button--prev{left:.625rem}.carousel-button--next{right:.625rem}}.carousel-dots{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1.25rem;padding:0}.carousel-dot{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background-color:rgba(0,0,0,0);cursor:pointer;transition:all .2s ease;padding:0;position:relative}.carousel-dot:hover{background-color:rgba(51,51,51,.3);transform:scale(1.1)}.carousel-dot:focus{outline:3px solid #06c}.carousel-dot--active,.carousel-dot--active:hover{background-color:#fff}@media(max-width:640px){.carousel-dot{width:10px;height:10px}}}