.PageApp {
  @apply h-full mx-auto;
  max-width: 1600px;
  grid-template-areas:
    'content'
    'footer';
  display: grid;
  grid-gap: 50px;

  @screen lg {
    grid-template-areas:
      'lside content rside'
      'footer footer footer';
    grid-template-columns: 300px 40rem 1fr;
    column-gap: 24px;
  }

  @screen xl {
    grid-template-areas:
      'lside content rside'
      'footer footer footer';
    grid-template-columns: 300px 45rem 1fr;
    column-gap: 40px;
  }

  @screen 2xl {
    grid-template-areas:
      'lside content rside'
      'footer footer footer';
    grid-template-columns: 300px 50rem 1fr;
    column-gap: 100px;
  }

  .main {
    @apply py-12 px-6 min-w-0 lg:px-0;
  }
}
