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

 html,
 body {
   height: 100%;
 }

 body {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: mistyrose;
 }

 .container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   width: 100%;
   gap: 20px;
 }

 .container img {
   width: 20%;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .container img:hover {
   transform: scale(.8) rotate(-15deg);
   border-radius: 20px;
   box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2);
 }

 .full-img {
   width: 100%;
   height: 100vh;
   background: rgba(0, 0, 0, 0.9);
   position: fixed;
   top: 0;
   left: 0;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 100;
 }

 .full-img img {
   width: 90%;
   max-width: 500px;
 }

 .full-img span {
   position: absolute;
   top: 5%;
   right: 5%;
   font-size: 30px;
   color: white;
   cursor: pointer;
 }

 .full-img .prev,
 .full-img .next {
   position: absolute;
   top: 50%;
   font-size: 40px;
   color: white;
   cursor: pointer;
   user-select: none;
   padding: 10px;
   transform: translateY(-50%);
 }

 .full-img .prev {
   left: 10%;
 }

 .full-img .next {
   right: 10%;
 }