/* ==============================
   scroll-products
============================== */

 @media(max-width:500px) {
   .scroll-container {}

   .scroll-voltar {
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

   }

   .list {
     height: 100vh;
     width: 100vw;

   }

   .list-itens.active {
     position: relative;
     width: 100vw;
     height: 100vh;
     border: 1px solid pink;
     display: grid;
     grid-template-rows: 50% 50%;
     padding-top: 60px;
   }


   .list-itens img {
     position: relative;
     left: 30px;
     top: 0;

     transform: translate(85px, 40px);
   }


   .list-itens.active img {
     width: 420px;
     height: auto;
     bottom: 0;
     left: 0;
     z-index: 2;

     animation: showMainImage 0.9s linear 1 forwards;
   }

   @keyframes showMainImage {
     from {
       width: 20px;
       top: -10px;

     }

     to {
       width: 250px;
       left: 0px;
       bottom: 5px;

     }
   }

   .list-itens .content {
     position: absolute;
     display: flex;
     /* right: 19px; */
     color: #eee;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
     top: 430px;
     left: 20px;
     text-align: center;
   }

   .arrows {
     display: flex;
     align-items: center;
     gap: 10px;
     position: absolute;
     left: 100px;
     bottom: 83px;
   }

   .arrows button {
     width: 100px;
   }

   .thumb {
     display: none;
   }

 }