.ts-image-slider {
    --ts-image-slider--item--max-width: clamp(332px, 60.4vw, 870px);
    --ts-image-slider--item--max-height: clamp(230px, 37.5vw, 540px);

    margin-top: clamp(100px, calc(170vw*var(--size-modifier)), 170px);
    margin-bottom: clamp(120px, calc(190vw*var(--size-modifier)), 190px);
    overflow-x: hidden;
}

.ts-image-slider__wrapper.swiper {
    overflow: visible;
    width: 100%;
}

.ts-image-slider--has-navigation {
    --ts-image-slider--item--max-width: 100%;
    --ts-image-slider--item--max-height: auto;
}

.ts-image-slider--not-has-special-items {
    --ts-image-slider--item-image--aspect-ratio: auto;
}

.ts-image-slider--has-title {
    padding-top: clamp(70px, calc(100vw*var(--size-modifier)), 100px);
    position: relative;
}

.ts-image-slider--has-title:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background-color: var(--ts-image-slider--background-color, var(--wp--preset--color--prominent-clear));
    z-index: 1;
}

.ts-image-slider__slider {
    /* margin-left  : max(0, var(--ts-image-slider--margin-left, calc((100% - var(--wp--custom--width--default)) / 2))); */
    /* padding-left : calc(var(--wp--custom--gap--page-padding) + clamp(0px, calc(150vw*var(--size-modifier)), 150px)); */
}

.ts-image-slider__title {
    padding-left: var(--wp--custom--gap--page-padding);
    padding-right: var(--wp--custom--gap--page-padding);
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: clamp(60px, calc(100vw*var(--size-modifier)), 100px);
    font-family: var(--ts-image-slider--title--font-family, var(--wp--preset--font-family--title-font));
    color: var(--ts-image-slider--title--color, var(--wp--preset--color--primary));
    font-size: var(--ts-image-slider--title--font-size, clamp(26px, calc(40vw*var(--size-modifier)), 40px));
    position: relative;
    z-index: 1;
    text-transform: var(--ts-image-slider--title--text-transform, none);
    letter-spacing: -0.4px;
}

.ts-image-slider__title em {
    font-family: var(--ts-image-slider--title--em--font-family, var(--wp--preset--font-family--outstanding-font));
    font-size: var(--ts-image-slider--title--em--font-size, 130%);
    color: inherit;

    font-style: normal;
    font-weight: var(--ts-image-slider--title--em--font-weight, 350);
    text-stroke: var(--ts-image-slider--title--em--text-stroke, 1px);
    -webkit-text-stroke: var(--ts-image-slider--title--em--text-stroke, 1px);
    position: relative;
    top: var(--ts-image-slider--title--em--top, -0.1em);
    text-transform: none;
    letter-spacing: initial;
    margin-left: 5px;
}

.ts-image-slider__item {
    max-width: var(--ts-image-slider--item--max-width);
    height: var(--ts-image-slider--item--max-height);
    width: var(--ts-image-slider--item--width, auto) !important;
}

.ts-image-slider__item-media {
    display: flex;
    max-width: var(--ts-image-slider--item--max-width);
    height: var(--ts-image-slider--item--max-height);
    width: auto;
    aspect-ratio: var(--ts-image-slider--item-image--aspect-ratio, auto);
    display: block;
}

.ts-image-slider__item-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    aspect-ratio: var(--ts-image-slider--item-image--aspect-ratio, auto);
}

.ts-image-slider--has-special-items .ts-image-slider__item[data-position="1"] {
    --ts-image-slider--item-image-link--after--display: none;

    background-image: url(assets/images/frame.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.ts-image-slider--has-special-items .ts-image-slider__item[data-position="1"] .ts-image-slider__item-image {
    mask-image: url(assets/images/mask.svg);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    width: 100%;
    position: relative;
    transform: scale(0.96);
    aspect-ratio: var(--ts-image-slider--item-image--aspect-ratio, 475/663)
}

.ts-image-slider__item-image-link:after {
    content: '';
    position: absolute;
    bottom: clamp(10px, calc(35vw*var(--size-modifier)), 35px);
    right: clamp(10px, calc(35vw*var(--size-modifier)), 35px);
    width: clamp(25px, calc(50vw*var(--size-modifier)), 50px);
    height: clamp(25px, calc(50vw*var(--size-modifier)), 50px);
    background-image: url('data:image/svg+xml,<svg width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M49.9785 25.2317L25 0.253174L0.0215203 25.2317L25 50.2101L49.9785 25.2317Z" fill="%23475C6B"/><mask id="mask0_290_6325" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="30" height="30"><rect x="10.1523" y="10.1521" width="29.6962" height="29.6962" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_290_6325)"><path d="M24.0717 25.928H16.957V24.072H24.0717V16.9573H25.9278V24.072H33.0425V25.928H25.9278V33.0427H24.0717V25.928Z" fill="%23D6DBC2"/></g></svg>');
    background-size: contain;
    display: var(--ts-image-slider--item-image-link--after--display, block);
}

.ts-image-slider .ts-image-slider__wrapper .swiper-pagination {
    position: relative;
    /* Ensure consistent positioning */
    bottom: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: clamp(30px, calc(50vw*var(--size-modifier)), 50px);
    z-index: 10;
    /* Ensure it's above other elements */
}

.ts-image-slider .ts-image-slider__wrapper .swiper-button {
    --swiper-navigation-top-offset: calc(100% - 18px);
    border-radius: 3px;
    width: 38px;
    height: 24px;
    background: var(--wp--preset--color--prominent-clear) url(./assets/images/arrow.svg) 50% 50% no-repeat;
    transition: all 0.3s ease-in-out;
}

.ts-image-slider .ts-image-slider__wrapper .swiper-button.swiper-button-next {
    right: 50%;
    transform: translate(100%);
    margin-right: -2px;
}

.ts-image-slider .ts-image-slider__wrapper .swiper-button.swiper-button-prev {
    left: 50%;
    transform: translate(-100%) rotate(180deg);
    margin-left: -2px;
}

.ts-image-slider .ts-image-slider__wrapper .swiper-button:hover {
    background-color: var(--wp--preset--color--primary);
    background-image: url(./assets/images/arrow-hover.svg);
}

@media(max-width:768px) {
    .ts-image-slider__slider {
        margin-left: 0;
    }

    .ts-image-slider .ts-image-slider__wrapper .swiper-pagination {
        margin-left: calc(-1 * calc(var(--wp--custom--gap--big-page-padding) / 2));
    }
}

@media(max-width:480px) {
    .ts-image-slider__slider {
        --ts-image-slider--item--margin-left: 0;
        --ts-image-slider--item--padding-left: 0;
    }

    .ts-image-slider--has-navigation .ts-image-slider__slider {
        padding-left: 0;
        padding-right: 0;

    }
}

.ts-image-slider__list.swiper-wrapper {
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

.ts-image-slider__item.swiper-slide {
    flex-shrink: 0;
    position: relative;
    transition-property: transform;
}
