.container {
  --modal-padding-x: 24px;
  --modal-padding-y: 24px;
  --page-max-width: none;
  --page-padding-x: 0;
  --header-padding-x: 24px;
  --header-padding-y: 12px;
  --nav-padding: 24px;
  --footer-padding: 24px;
  --expand-width-button-display: none;

  padding-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
  .container {
    --page-padding-x: 24px;
    --modal-padding-y: 36px;
    --header-padding-x: var(--page-padding-x);
    --header-padding-y: 24px;
    --nav-padding: var(--page-padding-x);
    --footer-padding: var(--page-padding-x);
  }
  .container.with-navigation {
    --modal-padding-x: 40px;
  }
  .container:not(.with-navigation) {
    --modal-padding-x: 84px;
  }
}

@media only screen and (min-width: 993px) {
  .container:not(.with-navigation) {
    --modal-padding-x: 96px;
  }
  .container.with-navigation {
    --page-max-width: 944px;
    --page-padding-x: 0;
    --expand-width-button-display: flex;
  }
}

@media only screen and (min-width: 1200px) {
  .container:not(.with-navigation) {
    --page-max-width: 1056px;
    --page-padding-x: 0;
    --expand-width-button-display: flex;
  }
}

.container.expanded {
  --page-padding-x: 0;
  --page-max-width: none;
}

@media only screen and (min-width: 768px) {
  .container.expanded {
    --page-padding-x: 24px;
  }
}

.page {
  max-width: var(--page-max-width);
  padding: 0 var(--page-padding-x);
  margin: 0 auto;
}

.modal {
  background-color: white;
  box-shadow: 1px 1px 4px 0 rgb(137 137 137 / 50%);
}

.modal:focus-visible {
  outline: none;
}

.modalBody {
  padding: var(--modal-padding-y) var(--modal-padding-x);
}
