@import ulr("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

.boxes {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}

.boxes .box {
   position: relative;
   width: 300px;
   height: 300px;
   margin: 40px;
}
.boxes .box .imgBox {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: 0.5s ease-in-out;
   z-index: 2;
}
.boxes .box:hover .imgBox {
   transform: translate(-35px, -35px);
}
.boxes .box .imgBox img {
   position:absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.boxes .box .content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #fff;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   padding: 15px;
   transition: 0.5s ease-in-out;
}
.boxes .box:hover .content {
   transform: translate(35px, 35px);
}
.boxes .box .content h2 {
   font-size: 20px;
   color:#111;
   font-weight: 500;
   line-height: 20px;
   letter-spacing: 1px;
   text-align: center;
}
.boxes .box .content h2 span {
   font-size: 14px;
   font-weight: 300;
   letter-spacing: 2px;
}

@media (max-width: 768px) {
   .boxes .box:hover .content {
      transform: translate(0px, 35px);
   }
   .boxes .box:hover .imgBox {
      transform: translate(0px, -35px);
   }
}

@media (max-width: 600px) {
   boxes .box {
      margin: 20px;
   }
}