.flex-row,
.flex-column {
    --responsive-display: flex;
    --responsive-gap: 5px;
    --responsive-gap-x: 0px;
    --responsive-gap-y: 0px;
    display: flex;
    box-sizing: border-box;
    gap: var(--responsive-gap-y, 0px) var(--responsive-gap-x, 0px);
    width: 100%;
}

.flex-row {
    --flex-columns: var(--standard-columns, var(--columns, var(--responsive-columns, 24)));
    flex-flow: row wrap;
}

.flex-column {
    flex-flow: column nowrap;
    min-height: 0;
}

.flex-row > * {
    --flex-span: var(--standard-span, var(--span, 1));
    --flex-column-width: calc(
        (100% + var(--responsive-gap-x, 0px)) / var(--flex-columns)
    );
    box-sizing: border-box;
    flex: 0 0 calc(
        (var(--flex-column-width) * var(--flex-span))
        - var(--responsive-gap-x, 0px)
    );
    min-width: 0;
    width: calc(
        (var(--flex-column-width) * var(--flex-span))
        - var(--responsive-gap-x, 0px)
    );
}

.flex-column > * {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
}

html[data-size="large-desktop"] .flex-row {
    --flex-columns: var(
        --large-desktop-columns,
        var(--standard-columns, var(--columns, var(--responsive-columns, 24)))
    );
}

html[data-size="large-desktop"] .flex-row > * {
    --flex-span: var(--large-desktop-span, var(--standard-span, var(--span, 1)));
}

html[data-size="small-desktop"] .flex-row {
    --flex-columns: var(--small-desktop-columns, var(--columns, var(--responsive-columns, 24)));
}

html[data-size="small-desktop"] .flex-row > * {
    --flex-span: var(--small-desktop-span, var(--span, 1));
}

html[data-size="tablet"] .flex-row {
    --flex-columns: var(--tablet-columns, var(--columns, var(--responsive-columns, 24)));
}

html[data-size="tablet"] .flex-row > * {
    --flex-span: var(--tablet-span, var(--span, 1));
}

html[data-size="mobile"] .flex-row {
    --flex-columns: var(--mobile-columns, var(--columns, var(--responsive-columns, 24)));
}

html[data-size="mobile"] .flex-row > * {
    --flex-span: var(--mobile-span, var(--span, 1));
}

html[data-size="small-mobile"] .flex-row {
    --flex-columns: var(
        --small-mobile-columns,
        var(--mobile-columns, var(--columns, var(--responsive-columns, 24)))
    );
}

html[data-size="small-mobile"] .flex-row > * {
    --flex-span: var(--small-mobile-span, var(--mobile-span, var(--span, 1)));
}

.flex-auto {
    flex: 0 1 auto;
}

.flex-filler {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}

.flex-none {
    flex: none;
}

.flex-row.flex-auto > *,
.flex-row > .flex-auto {
    flex: 0 1 auto;
    width: auto;
}

.flex-row > .flex-filler,
.flex-column > .flex-filler {
    flex: 1 1 0;
    width: auto;
}

.flex-row > .flex-none,
.flex-column > .flex-none {
    flex: none;
}

.flex-row > .flex-split {
    flex-basis: 100%;
    height: 0;
    width: 100%;
}