.banner {
    width: 100%;
    height: auto;
    aspect-ratio: 320/600;
    max-height: 90vh;
}

    .banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .banner .swiper-slide {
        position: relative;
    }

    .banner iframe,
    .banner__modal iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .banner mediaelementwrapper {
        height: 100%;
        height: 100vh;
        display: block;
        position: relative;
        cursor: pointer;
        aspect-ratio: 16/9;
        left: 50%;
        transform: translateX(-50%);
        min-width: 100%;
    }

        .banner mediaelementwrapper::before {
            content: "";
            vertical-align: -.125em;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ffffff' class='bi bi-play-fill' viewBox='0 0 16 16'> <path d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/></svg>");
            background-repeat: no-repeat;
            background-position: center;
            font-size: 100px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 9;
            top: 0;
            opacity: 0
        }

        .banner mediaelementwrapper:hover::before {
            opacity: 1
        }

    .banner .playing mediaelementwrapper::before {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ffffff' class='bi bi-pause-fill' viewBox='0 0 16 16'> <path d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5'/> </svg>")
    }

.banner__modal mediaelementwrapper {
    display: flex;
}

.banner-video-container {
    height: 90vh
}

.banner iframe {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.banner .banner-tools {
    bottom: 1.5rem;
}

.banner .banner__container--text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(var(--color-dark-rgb),0)0%, rgba(var(--color-dark-rgb),.3) 66.71%)
}


@keyframes fill-bar {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Animações */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-up, .animate-fade-in {
    transition: all 500ms ease;
    opacity: 0;
}

.swiper-slide-active .animate-fade-up {
    animation: fadeUp 0.6s ease forwards;
}

.swiper-slide-active .animate-fade-in {
    animation: fadeIn 500ms ease-in forwards;
}

@media screen and (min-width: 768px) {
    .banner {
        aspect-ratio: unset;
    }
}

@media screen and (min-width: 992px) {
    .banner-video-container {
        height: 93vh
    }
}