.logo { grid-area: logo }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

main.container {
display: grid;
gap: 20px;
grid-template-areas:
  "logo"
  "content"
  "sidebar";

}

@media (width >= 500px) {
  main.container {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "logo    content"
      "sidebar content";
  }
}