/*
/// Layout
*/

:root {
  --layout-max-width: 68rem;
}

/* Page & Wrapper
// -------------------------
*/

.page {
  padding-bottom: var(--baseline,1.5em);
}

.page,
.fg-wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 100vw;
  max-width: var(--layout-max-width);
}

.fg-wrapper {
  padding-right: var(--baseline,1.5em);
  padding-left: var(--baseline,1.5em);
  width: clamp(16rem, 100%, var(--layout-max-width));
}

.narrow {
  max-width: 90ch;
}

/* Flex
// -------------------------
*/

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-gap > * {
  margin: 0 0 calc(var(--baseline,1.5em) / 2);
}

@media screen and (min-width: 56.25em) {
  .flex {
      flex-direction: row;
  }

  .flex-gap {
    gap: 0 calc(var(--baseline,1.5em) / 2);
  }

  .flex-gap > * {
    margin: 0;
  }

  .flex-reverse {
    flex-direction: row-reverse;
  }
}

.flex > * {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-items {
  align-items: center;
}

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

.flex-max {
  flex: 999;
}

.flex-min {
  flex: 0.001;
}

.flex-1-3 {
  flex: 0.5;
}

/* Grid
// -------------------------
*/

@supports (grid-area: auto) {
  .grid {
    display: grid;
    gap: 1.5em;
    padding: 0;
  }

  .grid-center {
    display: grid;
    place-items: center;
  }

  .grid-right {
    display: grid;
    place-items: end;
  }

  .grid-gap-none {
    gap: 0;
  }

  .grid-main {
    display: grid;
    grid-template-columns: 1fr 10%;
    border-bottom: 1px solid;
  }

  .grid-main div:first-child {
    order: 1;
  }

  .grid-main div:last-child {
    order: 99;
  }

}

.grid-separator > *:not(:first-child) {
  position: relative;
  border-top: #f1f1f1 2px solid;
  padding: 1em 0 0;
}

@media screen and (min-width: 56.25em) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .grid-main {
    grid-template-columns: 1fr 20%;
  }

  .grid-main div:first-child {
    order: 0;
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(250px, 1fr)) !important;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(250px, 1fr)) !important;
  }
}

.content-grid {
  --padding-inline: var(--baseline,1.5em);
  --content-max-width: var(--layout-max-width);
  --breakout-max-width: 1200px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-end];
}

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

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width,
.content-grid > .divider {
  grid-column: full;

  display: grid;
  grid-template-columns: inherit;
}

.flow > * + * {
  margin-top: var(--baseline,1.5em);
}


/* Margin
// -------------------------
*/

.margin-baseline {
  margin-bottom: var(--baseline,1.5em);
}

.padding-baseline {
  padding-block: var(--baseline,1.5em);
}

.padding-block {
  padding-inline: var(--baseline,1.5em);
  padding-block: var(--baseline,1.5em);
}

/* Alignement
// -------------------------
*/

.row-reverse {
  flex-direction: row-reverse;
}

.align-items-center {
  align-items: center;
  -ms-flex-align: center;
}

.align-items-stretch {
  align-items: stretch;
  -ms-flex-align: stretch;
}

.justify-content-center {
  -ms-flex-pack: center;
  justify-content: center;
}

.justify-content-end {
  -ms-flex-pack: end;
  justify-content: flex-end;
}