.history-slider-block{
    padding: 0;
    position: relative;
    .wp-block-heading{
        margin-bottom: 33px;
    }
    &.extended:after{
        content: "";
        position: absolute;
        width: 50vw;
        height: 268px;
        top: 100%;
        left: 50%;
        margin-top:-1px;
        background: var(--wp--preset--color--tertiary);
        border-radius: 0 0 0 100px;
    }
}

.history-slider-intro{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    max-width: var(--wp--style--global--content-size);
    gap:0;
        .acf-innerblocks-container{
            flex-grow: 0;
            flex-shrink: 0;
            box-sizing: border-box;
            width:50%;
            padding:65px 85px 65px 75px;
            background-color: var(--wp--preset--color--white);
            border-radius: 100px 0 0 0;
            overflow: hidden;
        }
        .history-intro-media{
            flex-grow: 0;
            flex-shrink: 0;
            box-sizing: border-box;
            width:50%;
            border-radius: 0 100px 0 0;
            overflow: hidden;
                .img-holder{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    .video-link{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .circle{
                        width:72px;
                        height:72px;
                        border:solid 2px #fff;
                        border-radius: 50%;
                        background-color:rgba(255, 255, 255, 0.55);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
        }
}

.history-slider-wrapper{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    max-width: var(--wp--style--global--content-size);
    gap:0;
    position: relative;
        &:before{
            content: '';
            position: absolute;
            top:0;
            left:50%;
            bottom:0;
            width:50vw;
            background-color: var(--wp--preset--color--tertiary);
        }
        .history-slider-media{
            flex-grow: 0;
            flex-shrink: 0;
            box-sizing: border-box;
            width:50%;
            display: flex;
            border-radius: 0 0 0 100px;
            overflow: hidden;
                .splide__track{
                    height:100%;
                }
        }
        .history-slider-block-inner{
            flex-grow: 0;
            flex-shrink: 0;
            box-sizing: border-box;
            width:50%;
            display: flex;
            align-items: stretch;
            border-radius: 0 0 100px 0;
            overflow: hidden;
            padding:58px 80px 64px 38px;
            background-color: var(--wp--preset--color--secondary);
            color:var(--wp--preset--color--white);
            position: relative;
                .thumbs-slider-grid {
                    width:100px;
                    flex-shrink: 0;
                    flex-grow: 0;
                    padding-right:20px;
                    border-right:solid 9px var(--wp--preset--color--light-blue);
                        &.is-active {
                            visibility: visible;
                        }
                        .splide__track{
                            height:100%;
                            overflow: initial;
                        }
                        .item-title{
                            font-family: var(--wp--preset--font-family--outfit);
                            font-weight: 500;
                            font-size: 24px;
                            line-height: 30px;
                            position: relative;
                        }
                        .item{
                             &.is-active {
                                .item-title{
                                    text-decoration: underline;
                                    &::after {
                                        content: "";
                                        position: absolute;
                                        width: 23px;
                                        height: 42px;
                                        background-image: url("data:image/svg+xml,%3Csvg width='31' height='50' viewBox='0 0 31 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_1564_56169)'%3E%3Cpath d='M27 25.4679V0L4 16.5321V42L27 25.4679Z' fill='%23083D5B'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1564_56169' x='0' y='0' width='31' height='50' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1564_56169'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1564_56169' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
                                        top: -5px;
                                        right: -34px;
                                    }
                                }
                            }
                        }
                        .splide__track>.splide__list {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: space-between
                        }
                }
        }
        .main-wrap{
            flex-grow: 0;
            flex-shrink: 0;
            box-sizing: border-box;
            width:calc(100% - 100px);
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            position: relative;
            padding:22px 0 25px 60px;
            gap:0;
                .testim-slider-grid{
                    width:100%;
                        .item-title{
                            font-family: var(--wp--preset--font-family--outfit);
                            font-weight: 500;
                            font-size: 32px;
                            line-height: 32px;
                            position: relative;
                            margin-bottom:22px;
                        }
                        .item-description{
                            font-size: 20px;
                            line-height: 28px;
                            font-family: var(--wp--preset--font-family--lato);
                        }
                }
                .splide__track{
                    height:100%;
                    width:100%;
                }
                .splide-custom-nav{
                    position: relative;
                    text-align: left;
                    width: 100%;
                        .splide__arrows{
                            width: 128px;
                            height: 52px;
                            border-radius: 100px;
                            border:2px solid #F1F6FA;
                            background: var(--wp--preset--color--white);
                            margin-left: 0;
                            margin-top:0;
                            transform: scale(.84);
                            position: relative;
                                &:before{
                                    content: "";
                                    position: absolute;
                                    width: 1px;
                                    height: 31px;
                                    transform: translateY(-50%);
                                    background: #DCE2E6;
                                    top: 50%;
                                    left:50%;
                                }
                                .splide__arrow{
                                    background: transparent;
                                        &.splide__arrow--prev {
                                            left: 8px;
                                        }
                                        &.splide__arrow--next {
                                            right: 8px;
                                        }
                                }
                        }
                }
        }
        .gallery-slider-grid{
            .img-holder{
                width:100%;
                height:100%;
                overflow: hidden;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
}


@media (max-width: 880px){
    .history-slider-block{
        &:after{
            display: none !important;
        }
    }
    .history-slider-intro {
        flex-direction: column-reverse;
        margin-left:calc(var(--wp--style--root--padding-left) * -1);
        margin-right: calc(var(--wp--style--root--padding-right) * -1);
            .acf-innerblocks-container{
                width:100%;
                border-radius: 0;
            }
            .history-intro-media{
                width:100%;
                aspect-ratio: 1/ 0.675;
                border-radius: 0 100px 0 0;
            }
    }
    .history-slider-wrapper{
        flex-direction: column;
        margin-left:calc(var(--wp--style--root--padding-left) * -1);
        margin-right: calc(var(--wp--style--root--padding-right) * -1);
        &:before{
            display: none;
        }
        .history-slider-media{
            width:100%;
            aspect-ratio: 1/ 0.836;
            border-radius: 0;
            .splide__track{
                height:100%;
            }
        }
        .history-slider-block-inner{
            width:100%;
            display: block;
            padding-left:var(--wp--style--root--padding-left);
            padding-right:0;
            padding-bottom: 30px;
                .thumbs-slider-grid {
                    width: auto;
                    padding-right: 0;
                    padding-bottom:14px;
                    border-right: none;
                    border-bottom: solid 6px var(--wp--preset--color--light-blue);
                        .splide__track>.splide__list {
                            flex-direction: row;
                            align-items: flex-start;
                            justify-content: space-between;
                                .item{
                                    width:auto !important;
                                    min-width:90px;
                                        &.is-active {
                                            .item-title{
                                                &::after {
                                                    content: "";
                                                    position: absolute;
                                                    width: 14px;
                                                    height: 26px;
                                                    background-image: url("data:image/svg+xml,%3Csvg width='22' height='34' viewBox='0 0 22 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_1564_53708)'%3E%3Cpath d='M18 15.7658V0L4 10.2342V26L18 15.7658Z' fill='%23083D5B'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1564_53708' x='0' y='0' width='22' height='34' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1564_53708'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1564_53708' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
                                                    top: initial;
                                                    bottom:-28px;
                                                    right: initial;
                                                    left:30px;
                                                }
                                            }
                                        }
                                }
                        }
                }
                .main-wrap {
                    width: 100%;
                    height: auto;
                    padding: 40px var(--wp--style--root--padding-right) 35px 0;
                        & .splide-custom-nav {
                            .splide__arrows {
                                margin-top:30px;
                            }
                        }
                }
        }
    }
}

@media (max-width: 600px){
    .history-slider-intro {
        .acf-innerblocks-container {
            padding:30px var(--wp--style--root--padding-left) 30px var(--wp--style--root--padding-right);
        }
    }
    .history-slider-wrapper {
        & .history-slider-block-inner {
            & .thumbs-slider-grid {
                .item{
                    min-width:65px !important
                }
                .item-title {
                    font-size: 16px;
                    line-height: 18px;
                        &:after {
                            left: 12px !important;
                        }
                }
            }
        }
    }
}