:root {
  --tpg-layout-boxed-width: 100rem;
  --tpg-layout-gap: clamp(1.5rem, 2vw, 1.875rem);
}

/* The old theme's final block margin provided this footer separation. */
.main-content {
  padding-block-end: 1.875rem;
}

body.boxed {
  background: var(--tpg-color-page-canvas);
  margin-inline: auto;
  max-width: var(--tpg-layout-boxed-width);
  width: 100%;
}

body.boxed .site {
  max-width: none;
  width: 100%;
}

body.wide .site {
  max-width: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.layout-container {
  margin-inline: auto;
  padding-inline: 0.9375rem;
  width: 95%;
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tpg-layout-gap);
  padding-block: 0;
}

.content-column,
.sidebar {
  min-width: 0;
}

/* Gavias supplied this gap via the block placed in Content Top. */
.content-top {
  margin-block-end: 1.875rem;
}

/* Replace the old theme's global block margin with a scoped region gap. */
.content-bottom {
  margin-block-start: 1.875rem;
}

@media (min-width: 64rem) {
  .content-layout.has-sidebar-right {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .layout-container {
    width: 100%;
  }
}