*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.grid
{
  width: 90%;
  max-width: 1200px;
  margin:10px auto;
  margin-bottom: 0px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(18rem,1fr));
  grid-template-rows:repeat(4,auto) ;
  background-color: white;
  grid-template-areas: "cabecera cabecera cabecera aside"
                       "contenido contenido contenido aside"
                       "contenido contenido contenido aside"
                       "footer footer footer footer";

}
.container img{
  width: 100%;
  height: 100%;
}
.grid .cabecera{
  grid-area: cabecera;
}
.grid .contenido{
  margin: 1rem 1rem;
  grid-area: contenido;
}
.grid aside{
  margin-top: 110px;
  grid-area: aside;
}
.footer-grid img{
  width: 100%;
  height: 50%;
}
  .footer-grid{
  grid-area: footer;
  display: flex;
  justify-content: center;
  background: linear-gradient(to top right, #fa7272,#faa872,#fae672);
 } 
footer{
  background-color: #343a40;
  padding: 0.94rem;
  color: white;
  text-align: center;
}
.dropdown-item:hover{
  background-color:rgb(4,4,4,.5);
  color: #ffff;
}
@media screen and (max-width: 1200px)
{
  *{
    margin: 0px;
    padding: 0px;
  }
  .grid
{
  grid-template-areas: "cabecera cabecera cabecera cabecera"
                       "contenido contenido contenido contenido"
                       "footer footer footer footer"
                       "aside aside aside aside";
} 
aside .container{
  width: 25%;
  height: 25%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}
 .footer-grid{ 
   display: flex;
   flex-direction: column;
   text-align: center;
}
.footer-grid img{
  width: 25%;
  height:25%;
  object-fit: cover;
  margin: 1rem;
}
}