@layer customer {
  .container {
    background-color: white;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 0 auto;
    max-width: 80rem;
    min-height: 100vh;
  }

  @media (min-width: 80rem) {
    .container {
      border-left: solid 1px var(--gray-3);
      border-right: solid 1px var(--gray-3);
      box-shadow: 0 0 11px rgb(0 0 0 / 10%);
    }
  }

  .navigation-and-content {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 640px) {
    .navigation-and-content {
      flex-direction: row;
      flex-grow: 1;
    }
  }

  .content {
    container: content / inline-size;
    flex-grow: 1;
    padding: var(--size-2) var(--viewport-padding-x);
  }
}
