/* Layout classes that handle 80% of the layout*/

.box {
    padding: var(--space-near);
}

.stack {
    display: grid;
    gap: var(--gap, var(--space-near));
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;

    & > * {
        min-width: 0;
    }
}

.stack.-stretched {
    width: 100%;

    & > * {
        width: 100%;
    }
}

.flow > * + * {
    margin-block-start: var(--gap, var(--space-near));
}

.flow > *:is(h1,h2,h3,h4,h5,h6) {
    --gap: var(--space-away);
}

.flow > *:is(h1,h2,h3,h4,h5,h6) + p {
    --gap: var(--space-small);
}

.flow > p + p {
    --gap: var(--space-near);
}

.flow > figure {
    margin-inline: 0;
}

.flow .breakAfter {
    margin-block-end: auto;
}

.section {
    padding-block: var(--space-away);
}

.layout-container {
    margin-inline: auto;
    width: 100%;
    max-width: var(--size-max-container);
    padding-inline: var(--space-away);
    display: grid;
    grid-template-columns: minmax(10rem, var(--size-max-main)) minmax(0, 1fr);
    justify-items: start;

  & > * {
    min-width: 0;
  }
}

.layout-container > *:not(figure, .full-width) {
    grid-column-start: 1;
    grid-column-end: 2;
}

.layout-container > figure, .layout-container > .full-width {
    grid-column-start: 1;
    grid-column-end: 3;
}

.cluster {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap, var(--space-near));
}

.with-sidebar {
    --min-size: 50%;

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap, var(--space-away));
}

.with-sidebar [data-aside] {
    flex-grow: 1;
    min-width: min-content;
}

.with-sidebar [data-grow] {
    flex-basis: 0;
    flex-grow: 999;
    min-width: var(--min-size);
}

.blog-layout {
    row-gap: var(--gap, var(--space-away));
    align-items: flex-start;

    @media screen and (min-width: 1560px) {
        column-gap: var(--gap, var(--space-away));
    }
}

.-layout-away {
    --gap: var(--space-away);
}

.-layout-near {
    --gap: var(--space-near);
}

.-layout-small {
    --gap: var(--space-small);
}

.-layout-tiny {
    --gap: var(--space-tiny);
}

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

.layout-reset {
    --gap: unset;
}