.MainBody{padding:10px;display:flex;justify-content:center;flex-wrap:wrap;direction:ltr}.parent{width:150px;height:150px;position:relative;margin:15px;cursor:pointer}.front{width:100%;height:100%;background:linear-gradient(45deg,#087a9f,#12a2d3);display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:2;border-radius:20px;overflow:hidden;animation-duration:.5s;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:linear;transition:.5s;transform:rotate(0deg);box-shadow:inset 0 30px 60px -12px rgba(50,50,93,.25),inset 0 18px 36px -18px rgba(0,0,0,.3)}.front>img{width:70px;max-width:60%}.front>p{color:#fff;font-size:0;transition:.3s;transform:rotateX(90deg)}.back{width:100%;height:100%;background:linear-gradient(45deg,#087a9f,#12a2d3);opacity:.5;position:absolute;top:0;left:0;z-index:1;transition:.5s;border-radius:20px;transform:rotate(13deg);box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}.parent:hover .back{transform:rotate(0deg)}.parent:hover .front{transform:scale(1.1)}.parent:hover .front>img{width:60px}.parent:hover .front>p{transform:rotateX(0deg);font-size:16px;margin-top:5px}@media (max-width:530px){.front>img{width:50px!important;max-width:60%!important}.parent{width:29%;aspect-ratio:2/2;height:auto;margin:0 0 10px}.MainBody{justify-content:space-around}.parent:hover .front>p{font-size:0;margin-top:0}}