/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px){
    .container{
       margin-inline: 1rem;
    }
 
    .card__data{
       width: 250px;
       padding: 1rem;
    }
 }
 
 /* For medium devices */
 @media screen and (min-width: 768px){
    .card__container{
       grid-template-columns: repeat(2, 1fr);
       column-gap: 1.5rem;
    }
 }
 
 /* For large devices */
 @media screen and (min-width: 1120px){
    .container{
       height: 100vh;
    }
 
    .card{
       &__container{
          grid-template-columns: repeat(3, 1fr);
       }
       &__img{
          width: 348px;
       }
       &__data{
          width: 316px;
          padding-inline: 2.5rem;
       }
    }
 }