/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 300px){
   .container{
      margin-inline: 1rem;
   }

   .modal{
      padding-inline: 1rem;

      &__buttons{
         flex-direction: column;
      }
   }
}

/* For medium devices */
@media screen and (min-width: 540px){
   .card__container{
      grid-template-columns: 330px;
   }

   .modal__card{
      max-width: 350px;
   }
}

@media screen and (min-width: 768px){
   .card__container{
      grid-template-columns: repeat(2, 330px);
   }
}

/* For large devices */
@media screen and (min-width: 1150px){
   .container__title{
      margin-bottom: 4.5rem;
   }
   
   .card{
      &__container{
         grid-template-columns: repeat(3, 330px);
         gap: 3rem;
      }
      &__product{
         padding-block: 2rem;
         border-width: 6px;
      }
      &__name,
      &__price{
         font-size: var(--h3-font-size);
      }
   }

   .modal{
      &__card{
         max-width: 376px;
         padding: 3rem 2.5rem 2.5rem;
      }
      &__img{
         width: 250px;
      }
      &__name,
      &__price{
         font-size: var(--h3-font-size);
      }
      &__buttons{
         column-gap: 1rem;
      }
   }
}
