html{
    font-size: 22px;
 }
 body{
   min-heigth: 100vh;
   overflow-x: hidden;
 }
.main {
position: absolute;
justify-content: center;
align-items: center;
margin-top: 10px;
width: 100vw;
display: grid;
grid grid-template-columns: repeat(auto-fill, minmax(300px,300px));
column-gap: 10px;
row-gap: 10px;
}
img{
 width: 200px;
 padding: 10px;
 height: 200px;
 object-fit: cover;
 object-position: center; 
 transition: 0.5s;
}
 
img:hover{
 opacity: 1;
 cursor: pointer;
 transform: scale(1.2);
}
h1, p{
 text-align: center;
}
.row{
 display: flex;
 justify-content: space-around;
 align-items: center;
 flex-wrap: wrap;

}