.embla {
    overflow: hidden;
}

.embla.mode-slide,
.embla.mode-fade {
    --embla-item-count: var(--all-embla-item-count);
    --embla-gap-size: var(--all-embla-gap-size);

    @media (max-width: $bp-lg) {
        --embla-item-count: var(--lg-embla-item-count);
        --embla-gap-size: var(--lg-embla-gap-size);
    }

    @media (max-width: $bp-md) {
        --embla-item-count: var(--md-embla-item-count);
        --embla-gap-size: var(--md-embla-gap-size);
    }

    @media (max-width: $bp-sm) {
        --embla-item-count: var(--sm-embla-item-count);
        --embla-gap-size: var(--sm-embla-gap-size);
    }

    --embla-gap-count: calc(var(--embla-item-count) - 1);
    --embla-gap-reduction: calc(var(--embla-gap-size) * var(--embla-gap-count) / var(--embla-item-count));
    --embla-item-size: calc(100% / var(--embla-item-count));
    --embla-flex-value: calc(var(--embla-item-size) - var(--embla-gap-reduction));
}

.embla.mode-fade {
    --embla-item-count: 1;
    --embla-gap-size: 0px;
}

.embla__container {
    display: flex;
    padding: 0;
    list-style: none;
}

.embla__slide {
    flex: 0 0 var(--embla-flex-value);
    min-width: 0;
    margin-right: var(--embla-gap-size);
    padding: 0;
}

.embla.auto-width .embla__slide {
    flex: 0 0 auto;
}

.embla-align-start .embla__slide,
.embla-align-center .embla__slide {
    margin-right: var(--embla-gap-size);
}

.embla-align-start:not(.embla-loop) .embla__slide:last-child,
.embla-align-center:not(.embla-loop) .embla__slide:last-child {
    margin-right: 0;
}

.embla-align-end .embla__slide {
    margin-left: var(--embla-gap-size);
}

.embla-alignend:not(.embla-loop) .embla__slide:first-child {
    margin-left: 0;
}

.embla__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.embla__buttons {
    display: flex;
    gap: 0.75rem;
}

.embla__button {
    width: 3rem;
    height: 3rem;
    background: var(--button-background-color);
    border-radius: 100%;
    padding: 0.5rem;
    transition-duration: var(--transition-duration);
}

.embla__button:hover {
    background: var(--button-background-color-hover);
}

.embla__button[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.embla__button--prev svg {
    transform: translateX(-0.1rem);
}

.embla__button--next svg {
    transform: translateX(0.1rem);
}

.embla__button path {
    stroke: var(--white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.embla__dots {
    display: flex;
    gap: 5px;
}

.embla__dot {
    width: 0.75rem;
    height: 0.75rem;
    background: var(--black-alpha-2);
    border-radius: 100%;
    transition-duration: var(--transition-duration);
}

.embla__dot.embla__dot--selected {
    background: var(--button-background-color);
}

.embla__dot:hover {
    background: var(--button-background-color-hover);
}