.container-center-guru {

    display: flex;

    justify-content: center;

    width: 100%;

}



.guru-container {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));

    gap: 15px;

    width: 80%;

    margin-bottom: 20px;

justify-items: center;

}



.guru-container .card img {

width: 170px;



}



.guru-container .card .img {

    width: 170px;

    height: 220px;

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    }



.guru-container .card {

position: relative;

padding-left: 10px;

padding-right: 10px;

}



.guru-container .text-box {

    width: 170px;

}



.guru-container .text-box h4 {

    font-size: 16px;

}



.guru-container .text-box h5 {

    font-size: 15px;

}



.guru-container .card .box {

padding:10px 0;



display: flex;

justify-content: center;

align-items: center;

}



.quetes-box {

    position: absolute;

    left: 0;

    top: 0;

    padding: 7px;

    width: 100%;

    height: 0px;

    opacity: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: rgb(255, 255, 255);

    transition: all 0.3s;

}



.quetes-box p {

    opacity: 0;

    font: 15px;

    text-align: center;

}



.guru-container .card:hover .quetes-box {

    height: 100%;

    opacity: 1;

    transition: all 0.3s;

}



.guru-container .card:hover .quetes-box p{

    opacity: 1;

}
@media screen and (max-width: 580px) {

.guru-container {
    
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   }

.guru-container .text-box {

    width: 130px;

  }

.guru-container .card {
    width: max-content;
}

.guru-container .card .img {
    width: 130px;
    height: 200px;
    }

 }

@media screen and (max-width: 375px) {
    .guru-container .card .img{
         width: 130px;
    height: 190px;

    }


.guru-container .text-box {

    width: 130px;

}

.guru-container {
    
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
width: 95%;
   }


}

@media screen and (max-width: 320px) {
 .guru-container .card .img{
         width: 125px;
    height: 190px;

    }


.guru-container .text-box {

    width: 125px;

}

}