body {
   box-sizing: border-box;
   margin: 0;
}

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

.header {
   padding: 70px 0;
   grid-column: span 12;
   background-color: red;
}

.aside {
   grid-column: span 2;
   background-color: yellow;
}

.main {
   grid-column: 3 / span 10;
   background-color: green;
}

.container {
   max-width: 1200px;
   padding: 15px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 15px;
   justify-content: center;
}

.article {
   height: 250px;
   ;
   background-color: orange;
}

.footer {
   padding: 70px 0;
   grid-column: span 12;
   background-color: blue;
}

@media (width <= 1200px) {
   .aside {
      grid-column: span 3;
   }

   .main {
      grid-column: 4 / span 9;
   }
}

@media (width <= 768px) {
   .aside {
      display: none;
   }

   .main {
      grid-column: 1 / span 12;
   }
}