.embla {
    position: relative;
    --slide-size: 25%;
    --slide-spacing: 24px;
}

.embla.embla-size-3 {
    --slide-size: 33.333%;
    --slide-spacing: 32px;
}

@media (max-width: 640px) {
    .embla {
        --slide-size: 90%;
        --slide-spacing: 16px;
    }

    .embla.embla-size-3 {
        --slide-size: 90%;
        --slide-spacing: 16px;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .embla {
        --slide-size: 45%;
        --slide-spacing: 16px;
    }
    .embla.embla-size-3 {
        --slide-size: 45%;
        --slide-spacing: 16px;
    }
}

.embla__viewport {
    overflow: hidden;
    padding: 20px 0;
}

.embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--slide-spacing) * -1);
}

.embla__slide {
    flex: 0 0 var(--slide-size);
    min-width: 0;
    padding-left: var(--slide-spacing);
}

.embla__prev:disabled,
.embla__next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}