:root {
    --lite-carousel-speed: 600ms;

    --lite-carousel-ease:
        cubic-bezier(0.22, 1, 0.36, 1);

    --lite-carousel-gap: 0px;

    --lite-carousel-nav-size: 48px;

    --lite-carousel-nav-bg:
        rgba(0, 0, 0, 0.42);

    --lite-carousel-nav-color: #fff;

    --lite-carousel-dot-size: 8px;

    --lite-carousel-dot-active-width: 28px;
}

/* ---------- root ---------- */

.lite-carousel {
    position: relative;

    width: 100%;

    overflow: hidden;

    touch-action: pan-y pinch-zoom;
}

.lite-carousel:active {
    cursor: grabbing;
}

.lite-carousel.is-draggable {
    cursor: grab;
}

.lite-carousel.is-dragging {
    cursor: grabbing;
}

/* ---------- viewport ---------- */

.lite-carousel__viewport {
    width: 100%;

    overflow: hidden;
}

/* ---------- track ---------- */

.lite-carousel__track {
    display: flex;

    gap: var(--lite-carousel-gap);

    will-change: transform;

    user-select: none;

    transition:
        transform var(--lite-carousel-speed) var(--lite-carousel-ease);

    transform: translate3d(0, 0, 0);
}

/* ---------- slide ---------- */

.lite-carousel__slide {
    position: relative;

    flex-shrink: 0;

    min-width: 0;
}

.lite-carousel__slide img {
    display: block;

    width: 100%;
    /* height: auto; */

    pointer-events: none;

    -webkit-user-drag: none;
}

/* ---------- navigation ---------- */

.lite-carousel__prev,
.lite-carousel__next {
    position: absolute;

    top: 50%;

    z-index: 20;

    transform: translateY(-50%);

    width: var(--lite-carousel-nav-size);
    height: var(--lite-carousel-nav-size);

    border: none;
    border-radius: 999px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    /* background:
        var(--lite-carousel-nav-bg); */

    color:
        var(--lite-carousel-nav-color);

    backdrop-filter: blur(8px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        background-color .25s ease;
}

.lite-carousel__prev {
    left: 16px;
}

.lite-carousel__next {
    right: 16px;
}

.lite-carousel__prev:hover,
.lite-carousel__next:hover {
    transform:
        translateY(-50%) scale(1.06);
}

.lite-carousel__prev:disabled,
.lite-carousel__next:disabled {
    opacity: .35;

    pointer-events: none;
}

/* ---------- pagination ---------- */

.lite-carousel__pagination {
    position: absolute;

    left: 50%;
    bottom: 20px;

    z-index: 20;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 8px;
}

.lite-carousel__bullet {
    width:
        var(--lite-carousel-dot-size);

    height:
        var(--lite-carousel-dot-size);

    border: none;

    border-radius: 999px;

    cursor: pointer;

    background:
        rgba(255, 255, 255, .65);

    transition:
        width .25s ease,
        background-color .25s ease;
}

.lite-carousel__bullet.is-active {
    width:
        var(--lite-carousel-dot-active-width);

    background: #fff;
}

/* ---------- static ---------- */

.lite-carousel.is-static .lite-carousel__prev,

.lite-carousel.is-static .lite-carousel__next,

.lite-carousel.is-static .lite-carousel__pagination {
    display: none;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

    .lite-carousel__track,
    .lite-carousel__bullet {
        transition: none !important;
    }
}

/* ---------- tablet ---------- */

@media (max-width: 768px) {

    :root {
        --lite-carousel-nav-size: 40px;
    }
}

/* ---------- mobile ---------- */

/* @media (max-width: 480px) {

    .lite-carousel__prev,
    .lite-carousel__next {
        display: none;
    }
} */