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

   .nav__link{
      padding-inline: 1rem;
   }
}

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

   .nav{
      height: calc(var(--header-height) + 2rem);
      display: flex;
      justify-content: space-between;

      &__toggle{
         display: none;
      }
      &__list{
         height: 100%;
         display: flex;
         column-gap: 3rem;
      }
      &__link{
         height: 100%;
         padding: 0;
         justify-content: initial;
         column-gap: .25rem;

         &:hover{
            background-color: transparent;
         }
      }
   }

   .dropdown{
      &__item,
      &__subitem{
         position: relative;
      }
      &__menu,
      &__submenu{
         max-height: initial;
         overflow: initial;
         position: absolute;
         left: 0;
         top: 6rem;
         opacity: 0;
         pointer-events: none;
         transition: opacity .3s, top .3s;
      }
      &__link,
      &__sublink{
         padding-inline: 1rem 3.5rem;
      }
      &__subitem &__link{
         padding-inline: 1rem ;
      }
      &__submenu{
         position: absolute;
         left: 100%;
         top: .5rem;
      }
      // Show dropdown menu
      &__item:hover &__menu{
         opacity: 1;
         top: 5.5rem;
         pointer-events: initial;
         transition: top .3s;
      }
      // Show dropdown submenu
      &__subitem:hover > &__submenu{
         opacity: 1;
         top: 0;
         pointer-events: initial;
         transition: top .3s;
      }
   }
}