.myHeroSwiper {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: $pink;

    .hero-slider {
        position: relative;

        // Animation
        h2 .char, h4, p {
            opacity: 0;
            visibility: hidden;
        }

        h2, h4, p, a {
            color: white;
        }

        h4 {
            font-size: 45pt;

            @include media-breakpoint-down(xxl) {
                font-size: 41pt;
            }

            @include media-breakpoint-down(xl) {
                font-size: 37pt;
            }

            @include media-breakpoint-down(lg) {
                font-size: 33pt;
            }

            @include media-breakpoint-down(md) {
                font-size: 29pt;
            }

        }

        &::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background: $dark-pink;
            background: linear-gradient(0deg, rgba(187, 95, 77, 0.5) 0%, rgba(187, 95, 77, 0) 80%);
            z-index: 1;           
        }

        &-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: -1;
        }

        &-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            height: 100vh;
            z-index: 2;           
        }

        .hero-text-link {
            position: absolute;
            left: -$size-lg;
            bottom: $size-md;            
            width: 360px;
            z-index: 2;

            @include media-breakpoint-down(xxl) {
                left: -$size-md;
                bottom: $size-sm;  
            }
            
            @include media-breakpoint-down(xl) {
                position: relative;
                margin-top: $size-md;
                left: unset; 
                bottom: unset;
            }

            @include media-breakpoint-down(md){
                width: 100%;
            }
        }
    }

    .pagination-wrapper {
        position: absolute;
        bottom: $size-lg;
        right: $size-lg;
        
        @include media-breakpoint-down(md) {
            right: $size-sm;    
            bottom: $size-sm;
        }
    }
}

.myDragSwiper {
    width: 100%;
    height: 100%;
    overflow-y: unset;

    .swiper-wrapper {
        height: unset;
    }

    .swiper-slide {
        width: auto;

        .image-frame {
            position: relative;
            width: 450px;
            height: 660px;
            z-index: 5;
            clip-path: polygon(20% 0,80% 0,80% 60%,20% 60%);
            -webkit-clip-path: polygon(20% 0,80% 0,80% 60%,20% 60%);
            -o-clip-path: polygon(20% 0,80% 0,80% 60%,20% 60%);
            -ms-clip-path: polygon(20% 0,80% 0,80% 60%,20% 60%);
            @include transition(clip-path, .5s, ease);

            @media only screen and (max-width: 1600px) {
                width: 337.5px;
                height: 495px;
            }
        }

        img {
            width: auto;
            height: 100%;
        }

        &.swiper-slide-prev {
            .image-frame {
                clip-path: polygon(20% 10%, 80% 10%, 80% 70%, 20% 70%);
            }
        }
        &.swiper-slide-active {
            .image-frame {
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            }
        }
        &.swiper-slide-next {
            .image-frame {
                clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
            }
        }
    }

    .pagination-wrapper {
        margin-top: $size-lg;
        margin-right: $size-lg;
        float: right;

        @include media-breakpoint-down(md) {
            margin-top: $size-md;
            margin-right: $size-sm;
        }
    }
}

.pagination-wrapper {
    height: $size-sm;
}

.myHeroSwiper-pagination,   
.myDragSwiper-pagination {   
    position: relative !important; 
    width: 260px !important;
    height: 1px !important;

    .swiper-pagination-progressbar-fill {
        height: 5px !important;
        top: -2.5px !important;
    }

    &.progress-white {
        background: rgba($white, 1) !important;

        .swiper-pagination-progressbar-fill {
            background: $white !important;
        }
    }

    &.progress-black {
        background: rgba($black, 1) !important;

        .swiper-pagination-progressbar-fill {
            background: $black !important;
        }
    }
}

.myFractionSwiper-pagination {
    position: relative;
    top: 20px;
    font-size: 9pt;
    font-weight: 100;
    z-index: 10;

    &.fraction-white {
        color: $white;
    }

    &.fraction-black {
        color: $black;
    }
}

.myLoopSwiper {
    width: 100%;
    height: auto;
    margin-top: $size-xl;

    @include media-breakpoint-down(lg) {
        margin-top: $size-md;
    }

    .swiper-wrapper {
        -webkit-transition-timing-function:linear!important; 
        -o-transition-timing-function:linear!important; 
        transition-timing-function:linear!important; 
    }

    .swiper-slide {
        width: 505px;
        min-width: 505px;
        max-width: 505px;
        font-family: $NarzissPro;
        text-align: center;
        @extend .title-md;

        b {
            font-family: $Metropolis;
            font-weight: 700;
        }
    }
}

.myPopupTopSwiper {
    position: relative;
    width: 100%;
    height: 55px;
    
    @include media-breakpoint-up(sm) {
        height: $size-sm;
    }

    .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}