.animated-banner {
    position: relative;
    height: 450px;
    background: var(--primary-500);
}

.animated-banner .keen-slider{
    height: 100%;
}

.animated-banner .slide {
    display: flex;
    flex-direction: column;
    justify-content: center;

    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    color: #fff;
    will-change: opacity;

    width: 100%;
    height: 100%;
}

.animated-banner .slide:not(:first-child) {
    opacity: 0;
}

.animated-banner .slide::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, transparent 25%, var(--primary-500) 75%);
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.animated-banner a.slide,
.animated-banner a.slide:focus,
.animated-banner a.slide:hover {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
}

.animated-banner .slide img {
    position: absolute;
    height: 100%;
    width: 100vw;
    object-fit: cover;
}

.animated-banner .slide .container {
    text-align: right;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;

    z-index: 2;
}

.animated-banner .slide .container > * {
    margin: 0 0 1rem 0;
}

.animated-banner .slide hr {
    height: 3px;
    background: var(--secondary-500);
    min-width: 20em;
}

.animated-banner .slide h2 {
    font-size: 3em;
    font-weight: 500;
    color: #fff;
}

.animated-banner .slide h3 {
    font-weight: 300;
    color: #fff;
}

.animated-banner-nav {
    position: absolute;
    bottom: 2.5em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    gap: .5em;
    z-index: 4;
}

.animated-banner-nav button {
    -moz-appearance: none;

    background: transparent;
    border: 1px solid #fff;
    border-radius: 5px;

    transition: background .25s ease;

    width: 1.25em;
    height: 1.25em;
}

.animated-banner-nav button.active {
    background: var(--secondary-500);
}

.animated-banner-nav button:hover,
.animated-banner-nav button:focus {
    background: var(--secondary-400);
}

@media screen and (max-width: 767px) {
    .animated-banner .slide .container {
        margin: 0;
        padding: 1em;
    }

    .animated-banner-nav {
        bottom: 1.5em;
    }
}

@media screen and (min-width: 992px) {
    @supports (mask-image: url('')) {
        .animated-banner .slide::before {
            content: '';
            position: absolute;
            top: 20%;
            left: -12.5%;
            bottom: -12.5%;
            width: 50%;
            z-index: 1;
            pointer-events: none;
            background: rgba(255, 255, 255, .2);
            mask-image: url('../../../../_resources/images/logo-mask.svg');
            -webkit-mask-image: url('../../../../_resources/images/logo-mask.svg');
            mask-clip: border-box;
            -webkit-mask-clip: border-box;
            mask-size: 100% 100%;
            -webkit-mask-size: 100% 100%;
        }
    }
}

@media screen and (min-width: 1200px) {
    .animated-banner {
        height: 600px;
    }

    .animated-banner .slide .container > * {
        width: 50%;
    }

    .animated-banner .slide h2 {
        font-size: 4.5em;
    }
}

@media screen and (min-width: 1500px) {
    .animated-banner {
        height: 750px;
    }

    .animated-banner .slide .container > * {
        width: 40%;
    }
}