:root {
    /* Grid System Defaults */
    --responsive-mode: "xl";
    --container-width: 1080px; /* default */
    --container-gutter: calc(calc(100% - var(--container-width)) / 2);
    --container-gutter-left: var(--container-gutter);
    --container-gutter-right: var(--container-gutter);
    --whitespace: 50px;

    --gutter-width: 15px;
    --gutter-default: var(--gutter-width);
    --gutter-1x: calc(var(--gutter-width) * 1);
    --gutter-2x: calc(var(--gutter-width) * 2);
    --gutter-3x: calc(var(--gutter-width) * 3);
    --gutter-4x: calc(var(--gutter-width) * 4);
}

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-container {
    display: block;
    width: var(--container-width);
    margin-left: var(--container-gutter);
    margin-right: var(--container-gutter);
    padding: 0;
}

grid-row {
    display: grid;
    box-sizing: content-box;
    width: 100%;
    max-width: 100%;
    /* grid-template-columns: repeat(var(--max-columns), 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); /* MAGIC */
    grid-template-rows: auto;
    grid-auto-flow: column;
    gap: var(--gutter-default, 15px);
}
grid-row[columns="1"] {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
}
grid-row[columns="2"] {
    grid-template-columns: 1fr 1fr;
}
grid-row[columns="3"] {
    grid-template-columns: 1fr 1fr 1fr;
}
grid-row[columns="4"] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
grid-row[columns="5"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
grid-row[columns="6"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
grid-row[columns="7"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
grid-row[columns="8"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

grid-column {
    width: 100%;
    max-width: 100%;
}

grid-whitespace {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* References */
/* https://web.dev/articles/css-subgrid */

/* xs-container */
@media screen and (max-width: 679px) {
    :root {
        --responsive-mode: "sm";
        --container-width: 92vw;
        --container-gutter: 4vw;
        --gutter-width: 15px;
    }

    :root .hidden-xs {
        display: none;
    }
}

/* md-container */
@media screen and (min-width: 680px) and (max-width: 991px) {
    :root {
        --responsive-mode: "md";
        --container-width: 640px;
        --gutter-width: 10px;
    }
}

/* lg-container */
@media screen and (min-width: 992px) and (max-width: 1519px) {
    :root {
        --responsive-mode: "lg";
        --container-width: 720px;
    }
}

/* xl-container */
@media screen and (min-width: 1520px) {
    :root {
        --responsive-mode: "xl";
        --container-width: 720px;
    }
}