/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/
@media (max-width: 1800px) {
  .logo {
    font-size: 18px;
  }

  .icon-mobile-nav {
    height: 3.2rem;
    width: 3.2rem;
  }

  .carousel {
    max-width: 40rem;
    max-height: 40rem;
    position: relative;
    margin: 0 auto 12rem auto;
  }

  .menu-bar-container {
    width: 26rem;
  }
}

@media (max-height: 600px) {
  .footer-container {
    position: static;
  }
}

/**************************/
/* BELOW 540px (Phones) */
/**************************/
@media (max-width: 540px) {
  .menu-bar-container {
    width: 45vw;
  }

  .menu-bar-body ul {
    font-size: 1.4rem;
    gap: 0.8rem;
  }

  .logo {
    font-size: 1.4rem;
  }
  
  .icon-mobile-nav {
    height: 2.8rem;
    width: 2.8rem;
  }

  .carousel-wrapper {
    margin-right: auto;
    margin-left: auto;
  }

  .carousel {
    max-width: 32rem;
    max-height: 32rem;
  }

  .footer-container {
    font-size: 1rem;
  }
}