Gridの表示場所を切り替えられない

グリッドをつかって画面がスマホとパソコンで分岐します

メディアクエリでgrid-template-areaを再定義しして上書してメインレイアウトとサイドレイアウトの変更を行ないますが
この再定義が長いのでもう少しスマートにできないかと悩んでいます
どなたか方法をご存知でありませんでしょうか？

<div class="top">
    <div class="side">てすとあたた</div>
    <div class="main">めいんてすと</div>
</div>

.top {
    display: grid;
    width: 500px;
    height: 300px;
    grid-template-areas: "side main main" "side main main"
}

.side {
    grid-area: side;
    background: red;
}

.main {
    grid-area: main;
    background: blue;
}

@media (max-width: 760px) {
    .side {
        display: none;
    }
    .top {
        grid-template-areas: "main main main" "main main main";
    }
}

ご教授よろしくお願いいたします