/*
 * FlexColumns — flex row layout (templates/components/FlexColumns.html.twig).
 * BEM: .flex-columns
 * Custom properties: --flex-columns-count (inline), --flex-columns-min, --flex-columns-gap
 */

.flex-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-columns-gap, var(--space-block));
    align-items: stretch;
}

.flex-columns > * {
    flex: 1 1 var(--flex-columns-min, 16rem);
    min-width: 0;
}

.flex-columns[data-columns] > * {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(
        (100% - (var(--flex-columns-count) - 1) * var(--flex-columns-gap, var(--space-block)))
        / var(--flex-columns-count)
    );
    max-width: calc(
        (100% - (var(--flex-columns-count) - 1) * var(--flex-columns-gap, var(--space-block)))
        / var(--flex-columns-count)
    );
}

@media (width < 768px) {
    .flex-columns[data-columns] > * {
        flex-basis: 100%;
        max-width: 100%;
    }
}