.wrapper {
  $wrapper-gap: var(--gutter);
  display: grid;
  grid-template-columns:
    1fr
    min(var(--wrapper-max-length, var(--line-length)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2))
    1fr;
  grid-column-gap: var(--wrapper-gap, $wrapper-gap);
  
  > * {
    grid-column: 2;
  }
}

.wrapper-full {
  @extend .wrapper;
  $wrapper-gap: var(--gutter);
  grid-template-columns:
    1fr
    min(var(--wrapper-max-length, var(--line-length-large)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2))
    1fr;
}

.full-bleed {
  inline-size: 100%;
  grid-column: 1 / -1;
  padding: var(--padding-block, 1rem) var(--padding-inline, 2rem);
  background-color: var(--background-color, none);
}

.flex-container {
  display: inline-flex;
  align-items: center;

  &.column {
    flex-direction: column;
  }
}

.sr-only {
  position: absolute !important;
  block-size: 1px !important;
  inline-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.invisible {
  visibility: hidden !important;
}

.list-inline {
  $item-gap : 1ch;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin-left: calc(var(--item-gap, $item-gap) * 3 * -1);
  clip-path: inset(0 0 0 calc(var(--item-gap, $item-gap) * 3));
  align-items: center;
  color: var(--item-color, var(--text));
  
  li {
    padding-left: var(--item-gap, $item-gap);
    &::before {
      content: var(--item-separator, '•');
      display: inline-block;
      margin-right: var(--item-gap, $item-gap);
      width: var(--item-gap, $item-gap);
      text-align: center;
    }
  }

  a {
    color: var(--item-color, var(--text));
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}