{{/*
  structure.css
  Eryn Wells <eryn@erynwells.me>
  vim: set sw=2 sts=2:
*/}}




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

:root {
  --content-width: 30rem;
  --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;
}

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

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

.site-header__content,
.site-footer
{
  grid-column: main-start / main-end;
}

{{- $wideElements := "figure, pre" -}}

.body__container > :not({{ $wideElements }}) {
  grid-column: main-start / main-end;
}
.body__container > :is(figure, pre) {
  grid-column: wide-gutter-start / wide-gutter-end;
}

figure, img {
  max-width: 100%;
}

img {
  max-width: 100%;
  object-fit: contain;
}

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

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