.image-carrousel {
    &__overlay {
        position: fixed;
        /* relativo a la cabecera sticky */
        z-index: 14;
        top: 0;
        left:0;
        width: 100%;
        height: 100vh;
        background:var(--color-blanket);
        display:none;
        &.active {
            display:block;
        }
        & .image-carrousel__content {
            height: 100vh;
            justify-content: center;
            align-items: center;    
            @media (--viewport-xs-max) {
                padding:0 10px;
                margin-top:0;
                margin-bottom:0;
            }
            @media (--viewport-ms-min) {
                margin-top:0;
                margin-bottom:0;
            }
            .swiper-wrapper{
                flex-flow: row;
                justify-content: flex-start;
                @media (--viewport-xs-max) {
                    height: calc(188px + 36px);
                    max-width: 335px;
                }
                @media (--viewport-ms-min) {
                    height: calc(329px + 36px);
                    max-width: 585px;
                }
                @media (--viewport-sm-min) {
                    height: calc(452px + 36px);
                    max-width: 803px;
                }
            }
            .swiper-slide{
                overflow: hidden;
                margin-bottom: 0 !important;
                @media (--viewport-xs-max) {
                    height: calc(188px + 36px);
                    max-width: 375px;
                }
                @media (--viewport-ms-min) {
                    height: calc(329px + 36px);
                    max-width: 764px;
                }
                @media (--viewport-sm-min) {
                    height: calc(329px + 36px);
                }
                @media (--viewport-md-min) {
                    height: calc(452px + 36px);
                    max-width: 1280px;
                }
                .image-carrousel__leyend{
                    background:var(--black);
                    .bodycopy-s {
                        color:var(--color-text-inverse);
                        
                    }
                }
                
            }
            .image-carrousel__controls{
                background:var(--black);
            }
            .swiper-navigation {
                right: 4px;
                .swiper-pagination,
                .swiper-button-prev,
                .swiper-button-next {
                    .icon {
                        fill:var(--color-icon-inverse);
                    }
                }
            }
        }
        &__close {
            z-index: 3;
            width:50px;
            height:50px;
            position:absolute;
            top:15px;
            right:15px;
            @media (--viewport-xs-max) {
                right:0;
            }
            &:hover {
                cursor:pointer;
            }
            .icon {
                fill:var(--color-icon-inverse);
                width:24px;
                height:24px;
            }
        }
    }
    &__content {
        position:relative;
        z-index: 2;
        margin-top:32px;
        margin-bottom:32px;
        @media (--viewport-xs-max) {
            margin-top:16px;
            margin-bottom:16px;
        }
    }
    &__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }   
    &__controls {
        position: absolute;
        right: 4px;
        bottom: 8px;
        z-index: 2;
        background: var(--color-background);
        @media (--viewport-xs-max) {
            display: flex;
            justify-content: flex-end;
            position: relative;
            right: auto;
            align-items: end;
            width: 100%;
            padding-right: 4px;
        }
    }     
    &__leyend {
        position: absolute;
        z-index: 1;
        left: 0;
        bottom: 0;
        background: var(--color-background);
        padding: 8px;
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap:10px; 
+        @media (--viewport-xs-min) {
            flex-flow: column;
            align-items: flex-start;
        }
        @media (--viewport-sm-min) {
            flex-flow: nowrap;
            justify-content: space-between;
            align-items: center;
        }
        .bodycopy-s {
            max-width: 100%;
        }
    }
    &__label {
        position:absolute;
        right:0;
        top:0;
        z-index:2;
        background:var(--color-blanket);
        padding: 8px;
        grid-gap: 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span {
            color:var(--color-text-inverse);
        }
        .icon {
            fill:var(--color-icon-inverse);
        }
    }
    /* Swiper Variation*/
    .swiper-wrapper{
        flex-flow: row;
        justify-content: flex-start;
        max-width: 100%;
        @media (--viewport-xs-min) {
            height: calc(188px + 36px);
        }
        @media (--viewport-ms-min) {
            height: calc(329px + 36px);
        }
        @media (--viewport-sm-min) {
            height: calc(329px + 36px);
        }
        @media (--viewport-md-min) {
            height: calc(452px + 36px);
            max-width: 1280px;
        }
    }
    .swiper-slide{
        overflow: hidden;
        margin-bottom: 0 !important;
        max-width: 100%;
        @media (--viewport-xs-min) {
            height: calc(188px + 36px);
        }
        @media (--viewport-ms-min) {
            height: calc(329px + 36px);
        }
        @media (--viewport-sm-min) {
            height: calc(329px + 36px);
        }
        @media (--viewport-md-min) {
            height: calc(452px + 36px);
            max-width: 1280px;
        }
        .image-carrousel__img {
            @media (--viewport-xs-min) {
                height: 188px;
            }
            @media (--viewport-ms-min) {
                height: 329px;
            }
            @media (--viewport-sm-min) {
                height: 329px;
            }
            @media (--viewport-md-min) {
                height: 452px;
            }
        }
        
    }
    .swiper-navigation{
        display: flex;
        flex-flow: nowrap;
        width: 74px;
        justify-content: space-between;
        align-items: center;
        gap:30px;
        @media (--viewport-xs-max) {
            align-self: flex-end;
        }
        .swiper-pagination {
            display:none;
        }

        .swiper-pagination,
        .swiper-button-prev,
        .swiper-button-next {
            position: relative;
            right:0;
            &::after {
            display: none;
            }

            .icon {
                height: 24px;
                width: 24px;
                fill:var(--color-accent)
            }
        }

        .swiper-button-next,
        .swiper-button-prev {
            top: 0;
            width: 24px;
            height: 24px;
            margin-top: 0;
        }

        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            margin-left: 5px;
            margin-right: 5px;
        }

        .swiper-pagination-bullet-active {
            background: var(--color-accent);
        }    
    }
}