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

body {
  background-color: #342828;
font-family: sans-serif;
font-size: 3rem;
}

.grid-item {
display: flex;
align-items: center;
justify-content: center;
transition: transform .5s;
background-color: #03afff;
border-radius: 4px;
transition: transform 0.3s ease-in-out;
background-size: cover;   /* Para centrar las imagenes*/
background-position: center ;/* Para centrar las imagenes*/
background-repeat: no-repeat ;/* Para centrar las imagenes*/
}

.grid-item:hover {

  filter: opacity(0.9);
  transform: scale (1.04); 
  
}

.grid-container{

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-auto-rows: minmax(200px, auto);
gap: 20px; /*separacion entre imagenes*/
padding: 20px;
grid-auto-flow: dense;

}
.grid-item{

  font-size: 2rem;
  font-family: cursive;
}

@media (min-width: 600px) {
    
.wide{
grid-column: span 2;
}

.tall{
  grid-row: span 2;
}

}