.my-plugin-expanding-slider {

    --my-plugin-slider-height: 72vh;

    --my-plugin-transition: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);

    position: relative;

    width: 100%;

    height: calc( var(--my-plugin-slider-height) + 3px );

    min-height: 420px;

    overflow: hidden;

    background: #0f131f;

}



.my-plugin-expanding-slider__track {

    display: flex;

    width: 100%;

    height: 100%;

    gap: 0;

}



.my-plugin-expanding-slider__slide {

    position: relative;

    flex: 1 1 0;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    cursor: pointer;

    transition: flex var(--my-plugin-transition), transform var(--my-plugin-transition);

}



.my-plugin-expanding-slider__slide.is-active {

    flex: 3 1 0;

}



.my-plugin-expanding-slider__media,

.my-plugin-expanding-slider__media img {

    width: 100%;

    height: 100%;

}



.my-plugin-expanding-slider__media {

    position: absolute;

    inset: 0;

}



.my-plugin-expanding-slider__image {

    display: block;

    object-fit: cover;

    transform: scale(1);

    transition: transform var(--my-plugin-transition);

}



.my-plugin-expanding-slider__slide.is-active .my-plugin-expanding-slider__image {

    transform: scale(1.04);

}



.my-plugin-expanding-slider__overlay {

    position: absolute;

    inset: 0;

    background: var(--my-plugin-overlay-color);

    transition: opacity var(--my-plugin-transition);

}



.my-plugin-expanding-slider__slide.is-active .my-plugin-expanding-slider__overlay {

    opacity: .3;

    background-color: #000000;

}



.my-plugin-expanding-slider__content {

    position: absolute;

    inset: 100px 24px 28px 24px;

    z-index: 2;

    color: #ffffff;

}



.my-plugin-expanding-slider__slide-link {

    position: absolute;

    inset: 0;

    z-index: 4;

    display: block;

    text-decoration: none;

}



.my-plugin-expanding-slider__slide:not(.is-active) .my-plugin-expanding-slider__content {

    inset: auto 18px 20px 18px;

    text-align: right;

}



.my-plugin-expanding-slider__slide:not(.is-active) .my-plugin-expanding-slider__title {

    margin: 0 0 0 auto;

}



.my-plugin-expanding-slider__content h3 {

    color: #FFF;

    font-size: 32px;

    line-height: 40px;

}



.my-plugin-expanding-slider__content h3 img.site-logo {

    max-width: 200px;

}



.my-plugin-expanding-slider__number {

    position: absolute;

    top: 18px;

    left: 20px;

    z-index: 3;

    font-size: clamp(38px, 3.9vw, 64px);

    font-weight: 300;

    line-height: 1;

    letter-spacing: 0.02em;

    color: transparent;

    -webkit-text-stroke: 2px #d6b463;

    pointer-events: none;

    text-shadow: 0px 0px 10px #000;

}



.my-plugin-expanding-slider__title {

    margin: 0;

    max-width: 420px;

    font-size: clamp(24px, 2.3vw, 44px);

    line-height: 1.03;

     text-shadow: 1px 1px 10px #000;

}



.my-plugin-expanding-slider__description {

    margin: 0;

    max-width: 460px;

    font-size: 16px;

    line-height: 23px;

    opacity: 1;

    overflow: hidden;

    transition: opacity var(--my-plugin-transition), max-height var(--my-plugin-transition);

    text-shadow: 1px 1px 10px #000;

}



.my-plugin-expanding-slider__button {

    display: inline-block;

    margin-top: 20px;

    padding: 12px 28px;

    border-radius: 999px;

    background: #070c24;

    color: #ffffff;

    font-size: 12px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-decoration: none;

    transition: opacity 200ms ease;

    opacity: 0;

    pointer-events: none;

}



.my-plugin-expanding-slider__slide.is-active .my-plugin-expanding-slider__description {

    opacity: 1;

    max-height: 200px;

}



.my-plugin-expanding-slider__slide.is-active .my-plugin-expanding-slider__button {

    opacity: 1;

    pointer-events: auto;

}



.my-plugin-expanding-slider__button:hover,

.my-plugin-expanding-slider__button:focus-visible {

    color: #ffffff;

    opacity: 0.86;

}



.my-plugin-expanding-slider__dots {

    position: absolute;

    left: 50%;

    bottom: 18px;

    z-index: 6;

    display: flex;

    gap: 8px;

    transform: translateX(-50%);

}



.my-plugin-expanding-slider__dot {

    width: 11px;

    height: 11px;

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 50%;

    background: transparent;

    padding: 0;

    cursor: pointer;

}



.my-plugin-expanding-slider__dot.is-active {

    background: #ffffff;

}



@media (max-width: 900px) {

    html, body {
        height: 100vh;
    }

    main#page-content {
        padding-top: 65px;
    }

    .home section.l-section.wpb_row.height_auto.width_full .l-section-h.i-cf {
        margin: 0;
    }

    .my-plugin-expanding-slider {

        min-height: 320px;

        height: var(--my-plugin-slider-height);

    }

    p.wpml-ls-statics-post_translations.wpml-ls {
        display: none;
    }


    .my-plugin-expanding-slider__track {

        transform: translateX(0);

        transition: transform var(--my-plugin-transition);

    }



    .my-plugin-expanding-slider__slide,

    .my-plugin-expanding-slider__slide.is-active {

        flex: 0 0 100%;

        width: 100%;

    }



    .my-plugin-expanding-slider__overlay {

        opacity: 0.55;

    }



    .my-plugin-expanding-slider__number {

        top: 14px;

        left: 14px;

        font-size: clamp(30px, 7vw, 44px);

    }



    .my-plugin-expanding-slider__description,

    .my-plugin-expanding-slider__slide.is-active .my-plugin-expanding-slider__description {

        opacity: 1;

        max-height: 240px;

    }



    .my-plugin-expanding-slider__button,

    .my-plugin-expanding-slider__slide.is-active .my-plugin-expanding-slider__button {

        opacity: 1;

        pointer-events: auto;

    }

}