.top-nav {
    padding: 42px 0;

    .logo-wrapper {
        width: 80%;
        max-width: 358px;

        @include media-breakpoint-down(md) {
            width: 100%;
            display: flex;
            justify-content: space-between;
            max-width: 100%;
            gap: 3rem;
            align-items: center;

            img {
                max-width: 358px;
            }

            a {
                color: $c-textGrey;
            }

            svg {
                width: 50px;
                height: 50px;
            }
        }

        @include media-breakpoint-down(sm) {
            gap: 1rem !important;

            img {
                max-width: 250px;
            }
        }

        #mobile-nav-toggle {
            @include media-breakpoint-up(md) {
                display: none;
            }

            svg:first-of-type {
                display: block;
            }
            svg:last-of-type {
                display: none;
            }

            .mobile-nav-open & {
                svg:first-of-type {
                    display: none;
                }
                svg:last-of-type {
                    display: block;
                }
            }
        }
    }

    nav.main-nav {
        @include media-breakpoint-down(md) {
            display: none;

            .mobile-nav-open & {
                display: block;

                ul#menu-main-menu {
                    flex-direction: column;
                    margin-top: 1rem;
                    gap: 1rem;
                }
            }
        }

        & > div {
            height: 100%;
        }

        ul#menu-main-menu {
            display: flex;
            gap: 3rem;
            padding: 0;
            margin: 0;
            list-style-type: none;
            height: 100%;
            align-items: center;
            font-size: 1rem;

            a {
                color: $c-black;
            }
        }
    }
}