.image-banner{
    width: 100%;
    max-width: 100%;
}

.image-banner[data-display-style="wide"]{
    margin: var(--row-gap) auto;
    max-width: var(--wide-width);
}

.image-banner.animate__animated{
    animation-name: fadeIn;
}

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

.image-banner[data-display-style="wide"] img{
    height: unset;
    max-height: max(calc(100vh - var(--header-height) - var(--admin-bar-height) - (2 * var(--row-gap))), 50rem);
}

@media (min-width: 768px){
    .image-banner img{
        height: 42rem;
    }
}