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

/* For medium devices */
@media screen and (min-width: 540px){
   .login__area{
      width: 380px;
      margin-inline: auto;
   }
}

@media screen and (min-width: 350px) and (max-height: 600px){
   .login{
      height: 760px;
   }
}

/* For large devices */
@media screen and (min-width: 1150px){
   .container{
      margin-inline: auto;
   }

   .login{
      &__area{
         width: 460px;
         margin: initial;
      }
      &__access,
      &__register{
         width: 600px;
      }
      &__title{
         text-align: initial;
         margin-bottom: 3rem;
      }
      &__button{
         margin-bottom: 3rem;
      }
      &__group{
         grid-template-columns: repeat(2, 1fr);
      }
      &__blob{
         display: block;
         height: 100vh;
         position: absolute;
         top: 0;
         right: 0;
      }
      &__img{
         transform: translate(0rem, 0rem); // Change the position of the image
      }
   }
}
