@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans:wght@700&family=Open+Sans:wght@300&display=swap');


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


.content{
 
    font-family: sans-serif;
    font-size: 3rem;
    
}

.container-item{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    border-radius: 7px;
    transition: transform 0.3s ease-in-out;
    border: solid 2px rgb(106, 163, 106);
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;


}
.container-item:hover {
filter: opacity(0.9);
transform: scale(1.04);
border-radius: 5px;
}

.container{
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  grid-auto-rows: minmax(200px, auto);
  gap: 10px;
  grid-auto-flow: dense;
  /*
  padding: 20px --opcional
  */
}
.img-container{
    padding: 4px 0;
    width: 250px;
    height: 90%;
    filter: brightness(1.1);
     mix-blend-mode: multiply;
     margin: 0;
    
}
.info-title{
    color: var(--text-color-inver);
    font-size: 30px;
}
.text-info{
    color: var(--text-color-inver);
    text-align: center;
    font-size: 24px;

}


@media (min-width: 700px){


.wide{
    grid-column: span 2;
}

.tall{
    grid-row: span 2;
}
}