.Page {
  position: relative;
}

@media (--medium-device) {
  .Page--flat {
    min-height: initial;
    margin: var(--space-2x) auto;
    max-width: var(--page-max-width);
  }

  .Page--withBorder {
    border-radius: var(--border-radius-2x);
    min-height: initial;
    margin: var(--space-2x) auto;
    max-width: var(--page-max-width);
  }

  .Page--withBorder:before,
  .Page--withBorder:after {
    content: "";
    display: block;

    position: absolute;
    z-index: 0;

    pointer-events: none;
    border-radius: var(--border-radius-2x);
  }

  .Page--withBorder:before {
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;

    border: 4px solid rgba(255, 255, 255, 0.25);
  }

  .Page--withBorder:after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  }

  .Page--withBorder > :first-child {
    border-top-left-radius: var(--border-radius-2x);
    border-top-right-radius: var(--border-radius-2x);
  }
  .Page--withBorder > :last-child {
    border-bottom-left-radius: var(--border-radius-2x);
    border-bottom-right-radius: var(--border-radius-2x);
  }
}