html
{
  font-family: sans-serif;
  font-size: 50px;
}

* {
  box-sizing: border-box;
}

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

.wrapper
{
  display: grid;
  width: 100%;
  height: 100%;
  
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.header
{
  grid-column: span 12;
  width: 100%;
  height: 250px;
  background-color: red;

}

.aside
{
  grid-row: span 3;
  grid-column: span 2;
  width: 100%;
  
  background-color: yellow;
}

.main
{
  grid-row: span 3;
  grid-column: span 10;
  background-color: rgb(15, 197, 15);
 
}

.main .container
{
  display: grid;
  grid-template-columns: repeat(auto-fit,  minmax(250px, 1fr));

  grid-template-rows: repeat(2, 250px);
  grid-auto-rows: 250px;
  gap: 15px;
 
}

.article {
  background-color: #de6e05;
}

container
{

  background-color: rgb(255, 170, 0);
  max-width: 1280px;
  padding: 0 15px;
  margin: 0 auto;
}

.footer
{
  grid-row: span 2;
  grid-column: span 12;
  background-color: rgb(23, 10, 194);
}



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

  .main {
    grid-column-start: 4;
  }
}

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

  .main {
    grid-column: 12 span;
  }

}