.marquee {
    padding: var(--gap) 0;
}

.marquee-title,
.marquee-text,
.marquee-buttons {
    padding: 0 var(--gap);
}

.marquee-title {
    margin-bottom: calc(70 * var(--size));
}

.marquee-text {
    width: 100%;
    max-width: calc(560 * var(--size));
    margin-bottom: var(--gap);
}

.marquee-buttons {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--size));
    margin-top: var(--gap);
}

.marquee-buttons.small-buttons {
    gap: calc(8 * var(--size));
    justify-content: flex-end;
    margin-top: var(--gap);
}

.marquee-buttons .button {
    width: 100%;
}

.marquee-buttons.small-buttons .button,
.marquee-buttons.two-buttons .button {
    width: 50%;
}

.marquee-buttons.two-buttons.small-buttons .button {
    width: 25%;
}

/* GALLERY */
.marquee-gallery {
    width: 100%;
    overflow: hidden;
}

.marquee-gallery .inner-gallery {
    display: flex;
    align-items: flex-start;
    width: max-content;
}

.marquee-item {
    --min: 160;
    --max: 500;

    --ratio: calc((var(--w) - var(--min)) / (var(--max) - var(--min)));

    --vw: calc(40vw + (50vw * var(--ratio)));

    width: clamp(160px, var(--vw), calc(var(--w) * 1px));

    flex: 0 0 auto;
    position: relative;
}

/* SWIPER */
.marquee-gallery-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.marquee-gallery-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee-gallery-swiper .image {
    height: 100%;
    width: calc(1000 * var(--size));
}

.marquee-gallery-swiper .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.marquee-gallery-swiper .swiper-pagination-fraction {
    top: unset;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: right;
    padding: calc(30 * var(--size)) var(--gap);
    pointer-events: none;
}

.marquee-gallery-swiper .swiper-button-next,
.marquee-gallery-swiper .swiper-button-prev {
    width: calc(45 * var(--size));
    height: calc(45 * var(--size));
}

.marquee-gallery-swiper .swiper-button-next {
    right: var(--gap);
    background: url(../../images/arrow-R.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.marquee-gallery-swiper .swiper-button-prev {
    left: var(--gap);
    background: url(../../images/arrow-L.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.marquee-gallery-swiper .swiper-button-next:hover,
.marquee-gallery-swiper .swiper-button-prev:hover {
    opacity: 0.7;
}

.marquee-gallery-swiper .swiper-button-next svg,
.marquee-gallery-swiper .swiper-button-prev svg {
    display: none;
}

.swiper-cursor {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    will-change: transform, opacity;
    width: calc(90 * var(--size));
    height: calc(90 * var(--size));
    pointer-events: none;
}

.swiper-cursor.is-next,
.swiper-cursor.is-prev {
    opacity: 1;
}

.swiper-cursor:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

.swiper-cursor.is-next:after {
    background: url(../../images/arrow-R.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.swiper-cursor.is-prev:after {
    background: url(../../images/arrow-L.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* RESPONSIVE */
@media only screen and (min-width: 769px) {
    body:not(.touchDevice) .marquee-gallery-swiper .swiper-button-next,
    body:not(.touchDevice) .marquee-gallery-swiper .swiper-button-prev {
        width: 50%;
        height: 100%;
        background: transparent !important;
        top: 0;
        margin-top: 0;
        cursor: none;
    }

    body:not(.touchDevice) .marquee-gallery-swiper .swiper-button-next {
        right: 0;
    }

    body:not(.touchDevice) .marquee-gallery-swiper .swiper-button-prev {
        left: 0;
    }

    body:not(.touchDevice) .swiper-cursor {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .marquee-title {
        margin-bottom: calc(140 * var(--size));
        text-indent: 0;
    }

    .marquee-buttons {
        flex-direction: column;
        gap: calc(8 * var(--size));
    }

    .marquee-buttons.small-buttons .button,
    .marquee-buttons .button,
    .marquee-buttons.two-buttons .button,
    .marquee-buttons.two-buttons.small-buttons .button {
        width: 100%;
    }

    .marquee-gallery-swiper .image {
        width: 100%;
        height: calc(100% - 160 * var(--size));
    }

    .marquee-gallery-swiper .swiper-pagination-fraction {
        padding-bottom: calc(27 * var(--size));
        text-align: center;
    }

    .marquee-gallery-swiper .swiper-button-next,
    .marquee-gallery-swiper .swiper-button-prev {
        margin-top: 0;
        top: unset;
        bottom: var(--gap);
    }
}