header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 7em;
    background: var(--bg-light-gray);
    height: 20vh;
}

.logo-container {
    text-align: center;
    flex: 5 1;

    #headerLogo {
        width: 65%;
        max-height: max-content;
    }
}

@media only screen and (max-width: 768px) {
    header {
        flex-direction: column;
        padding: 2em 1em;
    }

    .logo-container #headerLogo {
        width: 100%;
    }

    *:has(>#headerLogo) {
        margin: 1em 0;
    }

    header .buttonContainer {
        margin: 0;
    }
}