.masthead {
    background: var(--stackBrand, #121a3e);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    position: sticky;
    top: 0;
    z-index: 1000;

    &:has(.mainHeaderNav-expandedMenu) {
        height: 100dvh;
        overflow-y: scroll;
    }

    & .mainHeader {
        position: relative;
    }

}

.announcementBar {
    background: #0C0C0C;
    color: #fed700;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    inset: 0 0 auto;
    letter-spacing: .02em;
    line-height: 18px;
    padding: 8px;
    place-content: center;
    width: 100vw;
    
    & p {
        display: flex;
        flex-direction: column;
        gap: 1ch;
        place-content: center;
        text-wrap: balance;

        & span {
            text-align: center;
            width: fit-content;
        }
    }
}

@media (width >= 580px) {
    .announcementBar {
        & p {
            flex-direction: row;
            gap: 2ch;

            & span {
                place-self: center;
            }
        }
    }
}

    
.announcementControl {
    background: transparent;
    border: 1px solid #fed700;
    border-radius: 4.8px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: inherit;
    padding: 11px 22px;
    place-content: center;
    transition: 
        background .3s ease-in-out,
        border-color .3s ease-in-out, 
        color .3s ease-in-out;
    transition-delay: .1s;
    white-space: nowrap;
    
    &:hover {
        background: rgba(56, 64, 98, .5);
        color: #fed700;
        opacity: 1;
        text-decoration: none;
    }
}

@media (width >= 375px) {
    .announcementControl {
        margin-inline: auto;
        width: fit-content;
    }
}

@media (width < 768px) {
    .video-landing-wrapper video {
        height: auto;
    }

    .mainHeader {
        padding: 0;

        & .mainHeader-container {
            display: grid;
            grid-row-gap: 28px;
            grid-template-columns: 15px 1fr 16px auto 15px;
            grid-template-rows: auto auto auto;
            padding: 0;
        }

        & .mainHeader-logo {
            grid-column: 2;
            grid-row: 2;
        }

        & .mainHeaderNav-burger {
            grid-column: 4;
            grid-row: 2;
        }
        
        & .mainHeaderNav { 
            grid-row: 3;
        }

        & .mainHeaderNav-topList {
            height: 0;
            left: 0;
            position: absolute;
            top: inherit;
            transition: display .2s, height .2s ease-in-out, top .2s ease-in-out, transform .2s ease-in-out;
        }
    }

    .mainHeader--mobileMenuExpanded {
        & .mainHeader-container { 
            grid-row-gap: 28px;
        }

        & .mainHeaderNav { 
            grid-column: span 4;
            width: 100vw;
        }

        & .mainHeaderNav-topList { 
            height: 100vh;
            top: inherit;
        }
    }
}