@layer trappist {
:where(.row, typo3-container-grid-row) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, var(--gutter));
}

:where(.row, typo3-container-grid-row).no-gutters {
    --gap: 0;
}

:where(.row, typo3-container-grid-row).half-gutters {
    --gap: calc(var(--gutter) / 2);
}

:where(.row, typo3-container-grid-row) > * {
    flex: var(--override-flex, 0 1 calc((var(--num) / 12) * (100% - ((12 / var(--num)) - 1) * var(--gap, var(--gutter)))));
    inline-size: var(--override-size, calc((var(--num) / 12) * (100% - ((12 / var(--num)) - 1) * var(--gap, var(--gutter)))));
}

:where(.col, typo3-container-grid-col) {
    --override-size: initial;
    --override-flex: 1;
}

[class*="row-cols-base"] > * {
    flex: revert;
}

:where(.col-1, typo3-container-grid-col[base="1"]) {
    --num: 1;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-2, typo3-container-grid-col[base="2"]) {
    --num: 2;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-3, typo3-container-grid-col[base="3"]) {
    --num: 3;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-4, typo3-container-grid-col[base="4"]) {
    --num: 4;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-5, typo3-container-grid-col[base="5"]) {
    --num: 5;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-6, typo3-container-grid-col[base="6"]) {
    --num: 6;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-7, typo3-container-grid-col[base="7"]) {
    --num: 7;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-8, typo3-container-grid-col[base="8"]) {
    --num: 8;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-9, typo3-container-grid-col[base="9"]) {
    --num: 9;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-10, typo3-container-grid-col[base="10"]) {
    --num: 10;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-11, typo3-container-grid-col[base="11"]) {
    --num: 11;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-12, typo3-container-grid-col[base="12"]) {
    --num: 12;
    --override-size: initial;
    --override-flex: initial;
}

:where(.col-fit, typo3-container-grid-col[base="fit"]) {
    --override-size: auto;
    --override-flex: 0 0 auto;
}

:where(.col-fill, typo3-container-grid-col[base="fill"]) {
    --override-size: initial;
    --override-flex: 1;
}

:where(
        :where(.col-none, typo3-container-grid-col[base="none"]),
        :where(.col-empty, typo3-container-grid-col[base="empty"])
    ) {
    display: none;
}

:where(.col:not(.col-none), typo3-container-grid-col[base]:not([base="none"])) {
    display: revert;
}

@media (min-width: 540px) {
    [class*="row-cols-sm"] > * {
        flex: revert;
    }

    :where(.col-sm-1, typo3-container-grid-col[sm="1"]) {
        --num: 1;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-2, typo3-container-grid-col[sm="2"]) {
        --num: 2;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-3, typo3-container-grid-col[sm="3"]) {
        --num: 3;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-4, typo3-container-grid-col[sm="4"]) {
        --num: 4;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-5, typo3-container-grid-col[sm="5"]) {
        --num: 5;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-6, typo3-container-grid-col[sm="6"]) {
        --num: 6;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-7, typo3-container-grid-col[sm="7"]) {
        --num: 7;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-8, typo3-container-grid-col[sm="8"]) {
        --num: 8;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-9, typo3-container-grid-col[sm="9"]) {
        --num: 9;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-10, typo3-container-grid-col[sm="10"]) {
        --num: 10;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-11, typo3-container-grid-col[sm="11"]) {
        --num: 11;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-12, typo3-container-grid-col[sm="12"]) {
        --num: 12;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-sm-fit, typo3-container-grid-col[sm="fit"]) {
        --override-size: auto;
        --override-flex: 0 0 auto;
    }

    :where(.col-sm-fill, typo3-container-grid-col[sm="fill"]) {
        --override-size: initial;
        --override-flex: 1;
    }

    :where(
            :where(.col-sm-none, typo3-container-grid-col[sm="none"]),
            :where(.col-sm-empty, typo3-container-grid-col[sm="empty"])
        ) {
        display: none;
    }

    :where(
            .col-sm-:not(.col-sm-none),
            typo3-container-grid-col[sm]:not([sm="none"])
        ) {
        display: revert;
    }
}

@media (min-width: 744px) {
    [class*="row-cols-md"] > * {
        flex: revert;
    }

    :where(.col-md-1, typo3-container-grid-col[md="1"]) {
        --num: 1;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-2, typo3-container-grid-col[md="2"]) {
        --num: 2;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-3, typo3-container-grid-col[md="3"]) {
        --num: 3;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-4, typo3-container-grid-col[md="4"]) {
        --num: 4;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-5, typo3-container-grid-col[md="5"]) {
        --num: 5;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-6, typo3-container-grid-col[md="6"]) {
        --num: 6;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-7, typo3-container-grid-col[md="7"]) {
        --num: 7;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-8, typo3-container-grid-col[md="8"]) {
        --num: 8;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-9, typo3-container-grid-col[md="9"]) {
        --num: 9;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-10, typo3-container-grid-col[md="10"]) {
        --num: 10;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-11, typo3-container-grid-col[md="11"]) {
        --num: 11;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-12, typo3-container-grid-col[md="12"]) {
        --num: 12;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-md-fit, typo3-container-grid-col[md="fit"]) {
        --override-size: auto;
        --override-flex: 0 0 auto;
    }

    :where(.col-md-fill, typo3-container-grid-col[md="fill"]) {
        --override-size: initial;
        --override-flex: 1;
    }

    :where(
            :where(.col-md-none, typo3-container-grid-col[md="none"]),
            :where(.col-md-empty, typo3-container-grid-col[md="empty"])
        ) {
        display: none;
    }

    :where(
            .col-md-:not(.col-md-none),
            typo3-container-grid-col[md]:not([md="none"])
        ) {
        display: revert;
    }
}

@media (min-width: 960px) {
    [class*="row-cols-lg"] > * {
        flex: revert;
    }

    :where(.col-lg-1, typo3-container-grid-col[lg="1"]) {
        --num: 1;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-2, typo3-container-grid-col[lg="2"]) {
        --num: 2;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-3, typo3-container-grid-col[lg="3"]) {
        --num: 3;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-4, typo3-container-grid-col[lg="4"]) {
        --num: 4;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-5, typo3-container-grid-col[lg="5"]) {
        --num: 5;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-6, typo3-container-grid-col[lg="6"]) {
        --num: 6;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-7, typo3-container-grid-col[lg="7"]) {
        --num: 7;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-8, typo3-container-grid-col[lg="8"]) {
        --num: 8;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-9, typo3-container-grid-col[lg="9"]) {
        --num: 9;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-10, typo3-container-grid-col[lg="10"]) {
        --num: 10;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-11, typo3-container-grid-col[lg="11"]) {
        --num: 11;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-12, typo3-container-grid-col[lg="12"]) {
        --num: 12;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-lg-fit, typo3-container-grid-col[lg="fit"]) {
        --override-size: auto;
        --override-flex: 0 0 auto;
    }

    :where(.col-lg-fill, typo3-container-grid-col[lg="fill"]) {
        --override-size: initial;
        --override-flex: 1;
    }

    :where(
            :where(.col-lg-none, typo3-container-grid-col[lg="none"]),
            :where(.col-lg-empty, typo3-container-grid-col[lg="empty"])
        ) {
        display: none;
    }

    :where(
            .col-lg-:not(.col-lg-none),
            typo3-container-grid-col[lg]:not([lg="none"])
        ) {
        display: revert;
    }
}

@media (min-width: 1260px) {
    [class*="row-cols-xl"] > * {
        flex: revert;
    }

    :where(.col-xl-1, typo3-container-grid-col[xl="1"]) {
        --num: 1;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-2, typo3-container-grid-col[xl="2"]) {
        --num: 2;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-3, typo3-container-grid-col[xl="3"]) {
        --num: 3;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-4, typo3-container-grid-col[xl="4"]) {
        --num: 4;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-5, typo3-container-grid-col[xl="5"]) {
        --num: 5;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-6, typo3-container-grid-col[xl="6"]) {
        --num: 6;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-7, typo3-container-grid-col[xl="7"]) {
        --num: 7;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-8, typo3-container-grid-col[xl="8"]) {
        --num: 8;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-9, typo3-container-grid-col[xl="9"]) {
        --num: 9;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-10, typo3-container-grid-col[xl="10"]) {
        --num: 10;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-11, typo3-container-grid-col[xl="11"]) {
        --num: 11;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-12, typo3-container-grid-col[xl="12"]) {
        --num: 12;
        --override-size: initial;
        --override-flex: initial;
    }

    :where(.col-xl-fit, typo3-container-grid-col[xl="fit"]) {
        --override-size: auto;
        --override-flex: 0 0 auto;
    }

    :where(.col-xl-fill, typo3-container-grid-col[xl="fill"]) {
        --override-size: initial;
        --override-flex: 1;
    }

    :where(
            :where(.col-xl-none, typo3-container-grid-col[xl="none"]),
            :where(.col-xl-empty, typo3-container-grid-col[xl="empty"])
        ) {
        display: none;
    }

    :where(
            .col-xl-:not(.col-xl-none),
            typo3-container-grid-col[xl]:not([xl="none"])
        ) {
        display: revert;
    }
}
.row-cols-1 > * {
    --num: 12;
    --override-size: initial;
    --override-flex: initial;
    display: revert;
}

.row-cols-2 > * {
    --num: 6;
    --override-size: initial;
    --override-flex: initial;
    display: revert;
}

.row-cols-3 > * {
    --num: 4;
    --override-size: initial;
    --override-flex: initial;
    display: revert;
}

.row-cols-4 > * {
    --num: 3;
    --override-size: initial;
    --override-flex: initial;
    display: revert;
}

@media (min-width: 540px) {
    .row-cols-sm-1 > * {
        --num: 12;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-sm-2 > * {
        --num: 6;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-sm-3 > * {
        --num: 4;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-sm-4 > * {
        --num: 3;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }
}

@media (min-width: 744px) {
    .row-cols-md-1 > * {
        --num: 12;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-md-2 > * {
        --num: 6;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-md-3 > * {
        --num: 4;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-md-4 > * {
        --num: 3;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }
}

@media (min-width: 960px) {
    .row-cols-lg-1 > * {
        --num: 12;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-lg-2 > * {
        --num: 6;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-lg-3 > * {
        --num: 4;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-lg-4 > * {
        --num: 3;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }
}

@media (min-width: 1260px) {
    .row-cols-xl-1 > * {
        --num: 12;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-xl-2 > * {
        --num: 6;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-xl-3 > * {
        --num: 4;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }

    .row-cols-xl-4 > * {
        --num: 3;
        --override-size: initial;
        --override-flex: initial;
        display: revert;
    }
}

}