/* Grid Defaults */
body {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
header, section, footer {
    width: inherit;
    padding: var(--whitespace, 50px) 0;
}

/* Grid Element Styles */
content-container, .contained {
    display: block;
    width: var(--container-width, 100%);
    margin-left: var(--container-gutter, 100%);
    margin-right: var(--container-gutter, 100%);
    padding: 0;
}

content-row {
    display: block;
    width: 100%;
    gap: var(--gutter-1x, 15px);
    flex-direction: row;
}

content-column {
    display: block;
    width: 100%;
    flex-direction: column;
}

content-whitespace {
    display: block;
    width: 100%;
    flex: 1;
}

/* Grid Element Modifiers */
[grid] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: column;
}
[grid][columns]      { grid-auto-flow: row; }
[grid][columns="1"]  { grid-template-columns: 1fr; }
[grid][columns="2"]  { grid-template-columns: 1fr 1fr; }
[grid][columns="3"]  { grid-template-columns: 1fr 1fr 1fr; }
[grid][columns="4"]  { grid-template-columns: 1fr 1fr 1fr 1fr; }
[grid][columns="5"]  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
[grid][columns="6"]  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
[grid][columns="7"]  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[grid][columns="8"]  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[grid][columns="9"]  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[grid][columns="10"] { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[grid][columns="11"] { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[grid][columns="12"] { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[flex] { display: flex; }
[align] { align-items: center; align-content: center; }
[spread] { justify-content: space-between; }
[center] { justify-content: center; justify-items: center; }

/* TODO: add subgrid styles? */
/* https://web.dev/articles/css-subgrid */


/* Responsive Grid Styles */
/* lg-container */
@media screen and (min-width: 1280px) {
    :root {
        --responsive-mode: "lg";
        --container-width: var(--container-width-lg, 1080px);
    }

    [grid][columns-lg="1"] { grid-template-columns: 1fr; }
    [grid][columns-lg="2"] { grid-template-columns: repeat(2, 1fr); }
    [grid][columns-lg="3"] { grid-template-columns: repeat(3, 1fr); }
    [grid][columns-lg="4"] { grid-template-columns: repeat(4, 1fr); }
    [grid][columns-lg="5"] { grid-template-columns: repeat(5, 1fr); }
    [grid][columns-lg="6"] { grid-template-columns: repeat(6, 1fr); }
    [grid][columns-lg="7"] { grid-template-columns: repeat(7, 1fr); }
    [grid][columns-lg="8"] { grid-template-columns: repeat(8, 1fr); }
    [grid][columns-lg="9"] { grid-template-columns: repeat(9, 1fr); }
    [grid][columns-lg="10"] { grid-template-columns: repeat(10, 1fr); }
    [grid][columns-lg="11"] { grid-template-columns: repeat(11, 1fr); }
    [grid][columns-lg="12"] { grid-template-columns: repeat(12, 1fr); }

    [hidden-lg] { display: none; }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
    :root {
        --responsive-mode: "md";
        --container-width: var(--container-width-md, 720px);
    }

    [grid][columns-md="1"] { grid-template-columns: 1fr; }
    [grid][columns-md="2"] { grid-template-columns: repeat(2, 1fr); }
    [grid][columns-md="3"] { grid-template-columns: repeat(3, 1fr); }
    [grid][columns-md="4"] { grid-template-columns: repeat(4, 1fr); }
    [grid][columns-md="5"] { grid-template-columns: repeat(5, 1fr); }
    [grid][columns-md="6"] { grid-template-columns: repeat(6, 1fr); }
    [grid][columns-md="7"] { grid-template-columns: repeat(7, 1fr); }
    [grid][columns-md="8"] { grid-template-columns: repeat(8, 1fr); }

    [hidden-md] { display: none; }
}

@media screen and (max-width: 767px) {
    :root {
        --responsive-mode: "sm";
        --container-width: var(--container-width-sm, 90vw);
        --container-gutter: var(--container-gutter-sm, 5vw);
        --gutter-width: 10px;
    }

    [grid][columns-sm="1"] { grid-template-columns: 1fr; }
    [grid][columns-sm="2"] { grid-template-columns: repeat(2, 1fr); }
    [grid][columns-sm="3"] { grid-template-columns: repeat(3, 1fr); }
    [grid][columns-sm="4"] { grid-template-columns: repeat(4, 1fr); }

    [hidden-sm] { display: none; }
}