.hero {
    position: relative;
}

.hero picture {
    display: block;
    margin-top: -3rem;
}

.hero>div {
    color: var(--wc-white);
    z-index: 1;
    min-height: 100%;
}

.body {
        flex-basis: 100%;
}

.body hr {
    margin: 3rem 0;
}

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

.text-justify h3 {
    text-align: initial;
}

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

    .hero picture {
        position: absolute;
        top: 0;
        margin-top: 0;
        z-index: -1
    }

    .hero .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: inherit;
    }

    .hero .hero-content>div {
        /* width: 30%; */
        padding: 1rem 0;
        position: relative;
        /* background: red; */
    }

    .hero .hero-content>div::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(0,0,0,0.5) 80%, transparent);
        z-index: -1;
        filter: blur(20px);
    }

    .hero .hero-content picture {
        position: absolute;
        top: 0;
        left: 0;
    }

    .hero .hero-content .subheading {
        max-width: 70%;
    }

    .hero .container-fluid .row div:nth-child(2) {
        margin-top: auto;
    }
}

.body .mid .row>div>div {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--navbar-height) + 1rem);
}

.videos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.videos .video {
    position: relative;
    flex: 0 0 calc(50% - 1rem);
}

.videos.odd .video:nth-child(1) {
    flex-basis: calc(100% - 1.5rem);
}

.videos .video img {
    display: block;
    width: 100%;
    transition: all ease 300ms;
}

.videos .video .bi {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3rem;
    transform: translate(-50%, -50%);
    transition: all ease 300ms;
}

.videos .video .bi-play-circle {
    color: var(--wc-white);
    opacity: 0.75;
}

.videos .video .bi-play-circle-fill {
    color: var(--wc-green-2);
    opacity: 0;
}

.videos .video:hover img {
    filter: brightness(0.5);
}

.videos .video:hover .bi-play-circle-fill {
    opacity: 1;
}

.videos .video:hover .bi-play-circle {
    opacity: 0;
}

@media screen and (min-width: 769px) {
    .box {
        --s: 250px;
    }

    .body {
        padding-bottom: 0;
        padding-right: var(--p);
    }

    .videos .video {
        flex-basis: calc(50% - 1rem);
    }
}

@media screen and (min-width:992px) {
    .box .applications img {
    width: 50%;
    }
    .box .applications div:nth-of-type(odd) img {
        float: right;
        margin-left: 2rem;
    }
    .box .applications div:nth-of-type(even) img {
        margin-right: 2rem;
        float: left;
    }
}