.embla {
     overflow: hidden;
 }
 .embla-container {
     display: flex;
     gap: 1rem;
 }
 .embla .slide {
     min-width: 0;
     flex: 0 0 100%;
     transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
     will-change: transform, opacity;
 }
 .btn-prev,
 .btn-next {
     position: absolute;
     transform: translateY(-50%);
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     transition: opacity 0.3s ease;
 }

 .btn-prev {
     left: -25px;
 }

 .btn-next {
     right: -25px;
 }

    .embla.s2 .slide {flex: 0 0 calc(100% / 2 - 0.6rem);}

 @media only screen and (min-width: 600px) {
    .embla.m1 .slide {flex: 0 0 calc(100% / 1 - 0.3rem);}
    .embla.m2 .slide {flex: 0 0 calc(100% / 2 - 0.6rem);}
    .embla.m3 .slide {flex: 0 0 calc(100% / 3 - 0.7rem);}
    .embla.m4 .slide {flex: 0 0 calc(100% / 4 - 0.8rem);}
    .embla.m5 .slide {flex: 0 0 calc(100% / 5 - 0.9rem);}
    .embla.m6 .slide {flex: 0 0 calc(100% / 6 - 0.9rem);}
 }

 @media only screen and (min-width: 960px) {
    .embla.l1 .slide {flex: 0 0 calc(100% / 1 - 0.3rem);}
    .embla.l2 .slide {flex: 0 0 calc(100% / 2 - 0.6rem);}
    .embla.l3 .slide {flex: 0 0 calc(100% / 3 - 0.7rem);}
    .embla.l4 .slide {flex: 0 0 calc(100% / 4 - 0.8rem);}
    .embla.l5 .slide {flex: 0 0 calc(100% / 5 - 0.9rem);}
    .embla.l6 .slide {flex: 0 0 calc(100% / 6 - 0.9rem);}
    .embla.l7 .slide {flex: 0 0 calc(100% / 7 - 0.9rem);}
    .embla.l8 .slide {flex: 0 0 calc(100% / 8 - 0.9rem);}
 }