header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--color-black);
    padding: 20px;
    transition:
        transform 0.4s ease,
        padding 0.4s ease;

    &.header--hidden {
        transform: translateY(-100%);
    }

    &.header--compact {
        padding: 10px 20px;

        @media (min-width: 768px) {
            padding: 12px 24px;
        }

        .logo {
            width: 30%;
            margin: 0 auto 16px;

            @media (min-width: 768px) {
                width: 160px;
                margin: 0 auto 16px;
            }
        }
    }

    @media (min-width: 768px) {
        padding: 24px;
    }

    .logo {
        display: table;
        margin: 0 auto 20px;
        width: 60%;
        transition:
            width 0.4s ease,
            margin 0.4s ease;

        @media (min-width: 768px) {
            width: 297px;
            margin: 0 auto 36px;
        }

        img {
            width: 100%;
        }
    }

    .menu-header-menu-container {
        .menu {
            display: flex;
            justify-content: center;
            gap: 18px;

            @media (min-width: 768px) {
                gap: 6vw;
            }

            li {
                a {
                    font-family: var(--font-trade-gothic-next);
                    color: var(--color-olive);
                    text-transform: uppercase;
                    font-size: 14px;

                    @media (min-width: 768px) {
                        font-size: 16px;
                    }

                    &:hover {
                        color: var(--color-blue);
                        text-decoration: underline;
                        text-underline-offset: 5px;
                    }
                }
            }
        }
    }
}