:root {
  --outer-gutter: 12px;
}

.Content {
  --gutter: 0px;
  --main-content-width: var(--content-width, 720px);
  --columns: 8;
  --grid-width: var(--full-width, 1296px);
  --column-width: calc(var(--grid-width) / var(--columns) - var(--gutter));
  --column-min-width: 0px;
  --content-column-min-width: calc(
    (var(--main-content-width) + var(--gutter)) / 4 - var(--gutter)
  );

  display: grid;
  gap: 0;
  grid-template-columns:
    [grid-start]
    var(--outer-gutter)
    [full-start wide-start] 1fr
    [content-start]
    minmax(0, var(--main-content-width))
    [content-end]
    1fr
    [wide-end full-end]
    var(--outer-gutter)
    [grid-end];

  @media (min-width: 48rem) {
    --outer-gutter: 6vw;
  }

  @media (min-width: 64rem) {
    --gutter: 16px;
    --outer-gutter: 6vw;

    grid-template-columns:
      [grid-start] var(--outer-gutter)
      [full-start] minmax(var(--column-min-width), var(--column-width))
      var(--gutter)
      [wide-start] minmax(var(--column-min-width), var(--column-width))
      var(--gutter)
      [content-start] repeat(
        3,
        var(--content-column-min-width) var(--gutter)
      )
      var(--content-column-min-width)
      [content-end] var(--gutter)
      minmax(var(--column-min-width), var(--column-width))
      [wide-end] var(--gutter)
      minmax(var(--column-min-width), var(--column-width))
      [full-end]
      var(--outer-gutter)
      [grid-end];
  }

  @media (min-width: 87.498rem) {
    --gutter: 16px;
    --outer-gutter: 12px;

    grid-template-columns:
      [grid-start] var(--outer-gutter)
      minmax(var(--column-min-width), 100vw)
      [full-start] minmax(var(--column-min-width), var(--column-width))
      var(--gutter)
      [wide-start] minmax(var(--column-min-width), var(--column-width))
      var(--gutter)
      [content-start] repeat(
        3,
        var(--content-column-min-width) var(--gutter)
      )
      var(--content-column-min-width)
      [content-end] var(--gutter)
      minmax(var(--column-min-width), var(--column-width))
      [wide-end] var(--gutter)
      minmax(var(--column-min-width), var(--column-width))
      [full-end] minmax(var(--column-min-width), 100vw)
      var(--outer-gutter)
      [grid-end];
  }
}

.Content > * {
  grid-column: content-start / content-end;
}

.Content > .alignwide {
  margin-top: var(--px-128);
  grid-column: full-start / full-end;
  padding-inline: var(--px-8);

  @media (min-width: 48rem) {
    padding-inline: 0;
    margin-top: var(--px-192);
  }
}

.Content > .alignfull {
  grid-column: grid-start / grid-end;
  margin-top: var(--px-128);
  margin-inline: auto;
  padding-inline: var(--px-8);
  width: 100%;
  max-width: 1680px;

  @media (min-width: 48rem) {
    padding-inline: var(--px-24);
    margin-top: var(--px-192);
  }
}

.Content > .alignmax {
  grid-column: grid-start / grid-end;
  margin-top: var(--px-128);

  @media (min-width: 48rem) {
    margin-top: var(--px-192);
  }
}

.Content > .alignwide.tight,
.Content > .alignfull.tight,
.Content > .alignmax.tight,
.Content > .tight {
  margin-top: var(--px-24);

  @media (min-width: 48rem) {
    margin-top: var(--px-48);
  }
}

/* If first child is hero with alignmax,
  any block in nested conted or any block in footer content:
*/
.Content .Content > *:first-child,
.Footer .Content > *:first-child,
.Content > .Hero.alignmax,
.Content > .HeroFrontPage.alignmax {
  margin-top: 0;
}

/* Special case for Image block with alignwide */
.Image.alignwide,
.Image + :is(.alignwide, .alignfull, .alignmax) {
  margin-top: var(--px-88);

  @media (min-width: 48rem) {
    margin-top: var(--px-128);
  }
}

/* Special case for Image block following another Image block */
.Image + .Image {
  margin-top: var(--px-8);

  @media (min-width: 48rem) {
    margin-top: var(--px-24);
  }
}

/* Special case for Text block that follows SinglePost header */
.Content > .SinglePost-header + .Text:is(.alignwide, .alignfull, .alignmax) {
  margin-top: 0;
}

/* Special case for FAQ block, Image block and Form block on mobile */
@media (max-width: 48rem) {
  .Content > .Image.alignwide,
  .Content > .Faq.alignwide,
  .Content > .PostList.alignwide,
  .Content > .SinglePost-image.alignwide {
    grid-column: grid-start / grid-end;
  }

  .Content > .Form-content.alignwide {
    padding-inline: 16px;
  }
}