.page-content {
  background-color: var(--bg);
  position: fixed;
  z-index: 1;

  top: var(--header-height);
  right: 0;
  bottom: calc(0px - var(--safe-bottom));
  left: 0;

  padding:
    24px
    max(16px, var(--safe-right))
    calc(24px + var(--safe-bottom))
    max(16px, var(--safe-left));

  box-sizing: border-box;
  margin: 0;
  overflow: auto;

  transition: left 0.3s ease;
}

@media (min-width: 768px) {
  body:has(.sidebar-nav.open) .page-content {
    left: var(--sidebar-width);
  }
}

@media (max-width: 768px) {
  .page-content {
    top: var(--header-height);
  }
}