body {

   min-width: 375px;
   margin: 0;
}

.grid-container {
   min-height: 100vh;
   grid-template-rows: auto 1fr auto;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
}

.container {
   max-width: 1280px;
   padding: 0 15px;
   margin: 0 auto;
}

header {
   grid-column: 12 span;
   min-height: 100px;
   background-color: brown;
}

aside {
   /* height: 600px; */
   grid-column: 1 / 2 span;
   background-color: rgb(0, 255, 42);
}

main {
   /* max-height: 3000px; */
   background-color: aqua;
   grid-column: 3 / 12 span;
}

article {
   min-height: 200px;
   background-color: coral;
}

main .container {
   grid-auto-rows: 350px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-template-rows: repeat(2, 350px);
   gap: 15px;
}

footer {
   height: 150px;
   grid-column: 12 span;
   background-color: rgb(61, 42, 165);
}

@media(width <= 1220px) {
   aside {
      grid-column: 1 / 3 span;
   }

   main {
      grid-column: 4 / 12 span;
   }
}

@media(width <= 768px) {
   aside {
      display: none;
   }
   main {
      grid-column: 1 / 12 span;
   }
}