не меняется расположение блок в grid разметке

Начал изучать разметку grid для адаптивности страницы. Создал меню, которое на полной ширине выглядит по одному, но если уменьшить размер браузера до 600 px, то нужное расположение блоков указанное в коде не применяется. Есть ли добрые люди, которые помогут понять, что я сделал не так. В интернете данную информацию находил, по ней и делал, но по факту так и не получилось. Как видите меню сверху, но потом оно переезжает вниз, и положение блоков слегка меняется, что-то перемещается, а что-то и вовсе убирается (Логотип). И второй вопрос, как сделать, чтобы это меню сверху вниз перемещалось плавно.?

HTML

    <div class="main">
    <div class="logo">Logo</div>
    <div class="menuleft">
        <span class="touchhome"><img src="img/ico/home.png"></span>
        <span class="touchmusic"><img src="img/ico/music.png"></span>
        <span class="touchpeople"><img src="img/ico/people.png"></span>
    </div>
    <div class="photoprofile"><img src="img/photo.png"></div>
    <div class="menuright">
        <span class="touchmessage"><img src="img/ico/message.png"></span>
        <span class="touchnotification"><img src="img/ico/notification-bell.png"></span>
        <span class="touchsearch"><img src="img/ico/search.png"></span>
    </div>
    <div class="settings">
        <span class="touchsearch"><img src="img/ico/setting.png"></span>
    </div>
    </div>
        

CSS

    .main {
    position: fixed;
    display: grid;
    grid-template-areas: 
    'logo menuleft photoprofile menuright settings';
    grid-template-columns: '1fr 2fr 1fr 2fr 1fr';
    width: auto;
    height: 40px;
    top: 10px;
    right: 50px;
    left: 50px;
    background-color: rgba(255, 255, 255, 0.466);
    border-radius:10px ;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.5s ease;
    }



    .logo {
    position: absolute;
    grid-area: logo;
    width: 100%;
    height: 30px;
    top: 0px;
    left: 10px;
    right: 0;
    bottom: 0px;
    margin: auto;
    font-size: 25px;
    transition: all 0.5s ease;
    }
    .menuleft {
    position: absolute;
    grid-area: menuleft;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    transition: all 1s ease;
    }
    .touchhome {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
    cursor: pointer;
    }
    .touchmusic {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    cursor: pointer;
    }
    .touchpeople {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    cursor: pointer;
    }
    .menuright {
    position: absolute;
    grid-area: menuright;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    transition: all 0.5s ease;
    }
    .touchmessage {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
    cursor: pointer;
    }
    .touchnotification {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    cursor: pointer;
    }
    .touchsearch {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    cursor: pointer;
    }
    .settings {
    position: absolute;
    grid-area: settings;
    width: 100%;
    height: 30px;
    top: 0px;
    right: 10;
    bottom: 0px;
    margin: auto;
    transition: all 0.5s ease;
    }
    .photoprofile {
    position: absolute;
    grid-area: profilephoto;
    width: 50px;
    height: 50px;
    top: 5px;
    left: 0;
    right: 0;
    margin: auto;
    border: 3px solid rgb(255, 255, 255);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);;
    border-radius: 50px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
    }
    .profilephoto > img {
    width: auto;
    height: 100%;
    top: -50%px;
    left: 0;
    right: 0;
    margin: auto;
    }

    @media (max-width: 600px) {
    .main {
    display: grid;
    grid-template-areas: 
    'photoprofile menuleft menuright settings';
    grid-template-columns: '1fr 2fr 2fr 1fr';
    top: auto;
    bottom: 10;
    }
    

    .photoprofile {
    top: auto;
    bottom: 10;
    }
    }