/*

    Add styles specific to this block IN THE EDITOR

*/
#hero-slider {
    position: relative;
    aspect-ratio: 16/9;

    .swiper-wrapper {
        height: auto;
        aspect-ratio: 16/9;
    }

    .carousel-caption {
        justify-content: flex-end;

        .flex-bottom {
            margin-bottom: 10%;
        }
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        visibility: hidden;
    }

    .hero-swiper-nav {
        position: absolute;
        width: 120px;
        right: 0;
        bottom: 1.5em;
        display: flex;
        flex-direction: row;

        @media(min-width: 60rem) {
            right: 2em;
            bottom: 3em;
        }

        .swiper-fraction {
            color: white;
            position: relative;
            z-index: 80;
            font: light 1.5rem 'Manrope';
            letter-spacing: -1px;
            opacity: 0.5;
            text-align: center;
            margin-top: 10px;
        }

        .swiper-button-prev,
        .swiper-button-next {
            color: white;
            opacity: 0.5;
            z-index: 90;
            transform: rotateY(60deg);

            &:hover {
                opacity: 1;
            }
        }
    }

    .slide_title, .hero_title_new {
        color: white;
        font-size: 3.75rem;
        font-weight: bold;
        margin-bottom: 0.5em;
        line-height: 1em;

        strong {
            color: var(--color-green);
            display: block;
        }
    }

    .btn {
        border-color: white;
        color: black;
        background-color: white;
        transition: all 0.3s;

        &:hover {
            background-color: var(--color-green);
            border-color: var(--color-green);
            color: white;
        }
    }

    .swiper-pagination-progressbar {
        top: 100%;

        .swiper-pagination-progressbar-fill {
            background-color: rgba(255, 255, 255, 0.75);
        }
    }
}