/* Default height for small devices */
#hero {
    height: 400px;
    background-size: cover;
}

/* Height for devices larger than 992px */
@media (min-width: 992px) {
    #hero {
        height: calc(100vw/16*7);
    }
}

@media (max-width: 720px) {
    #hero {
        height: 300px;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.challenge-btn {
    z-index: 200;
}