.menu-container {
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: var(--lch-transparent-grey);

  font-size: clamp(1.2rem, 5vw, 1.6rem);

  z-index: 1000;
    
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.menu-container.open {
    visibility: visible;
    opacity: 1;
}

.menu {
  height: 100%;
  width: 70%;
  padding: 10% 0.85rem 0.85rem 10%;
  background: var(--lch-light-grey);

  text-align: left;

  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

.menu a {
  text-decoration: none;
}

.menu-container.open .menu {
    transform: translateX(0);
}

.menu li:not(.menu li:last-child) {
  margin-bottom: 15%;
}

.menu-desktop {
  display: none;
}


/* DESKTOP */
@media (min-width: 980px) {
  .menu-desktop {
    flex: 2;
    display: flex;
    align-items: center;
    text-wrap: nowrap;

    gap: 2%;
  }
}