.menu-sliding-submenu {
  --sliding-main-menu-width: 300px;
  --sliding-sub-menu-width: 300px;
  overflow: visible;
  width: var(--sliding-main-menu-width);
}

.menu-sliding-submenu .main-menu {
  flex: 0 0 var(--sliding-main-menu-width);
  width: var(--sliding-main-menu-width);
  position: relative;
  z-index: 2;
}

.menu-sliding-submenu .sub-menu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sliding-main-menu-width);
  width: var(--sliding-sub-menu-width);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: 18px 0 32px rgba(15, 23, 42, 0.12);
  transition: transform 0.24s ease, opacity 0.18s ease;
}

.menu-sliding-submenu.is-open .sub-menu.is-active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.menu-sliding-submenu .sub-menu a {
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .menu-sliding-submenu {
    --sliding-main-menu-width: 100%;
    --sliding-sub-menu-width: 100%;
    overflow: hidden;
    width: 100%;
  }

  .menu-sliding-submenu .sub-menu {
    left: 0;
    transform: translateX(100%);
  }

  .menu-sliding-submenu.is-open .sub-menu.is-active {
    transform: translateX(0);
  }
}