.page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

.main-grid {
  /* Variables */
  --breakout: 1536px;
  --content: 1280px;
  --max: 2560px;
  --padding: var(--spacing-2);

  --full-size: minmax(0, 1fr);
  --max-size: minmax(var(--padding), calc((var(--max) - var(--breakout)) / 2));
  --breakout-size: minmax(0, calc((var(--breakout) - var(--content)) / 2));
  --content-size: min(100% - var(--padding) * 2, var(--content));

  /* Code */

  display: grid;

  grid-template-columns:
    [full-start] var(--full-size)
    [max-start] var(--max-size)
    [breakout-start] var(--breakout-size)
    [content-start] var(--content-size) [content-end]
    var(--breakout-size) [breakout-end]
    var(--max-size) [max-end]
    var(--full-size) [full-end];
}

.full-width,
.full-width\:breakout-content,
.full-width\:full-content,
.breakout,
.breakout\:breakout-content {
  display: grid;
  grid-template-columns: subgrid;
}

.main-grid
  > :not(
    .breakout,
    .breakout\:breakout-content,
    .full-width,
    .full-width\:breakout-content,
    .full-width\:full-content
  ),
.full-width > *,
.breakout > * {
  grid-column: content;
}

.full-width,
.full-width\:breakout-content,
.full-width\:full-content,
.full-width\:full-content > * {
  grid-column: max;
}

.breakout,
.breakout\:breakout-content,
.breakout\:breakout-content > *,
.full-width\:breakout-content > * {
  grid-column: breakout;
}

.grid-col,
.grid-col\:gap-1,
.grid-col\:gap-2,
.grid-col\:gap-3,
.grid-col\:gap-4,
.grid-col\:gap-5,
.grid-col\:gap-6 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.grid-col\:gap-1 {
  row-gap: var(--spacing-1);
}

.grid-col\:gap-2 {
  row-gap: var(--spacing-2);
}
.grid-col\:gap-3 {
  row-gap: var(--spacing-3);
}
.grid-col\:gap-4 {
  row-gap: var(--spacing-4);
}
.grid-col\:gap-5 {
  row-gap: var(--spacing-5);
}
.grid-col\:gap-6 {
  row-gap: var(--spacing-6);
}

/* Utilities */

.jc-center {
  justify-content: center;
}