/*************************
 # CONTENT AREA STRUCTURE
 ************************/

:root {
  --content-width: 45rem;
  --gutter-width: var(--space-m);
}

body {
  display: grid;
  gap: 0;
  grid-template-columns:
    [full-start]
    1fr
    [wide-start]
    1fr
    [wide-gutter-start wide-gutter-left-start]
    var(--gutter-width)
    [wide-gutter-left-end gutter-start gutter-left-start]
    var(--gutter-width)
    [gutter-left-end main-start]
    minmax(auto, var(--content-width))
    [main-end gutter-right-start]
    var(--gutter-width)
    [gutter-right-end gutter-end wide-gutter-right-start]
    var(--gutter-width)
    [wide-gutter-right-end wide-gutter-end]
    1fr
    [wide-end]
    1fr
    [full-end];
  margin: 0;
}

@media screen and (max-width: 480px) {
  :root {
    --gutter-width: var(--space-s);
  }

  body {
    grid-template-columns:
      [
        full-start
        wide-start
        wide-gutter-start
        wide-gutter-left-start
        wide-gutter-left-end
        gutter-start
        gutter-left-start
      ]
      var(--gutter-width)
      [gutter-left-end main-start]
      minmax(auto, var(--content-width))
      [main-end gutter-right-start]
      var(--gutter-width)
      [
        gutter-right-end
        gutter-end
        wide-gutter-right-start
        wide-gutter-right-end
        wide-gutter-end
        wide-end
        full-end
      ];
  }
}

.body__container,
.site-header,
.main--list,
.main--single,
.content
{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full-start / full-end;
}

.main--list {
  .page-header {
    grid-column: main-start / main-end;
  }

  .page-header,
  .main__content
  {
    margin-block-end: var(--space-xl);
  }
}

.body__container {
  gap: var(--space-xl) 0;
}

.list-header, p {
  grid-column: main-start / main-end;
}

.content > :not(figure, pre) {
  grid-column: main-start / main-end;
}

.content > .codeblock) {
  grid-column: wide-gutter-start / wide-gutter-end;
}

img {
  object-fit: contain;
}

.content-term-list {
  display: flex;
  list-style: none;
  padding-inline: 0;

  li:not(:last-child) {
    margin-inline-end: var(--space-s);
  }
}

section.content--small-right-column {
  display: block flow;
  grid-column: main-start / main-end;

  p {
    grid-column: unset;
  }

  .content--right-column,
  :has(.content--right-column) {
    float: inline-end;
    margin-block: 0;
  }
}