/* default body, header, main, section, and footer styles */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

main, header, footer, section {
    display: 100vw;
}

:is(header, footer, section) {
    display: block;
    width: 100vw;
    margin: 0;
    padding: var(--whitespace, 50px) 0;
}
:is(header, footer, section)[container] {
    width: 100vw;
    margin: 0;
    padding: var(--whitespace, 50px) var(--container-gutter);
}

/* modifiers */
[container], :not(header, footer, section)[container] {
    width: var(--container-width);
    margin-left: var(--container-gutter);
    margin-right: var(--container-gutter);
    padding: 0;
}

[indented], :not(header, footer, section)[indented] {
    padding-left: var(--indent);
    padding-right: var(--indent);
}

[outdented] {
    padding-left: var(--outdent);
    padding-right: var(--outdent);
}

[whitespace], main {
    flex-direction: column;
    flex: 1;
}

[block] { display: block; }
[grid] { display: grid; }
[grid] { gap: var(--gutter-1x, 15px); }
[grid][row] { grid-auto-flow: column; }
[grid][row][spread] > :first-child { justify-self: start; }
[grid][row][spread] > :last-child { justify-self: end; }
[grid][column] { grid-auto-flow: row; }

[flex] {
    display: flex;
    flex-direction: row;
}
[flex][row] { flex-direction: row; }
[flex][column] { flex-direction: column; }
[flex][spread] { justify-content: space-between; }
[flex][spread] > :first-child { text-align: start; }
[flex][spread] > :last-child { text-align: end; }

[start] {
    justify-items: start;
    justify-content: start;
}

[centered] {
    justify-items: center;
    justify-content: center;
}

[aligned] {
    align-items: center;
    align-content: center;
}

[end] {
    justify-items: end;
    justify-content: end;
}

/* responsive queries */
@media screen and (min-width: 1500px) {
    [hidden-lg] { display: none; }
}
@media screen and (max-width: 1499px) and (min-width: 768px) {
    [hidden-md] { display: none; }
}
@media screen and (max-width: 767px) {
    [hidden-sm] { display: none; }
}