.flex {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--flex-gap, 0px);
    row-gap: 2rem;
}

/* for filter view */
.dynamic-image-load__delayed-content .flex:not(:last-child):has(> div) {
    margin-bottom: 2rem;
}

.flex > * {
    word-break: break-word;
}

.flex__entry {
    container-type: inline-size;
}

.flex:not(:has(> .flex__entry[size="auto"])) .flex__entry {
    flex-grow: 1;
}

.flex-card {
    min-width: 100%;
    width: 100%;
    height: 100%;
    display: grid;
    min-height: 35px;
}

:where(.flex--stack-variant) .flex-card {
    background-color: var(--card-background-color);
    outline: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3rem;
}

.flex--stack-variant .flex-card {
    --text-color: var(--card-text-color);
    --headline-color-h1: var(--card-headline-color);
    --headline-color-h2: var(--card-headline-color);
    --headline-color-h3: var(--card-headline-color);
    --headline-color-h4: var(--card-headline-color);
    --headline-color-h5: var(--card-headline-color);
    --headline-color-h6: var(--card-headline-color);
    --icon-color: var(--card-icon-color);
    color: var(--text-color);
}

@media screen and (min-width: 768px) {
    .flex--stack-variant {
        --_vertical-offset: 4rem;
        column-gap: 0;
        flex-wrap: nowrap;
        margin-bottom: var(--_vertical-offset);
    }

    :where(.flex--stack-variant) .flex__entry:nth-child(2n) {
        translate: 0 var(--_vertical-offset);
    }

    :where(.flex--stack-variant) .flex__entry:nth-child(n+2) {
        margin-left: -6%;
    }

    :where(.flex--stack-variant .flex__entry:nth-child(2n+1):not(:last-child)) .flex-card {
        padding-right: 5rem;
    }

    :where(.flex--stack-variant .flex__entry:nth-child(2n+3)) .flex-card {
        padding-left: 5rem;
    }
}

/* sizes */
.flex-card__filter-item {
    container-type: inline-size;
}

.flex__entry[size="auto"] {
    flex: 1 1;
}

.flex__entry:not([size="auto"]) {
    flex-basis: 100%;
}

.flex__entry:has(> .flex-card > .content-card--align-center) {
    align-self: center;
}

.flex__entry:has(> .flex-card > .content-card--align-bottom) {
    align-self: end;
}

@media screen and (min-width: 768px) {
    .flex__entry:not([size="auto"], [size="1-1"]),
    .flex__entry[size="auto"]:has(.medium-tile),
    .flex__entry[size="auto"]:has(.mini-tile) {
        flex-basis: calc(50% - var(--flex-gap, 0px));
    }
}

@media screen and (min-width: 992px) {
    .flex__entry[size='1-3'],
    .flex__entry[size='1-4'],
    .flex__entry[size='1-5'],
    .flex__entry[size='2-5'],
    .flex__entry[size='1-6'],
    .flex__entry[size="auto"]:has(.medium-tile),
    .flex__entry[size="auto"]:has(.mini-tile) {
        flex-basis: calc((100% / 3) - var(--flex-gap, 0px));
    }

    .flex__entry[size='2-3'],
    .flex__entry[size='3-5'],
    .flex__entry[size='4-5'],
    .flex__entry[size='5-6'] {
        flex-basis: calc(100% * (2 / 3) - var(--flex-gap, 0px));
    }
}

@media screen and (min-width: 1200px) {
    .flex__entry[size='1-4'],
    .flex__entry[size="auto"]:has(.mini-tile) {
        flex-basis: calc(25% - var(--flex-gap, 0px));
    }

    .flex__entry[size='3-4'] {
        flex-basis: calc(75% - var(--flex-gap, 0px));
    }

    .flex__entry[size='1-5'] {
        flex-basis: calc(20% - var(--flex-gap, 0px));
    }

    .flex__entry[size='2-5'] {
        flex-basis: calc(40% - var(--flex-gap, 0px));
    }

    .flex__entry[size='3-5'] {
        flex-basis: calc(60% - var(--flex-gap, 0px));
    }

    .flex__entry[size='4-5'] {
        flex-basis: calc(80% - var(--flex-gap, 0px));
    }

    .flex__entry[size='1-6'] {
        flex-basis: calc((100% / 6) - var(--flex-gap, 0px));
    }

    .flex__entry[size='5-6'] {
        flex-basis: calc((100% * (5 / 6)) - var(--flex-gap, 0px));
    }
}