:root {
  --page-padding: 2rem 0;
}
.Layout {
  display: flex;
  overflow-x: hidden;
}

.Layout > stencil-route,
.Layout > stencil-route-switch {
  width: 100%;
}

.Layout.is-menu-toggled {
  --menu-transform: translateX(calc(-1 * var(--menu-width)));
  --page-margin-left: 0;
}

@media (max-width: 768px) {
  .Layout {
    --menu-transform: translateX(calc(-1 * var(--menu-width)));
    --page-padding: 1.5rem;
    --page-margin-left: 0;
  }

  .Layout.is-menu-toggled {
    --menu-transform: none;
    --page-transform: translateX(var(--menu-width));
  }

  .Layout.is-menu-toggled sparkle-page > * {
    opacity: 0.2;
    pointer-events: none;
  }

  body.scroll-lock {
    overflow-y: hidden;
  }
}
