.page-container {
  position: relative;
  width: 100vw;
  height: inherit;
  display: flex;
  justify-content: center;
}

.background {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100%;
}

.background ::slotted(*) {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

.foreground {
  position: relative;
  height: 100%;
  width: calc(100% - var(--size, 8px) * 5);
  max-width: var(--page-max-width, 1224px);
}

@media (max-width: 580px) {
  :root {
    --page-max-width: 100%;
  }
}