/* 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 {
    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-default, 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: repeat(auto-fit, minmax(250px,1fr)); /* MAGIC */
    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; }

@media screen and (min-width: 768px) and (max-width: 1279px) {
    [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); }
}

@media screen and (max-width: 767px) {
    [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); }
}

/* 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";
    }
    .hidden-lg { display: none; }
}

/* md-container */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    :root {
        --responsive-mode: "md";
        --container-width: 720px;
    }
    .hidden-md { display: none; }
}

/* sm-container */
@media screen and (max-width: 767px) {
    :root {
        --responsive-mode: "sm";
        --container-width: 90vw;
        --container-gutter: 5vw;
        --gutter-width: 10px;
    }
    .hidden-sm { display: none; }
}