apps/barista-design-system/src/styles/layout/_page.scss
.ba-page {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;

  > * {
    display: block;
    width: 100%;
  }
}

.ba-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'title'
    'meta'
    'main'
    'footer';
  padding: 1rem;
  grid-row-gap: 1.5rem;
}

.ba-single-page-content::before {
  content: ' ';
  display: block;
  width: 100%;
  border-bottom: 2px solid $gray-130;
  margin-bottom: 3rem;
}

@media (min-width: $screen-md) {
  .ba-page-grid {
    grid-template-columns: minmax(0, 1fr) 230px;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-areas:
      'title title'
      'main meta'
      'footer .';
    padding: 1rem;
  }

  .ba-single-page-content::before {
    height: 2rem;
  }
}

@media (min-width: $screen-lg) {
  .ba-page-grid {
    grid-column-gap: 3rem;
    grid-template-areas:
      'title .'
      'main meta'
      'footer .';
    padding: 1rem 2rem;
  }
}

@media (min-width: $screen-xxl) {
  .ba-page-grid {
    grid-template-columns: 300px minmax(0, 1fr) 280px;
    grid-template-rows: repeat(2, max-content) 1fr;
    grid-template-areas:
      'sidenav title .'
      'sidenav main meta'
      'sidenav footer .';
    padding: 1rem 1rem 1rem 0;
  }
}

/* All columns + column gaps (3rem) + padding-right (1rem) = 1738px */
@media (min-width: 1740px) {
  .ba-page-grid {
    grid-template-columns: 300px auto 950px 280px auto;
    grid-template-areas:
      'sidenav . title . .'
      'sidenav . main meta .'
      'sidenav . footer meta .';
  }
}

.ba-page-main {
  grid-area: main;
  margin-bottom: 2rem;
}
