.stack {
    --stack-direction: row;
    --stack-justify-content: flex-start;
    --stack-align-items: flex-start;
    --stack-wrap: nowrap;

    overflow: hidden;
}
    .stack.stack-scroll {
        overflow-x: auto;
    }

    /* modifiers */
    .stack-wrap { --stack-wrap: wrap; }
    .stack-row { --stack-direction: row; }
    .stack-row.stack-justify-left { --stack-justify-content: flex-start; }
    .stack-row.stack-justify-center { --stack-justify-content: center; }
    .stack-row.stack-justify-right { --stack-justify-content: flex-end; }
    .stack-column { --stack-direction: column; }
    .stack-column.stack-justify-left { --stack-align-items: flex-start; }
    .stack-column.stack-justify-center { --stack-align-items: center; }
    .stack-column.stack-justify-right { --stackalign-items: flex-end; }

    @media screen and (max-width: 400px) { /* sm */
        .stack-row.stack-justify-left-sm { --stack-justify-content: flex-start; }
        .stack-row.stack-justify-center-sm { --stack-justify-content: center; }
        .stack-row.stack-justify-right-sm { --stack-justify-content: flex-end; }
        .stack-column.stack-justify-left-sm { --stack-align-items: flex-start; }
        .stack-column.stack-justify-center-sm { --stack-align-items: center; }
        .stack-column.stack-justify-right-sm { --stackalign-items: flex-end; }
    }
    @media screen and (max-width: 700px) { /* md */
        .stack-row.stack-justify-left-md { --stack-justify-content: flex-start; }
        .stack-row.stack-justify-center-md { --stack-justify-content: center; }
        .stack-row.stack-justify-right-md { --stack-justify-content: flex-end; }
        .stack-column.stack-justify-left-md { --stack-align-items: flex-start; }
        .stack-column.stack-justify-center-md { --stack-align-items: center; }
        .stack-column.stack-justify-right-md { --stackalign-items: flex-end; }
    }

    @media screen and (max-width: 1100px) { /* lg */
        .stack-row.stack-justify-left-lg { --stack-justify-content: flex-start; }
        .stack-row.stack-justify-center-lg { --stack-justify-content: center; }
        .stack-row.stack-justify-right-lg { --stack-justify-content: flex-end; }
        .stack-column.stack-justify-left-lg { --stack-align-items: flex-start; }
        .stack-column.stack-justify-center-lg { --stack-align-items: center; }
        .stack-column.stack-justify-right-lg { --stackalign-items: flex-end; }
    }

    @media screen and (min-width: 1100px) { /* xl */
        .stack-row.stack-justify-left-xl { --stack-justify-content: flex-start; }
        .stack-row.stack-justify-center-xl { --stack-justify-content: center; }
        .stack-row.stack-justify-right-xl { --stack-justify-content: flex-end; }
        .stack-column.stack-justify-left-xl { --stack-align-items: flex-start; }
        .stack-column.stack-justify-center-xl { --stack-align-items: center; }
        .stack-column.stack-justify-right-xl { --stackalign-items: flex-end; }
    }

    .stack-view {
        display: flex;
        flex-direction: var(--stack-direction);
        justify-content: var(--stack-justify-content);
        align-items: var(--stack-align-items);
        flex-wrap: var(--stack-wrap);
    }
        .stack-item {
            line-height: 0;
        }
            .stack-item > * {
                width: 100%;
                line-height: normal;
            }

            .stack-fixed-items .stack-item {
                flex-grow: 0;
                flex-shrink: 0;
            }
            .stack-stretch-items .stack-item {
                flex-grow: 1;
                flex-shrink: 1;
            }
            .stack-shrink-items .stack-item {
                flex-grow: 0;
                flex-shrink: 1;
            }
            .stack-grow-items .stack-item {
                flex-grow: 1;
                flex-shrink: 0;
            }