@media screen and (max-width: 1200px) {
    header {
        padding: calc((var(--headerHeight) - 60px)/2) 0;
        box-sizing: border-box;
    }

    header .container {
        flex-wrap: wrap;
    }

    .logo-box {
        width: 100%;
    }

    .logo-image {
        text-align: center;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .menu {
        top: var(--headerHeight);
        height: 0;
        left: 0;
        overflow: hidden;
        flex-wrap: wrap;
        transition: height 0.5s ease-out;
    }

    .menu .link {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px solid #303030;
        box-sizing: border-box;
    }
    .menu .link:last-of-type {
        border-bottom: none;
    }

    .sub-menu {
        position: unset;
        width: 100%;
    }

    .sub-menu .link:first-of-type {
        margin-top: 0.95rem;
    }

    .sub-menu .link:last-of-type {
        padding-bottom: 0;
    }
}