Как правильно разметить или под моб сверстать?

Сверстал такую вот шапку, но как его сверстать под мобильность? Не могу понять, помогите пожалуйста

<header class="header">
    <div class="header__container __container">
        <a href="/" class="header__logo">
            <span>Web</span>Studio
        </a>
        <div class="header__menu menu">
            <nav class="menu__body">
                <ul class="menu__list">
                    <li class="menu__item">
                        <a href="#!" class="menu__link">Студия</a>
                    </li>
                    <li class="menu__item">
                        <a href="#!" class="menu__link">Портфолио</a>
                    </li>
                    <li class="menu__item">
                        <a href="#!" class="menu__link">Контакты</a>
                    </li>
                </ul>
            </nav>
            <div class="menu__contacts contacts-menu">
                <a href="#!" class="contacts-menu__link">[email protected]</a>
                <a href="#!" class="contacts-menu__link">+38 096 111 11 11</a>
            </div>
        </div>
        <button class="burger__icon">
            <span></span>
        </button>
    </div>
</header>

.header {
    background-color: #fff;

    // .header__container
    &__container {
        display: flex;
        align-items: center;
        min-height: 80px;
    }

    // .header__logo
    &__logo {
        font-family: 'Raleway', sans-serif;
        font-size: 26px;
        font-weight: 700;
        line-height: 31px;
        letter-spacing: 0.03em;
        color: var(--color-black);

        & > span {
            color: var(--color-aqua);
        }

        margin-right: 93px;
    }

    // .header__menu
    &__menu {
        display: flex;
    }

    &__icon {
        @include burger;
    }
}
.menu {
    width: 100%;

    // .menu__body
    &__body {
        flex: 1 1 auto;
    }

    // .menu__list
    &__list {
        display: flex;
    }

    // .menu__item
    &__item {
        @include margin-right(50px);
    }

    // .menu__link
    &__link {
        color: var(--color-black);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0.02em;
        transition: color .3s ease-in-out;

        @include hover {
            color: var(--color-aqua);
        }
    }

    // .menu__contacts
    &__contacts {
        
    }
}
.contacts-menu {

    // .contacts-menu__link
    &__link {
        color: var(--color-grey);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0.02em;
        transition: color .3s ease-in-out;

        @include margin-right(50px);

        @include hover {
            color: var(--color-aqua);
        }
    }
}