.hero
{
   background-image: url("/images/hero/hero2.webp");
}

.shelf
{
   display: flex;
   gap: 20px;
   row-gap: 70px;
   flex-wrap: wrap;
   padding: 20px;
   align-items: center;
   justify-content: center;
}

.shelf:hover:has(.box:hover)
{
   .box:not(:hover)
   {
   filter: blur(1px) brightness(80%);   
   }
}

.box
{
   position: relative;
   width: 200px;
   height: 250px;
   border-radius: 10px;
   box-shadow: 5px 3px 15px #0006;
   transition: all 0.2s ease-out;
   animation-direction: alternate;
   animation-iteration-count: 2;
   animation-duration: 0.5s;
   &:hover
   {
      transform: scale(1.25) translateY(-30px);
      box-shadow: 0px 10px 15px #0003;
      z-index: 1;
   }
}

@media screen and (max-width: 1200px) {
   .intro
   {
      margin-top: 50px;
   }

   .hero{
      height: auto;
   }
}