/* Generic rules for all top banner varients */
.content-top-banner .banner {
    /* margin: -16px;
    margin-bottom: 0px; */
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
@media (min-width: 480px) {
    .content-top-banner .content-top-banner {
        /* margin: -24px;
        margin-bottom: 0px; */
    }
}
@media (min-width: 768px) {
    .content-top-banner .content-top-banner {
        /* margin: -36px;
        margin-bottom: 0px; */
    }
}
@media (min-width: 1024px) {
    .content-top-banner .content-top-banner {
        /* margin: -48px;
        margin-bottom: 0px; */
    }
}
@media (min-width: 1200px) {
    .content-top-banner .content-top-banner {
        /* margin: -80px;
        margin-bottom: 0px; */
    }
}

/* For short banner */
.content-top-banner>.banner-container.short>.banner {
    height: 300px;
}
/* For tall banner */
.content-top-banner>.banner-container.tall>.banner {
    height: 560px;
}
/* For auto-height banner */
.content-top-banner>.banner-container.auto-height>.-banner {
    width: -webkit-fill-available;
}