:root {
  --menu-mobile-overlay-gap: 2.4rem;
  --menu-mobile-overlay-padding: 9rem;
  --menu-mobile-overlay-padding-top: 5rem;
  --menu-mobile-overlay-link-font-size: 3rem;
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --menu-mobile-overlay-padding: 4rem;
    --menu-mobile-overlay-padding-top: 2.5rem;
    --menu-mobile-overlay-link-font-size: 2rem;
  }
}

.menu-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color-border);
  opacity: 0.95;
  z-index: 1;
  padding: var(--menu-mobile-overlay-padding);
  padding-top: calc(
    var(--header-height) + var(--menu-mobile-overlay-padding-top)
  );
  display: flex;
  flex-direction: column;
  gap: var(--menu-mobile-overlay-gap);
}

.menu-mobile-overlay-list {
  display: flex;
  flex-direction: column;
  gap: var(--menu-mobile-overlay-gap);
}

.menu-mobile-overlay-link {
  font-size: var(--menu-mobile-overlay-link-font-size);
  color: var(--theme-color-white);
}