.primary-layout {
  /* User settings. */
  --padding-inline: var(--layout-padding-inline, 1rem);
  --content-max-width: var(--layout-content-max-width,80ch);
  --narrow-size-reduction: var(--layout-narrow-size-reduction, 4rem);
  --popout-extra-distance: var(--layout-popout-extra-distance, 4rem);
  --breakout-extra-distance: var(--layout-breakout-extra-distance, 8rem);

  /* Calculations. */
  --_narrow-column-size: calc(
    (var(--content-max-width) - var(--narrow-size-reduction)) / 2
  );
  --_content-column-size: var(--narrow-size-reduction);
  --_breakout-column-size: calc(
    var(--breakout-extra-distance) - var(--popout-extra-distance)
  );

  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--_breakout-column-size))
    [popout-start] minmax(0, var(--popout-extra-distance))
    [content-start] minmax(0, var(--_content-column-size))
    [narrow-start]
    min(50% - var(--padding-inline), var(--_narrow-column-size))
    [center-line]
    min(50% - var(--padding-inline), var(--_narrow-column-size))
    [narrow-end]
    minmax(0, var(--_content-column-size))
    [content-end]
    minmax(0, var(--popout-extra-distance)) [popout-end]
    minmax(0, var(--_breakout-column-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];

    @media (width >= 768px) {
      display: grid;
    }
}


:is(.primary-layout, .full-width) > * {
  grid-column: content;
}

:is(.primary-layout, .full-width) > .content,
:is(.primary-layout, .full-width) > .narrow {
  margin-inline: var(--padding-inline);
  overflow: auto;
}

:is(.primary-layout, .full-width) > .narrow {
  grid-column: narrow;
}
:is(.primary-layout, .full-width) > .narrow-left-only {
  grid-column: narrow-start / content-end;
}
:is(.primary-layout, .full-width) > .narrow-right-only {
  grid-column: content-start / narrow-end;
}
:is(.primary-layout, .full-width) > .popout {
  grid-column: popout;
}
:is(.primary-layout, .full-width) > .popout-left-only {
  grid-column: popout-start / content-end;
}
:is(.primary-layout, .full-width) > .popout-right-only {
  grid-column: content-start / popout-end;
}
:is(.primary-layout, .full-width) > .breakout {
  grid-column: breakout;
}
:is(.primary-layout, .full-width) > .breakout-left-only {
  grid-column: breakout-start / content-end;
}
:is(.primary-layout, .full-width) > .breakout-right-only {
  grid-column: content-start / popout-end;
}
:is(.primary-layout, .full-width) > .full-width {
  grid-template-columns: inherit;
  grid-column: full-width;

  @media (width >= 768px) {
    display: grid;
  }
}
:is(.primary-layout, .full-width) > .full-width-left-only {
  grid-column: full-width-start / content-end;
}
:is(.primary-layout, .full-width) > .full-width-right-only {
  grid-column: content-start / full-width-end;
}

:where(.primary-layout, .full-width) > img {
  width: 100%;
  object-fit: cover;
}

.full-width-content-split,
.full-width-popout-split,
.full-width-narrow-split,
.full-width-breakout-split {
  grid-column: full-width;
  grid-template-columns: inherit;

  @media (width < 768px) {
    padding-inline: var(--padding-inline);
  }

  > :is(:first-child, :last-child) {
    grid-template-columns: subgrid;
    align-content: start;

    @media (width >= 768px) {
      display: grid;
    }
  }

  > :has(img):is(:first-child, :last-child) {
    align-content: stretch;
  }

  > :where(:first-child) {
    grid-column: full-width-start / center-line;
    > * {
      grid-column: var(--_size, content) / center-line;
    }

    @media (width >=768px) {
      padding-right: 1rem;
    }
  }

  > :where(:last-child) {
    grid-column: center-line / full-width-end;

    > * {
      grid-column: center-line / var(--_size);
    }

    @media (width >=768px) {
      padding-left: 1rem;
    }

  }

  @media (width >= 768px) {
    display: grid;
  }
}

.full-width-content-split {
  --_size: content;
}
.full-width-narrow-split {
  --_size: narrow;
}
.full-width-popout-split {
  --_size: popout;
}
.full-width-content-split {
  --_size: content;
}
.full-width-breakout-split {
  --_size: breakout;
}

.full-half {
  padding: 0;
  align-self: stretch;
  > * {
    grid-column: 1 / -1;
  }

  > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

:has(+ .slider-container) {
  outline: 5px solid lime;
}

.slider-container {
  overflow-x: scroll;
}

.slider {
  grid-column: content;

  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-auto-columns: 400px;

  width: max-content;
  /* (100vw - widthToMatch) / 2 */
  padding-right: max(
    ((100vw - var(--_slider-size, 0)) / 2) - (var(--padding-inline) * 2),
    1rem
  );
}

.slider-container.full-width .slider {
  --_slider-size: var(--content-max-width);
}

.slider-container.full-width .slider.popout {
  --_slider-size: calc(
    var(--content-max-width) + (var(--popout-extra-distance) * 2)
  );
}

.slider-container.full-width .slider.breakout {
  --_slider-size: calc(
    var(--content-max-width) + (var(--breakout-extra-distance) * 2)
  );
}

.slider > * {
  padding: 3rem;
  background: red;
}

.hero {
  position: relative;
}

.hero__image {
  grid-column: full-width;
}

.hero img {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.hero__content {
  position: relative;
  margin-block: var(--hero-text-margin);
  padding: var(--hero-text-padding);
  color: var(--hero-text-colour);
  background: var(--hero-text-background-colour);
}

.layout--threecol-33-34-33 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1em;
}

.primary-layout:has(.bg-colour) {
  color: var(--font-color);
}

.primary-layout:has(.accent) {
  background-color: var(--color-accent);
}

.primary-layout:has(.accent-complementary) {
  --font-color: white;
  background-color: var(--color-accent-complementary);
}

.primary-layout:has(.gradient-primary) {
  color: var(--font-color-gradient-primary);
  background: var(--background-gradient-primary);
}

.primary-layout:has(.gradient-secondary) {
  color: var(--font-color-gradient-secondary);
  background: var(--background-gradient-secondary);
}