/*********************************************
 * Partnerships
**********************************************/
.vii-partnerships {
    --item-width:clamp(300px, 20.83vw, 500px);
    --item-gap:24px;
}

/* heading */
.vii-partnerships__header {gap:24px;}
.vii-partnerships__content {max-width:550px;}

/* maps */
.vii-partnerships__header + .vii-partnerships__image {margin-top:-30px; padding-top:75px;}
.vii-partnerships__image-bg {max-width:clamp(1117px, 80vw, 100vw);}

/* maps */
.vii-partnerships__image-decoration {opacity:0.5;}
.vii-partnerships__image-decoration img {transform:scale(1.5); transform-origin:center 47%;}

/* slider */
.vii-partnerships__header + .vii-partnerships__slider {margin-top:var(--vii-spacing-32);}
.vii-partnerships__slider {margin-right:calc(-1 * var(--vii-gap-side));}
.vii-partnerships__item {width:calc(var(--item-width) + var(--item-gap)); padding-right:var(--item-gap);}
.vii-partnerships:not(.slider-loop) .vii-partnerships__item:last-child:not(:first-child) {
    width:calc(var(--item-width) + var(--vii-gap-side));
    padding-right:var(--vii-gap-side);
}

/* slider > item */
.vii-partnerships__item-title {
    font-size:var(--vii-size-14); letter-spacing:-0.055em; padding:5px 10px;
    border:1px solid rgba(21, 68, 119, .15); border-bottom:none;
}
.vii-partnerships__item-content {
    padding:12px 16px 14px;
    border:1px solid rgba(21, 68, 119, .15); border-top:none;
}
.vii-partnerships__item-tag-date {
    font-size:12px; color:#667085; line-height:0.9; letter-spacing:-0.025em;
    gap:12px;
}
.vii-partnerships__item-image {aspect-ratio:277/135;}
.vii-partnerships__item-image:before {
    content:"";
    width:100%; height:1px; background:rgba(21, 68, 119, .15);
    position:absolute; top:-12px; left:0;
}

/* slider > avoid CLS */
.vii-partnerships__slider {min-height:calc(32px + 12px + 11px + 24px + 14px + (var(--item-width) - 32px) * 135 / 277);}

/* progress */
.vii-partnerships__progress {width:calc(100% - 130px); border:1px solid rgba(21, 68, 119, .15);}
.vii-partnerships__progress i {
    height:2px; width:58.45%;
    top:-1px; left:-1px;
    background:linear-gradient(to top, #225583 0%, var(--vii-color-blue-300) 150%);
}
.vii-partnerships__arrow {width:130px; padding-left:10px; gap:8px;}

/* progress > remove if no slider */
.vii-partnerships__slider.is-cannot-slide + div {display:none;}


/*********************************************
 * Partnerships Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .vii-partnerships {
        --item-width:36vw;
        --item-gap:20px;
    }
    .vii-partnerships__slider {margin-left:calc(-1 * var(--vii-gap-side));}
    .vii-partnerships__item {padding-right:0; padding-left:var(--item-gap);}
    .vii-partnerships__item:first-child {
        width:calc(var(--item-width) + var(--vii-gap-side));
        padding-left:var(--vii-gap-side);
    }
    .vii-partnerships:not(.slider-loop) .vii-partnerships__item:last-child:not(:first-child) {
        width:calc(var(--item-width) + var(--vii-gap-side) + var(--item-gap));
        padding-right:var(--vii-gap-side);
    }

    .vii-partnerships__progress {width:calc(100% - 120px);}
    .vii-partnerships__arrow {width:120px; padding-left:10px; gap:10px;}
}
@media only screen and (max-width:768px) {
    .vii-partnerships {--item-width:40vw;}
    .vii-partnerships__header {flex-direction:column; gap:8px;}

    /* image */
    .vii-partnerships__header + .vii-partnerships__image {margin-top:0; padding-top:24px; overflow:visible}
    .vii-partnerships__image-decoration img {transform-origin:center; transform:scale(3)}

    /* content */
    .vii-partnerships__title, .vii-partnerships__content {width:100%;}
    .vii-partnerships__content {max-width:100%;}
}
@media only screen and (max-width:920px) and (min-width:601px) {
    .vii-partnerships:is(.has-2-items, .has-single-item) {
        --item-width:calc((var(--vii-container) - var(--item-gap)) / 2);
    }
}
@media only screen and (max-width:600px) {
    .vii-partnerships {--item-width:60vw;}
}
@media only screen and (max-width:480px) {
    .vii-partnerships {--item-width:calc(var(--vii-container) - var(--vii-gap-container));}
    .vii-partnerships.has-single-item {
        --item-width:var(--vii-container);
    }
}