:root {
  --page-margin: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  :root {
    --page-margin: max(40px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
}

.section--page-width {
  grid-template-columns: var(--page-margin) 1fr var(--page-margin) !important;
}

.hero__content-wrapper {
  padding-inline: var(--page-margin);
}