.site-banner {
    position: relative;
    z-index: 6;
    width: 100%;
    max-height: 3em;
    background: linear-gradient(90deg, #97CEC1 0%, #4C869E 32.5%, #9B9499 65%, #F68143 100%);
    transition: max-height .2s ease-in-out
}

body.is-nav-small .site-banner {
    max-height: 0;
    overflow: hidden
}

.site-banner .s__link {
    font: 300 var(--font-size-t-md)/1 var(--font-text);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2em;
    padding: .6em calc(var(--container-offset)*.5);
    color: var(--color-white)
}

@media only screen and (max-width: 767px) {
    .site-banner .s__link {
        font-size: var(--font-size-t-sm)
    }
}

@media only screen and (max-width: 767px)and (orientation: landscape),
only screen and (max-width: 576px) {
    .site-banner .s__link {
        gap: 1em;
        font-size: .875rem
    }
}

@media only screen and (max-width: 400px) {
    .site-banner .s__link {
        font-size: .8125em
    }
}

.site-banner .s__link img {
    max-width: 4.5em
}