//// @name TYPO3 default content style
///* stylelint-disable */
//@each $pos in (left, right, center) {
//    .ce-align-#{$pos} {
//        text-align: $pos;
//    }
//}
//.ce-table {
//    td,
//    th {
//        vertical-align: top;
//    }
//}
//.ce-textpic,
//.ce-nowrap .ce-bodytext {
//    overflow: inherit;
//    @include clearfix;
//}
//.ce-left .ce-gallery,
//.ce-column {
//    float: none;
//    @include breakpoint(xs) {
//        margin-top: 20px;
//    }
//    @media screen and (min-width: 768px) {
//        float: left;
//    }
//}
//.ce-center {
//    .ce-outer,
//    .ce-inner {
//        float: right;
//        position: relative;
//    }
//    .ce-outer {
//        right: 50%;
//    }
//    .ce-inner {
//        right: -50%;
//        @include breakpoint(xs) {
//            right: 0;
//        }
//    }
//}
//.ce-gallery {
//    overflow: inherit;
//    @include clearfix;
//    figure {
//        display: table;
//        margin: 0;
//        // custom layout styles
//        @include breakpoint(sm) {
//            margin: 0 auto;
//        }
//        // custom layout styles
//        img {
//            display: block;
//            margin: 0;
//        }
//    }
//    .picture {
//        position: relative;
//        display: block;
//        width: 100%;
//        overflow: hidden;
//        background-color: var(--color-grey);
//        background-repeat: no-repeat;
//        background-size: cover;
//    }
//    // custom layout styles
//    figcaption {
//        caption-side: bottom;
//        display: table-caption;
//        font-size: 0.8em;
//        font-style: italic;
//        line-height: 22px;
//        color: currentColor;
//        font-weight: 400;
//        padding-top: 14px;
//        margin: 0;
//        position: relative;
//        z-index: 2;
//    }
//    .copyright {
//        display: block;
//        font-size: 0.8em;
//        line-height: 22px;
//        text-transform: uppercase;
//    }
//    img {
//        display: block;
//        @include breakpoint(sm) {
//            margin-left: auto;
//            margin-right: auto;
//        }
//    }
//    iframe {
//        border-width: 0;
//    }
//    .ce-right & {
//        float: none;
//        @media screen and (min-width: 768px) {
//            float: right;
//        }
//    }
//    .ce-intext.ce-right & {
//        margin-bottom: 20px;
//        margin-left: 0;
//        @media screen and (min-width: 768px) {
//            margin: 10px 0 30px 30px;
//            max-width: 50%;
//        }
//    }
//    .ce-intext.ce-left & {
//        margin-bottom: 20px;
//        margin-right: 0;
//        @media screen and (min-width: 768px) {
//            margin: 10px 30px 30px 0;
//            max-width: 50%;
//        }
//    }
//    .ce-above & {
//        margin-bottom: 20px;
//    }
//    .ce-below & {
//        margin-top: 10px;
//    }
//}
////.ce-border {
////    img,
////    iframe {
////        border: 2px solid $color-black;
////        padding: 0;
////    }
////}
//.ce-gallery[data-ce-columns='2'] {
//    @media screen and (min-width: 768px) {
//        .ce-row {
//            .ce-column {
//                width: 50%;
//                max-width: calc(50% - 20px);
//            }
//        }
//    }
//}
//.ce-column {
//    @media screen and (min-width: 768px) {
//        margin-left: 10px;
//        margin-right: 10px;
//        margin-bottom: 20px;
//    }
//    & + & {
//        @media screen and (min-width: 768px) {
//            margin-left: 10px;
//        }
//    }
//    &:last-child {
//        margin-right: 0;
//    }
//}
//.ce-row {
//    @include clearfix;
//    margin-bottom: 10px;
//    overflow: inherit;
//    &:last-child {
//        margin-bottom: 0;
//    }
//}
//.ce-above .ce-bodytext {
//    clear: both;
//}
//.ce-intext.ce-left {
//    ol,
//    ul {
//        overflow: auto;
//        padding-left: 40px;
//    }
//}
//.ce-uploads {
//    margin: 0;
//    padding: 0;
//    li,
//    div {
//        overflow: inherit;
//        @include clearfix;
//    }
//    li {
//        list-style: none outside none;
//        margin: 1em 0;
//    }
//    img {
//        float: left;
//        padding-right: 1em;
//        vertical-align: top;
//    }
//    span {
//        display: block;
//    }
//}
//.ce-nowrap .ce-bodytext {
//    overflow: hidden !important;
//    h2 {
//        margin-top: 0 !important;
//    }
//}
//// custom layout styles
//.ce-bodytext {
//    margin-top: 20px;
//    margin-bottom: 20px;
//    & > *:first-child {
//        margin-top: 0;
//    }
//    & > *:last-child {
//        margin-bottom: 0;
//    }
//}
//// @name TYPO3 text&media content blocks margin
//.rte {
//    .ce-textpic {
//        img {
//            height: auto;
//            max-width: 100%;
//        }
//    }
//}
//// custom layout styles
//.rte .ce-textpic.ce-center.ce-above,
//.ce-textpic.ce-center.ce-above {
//    .ce-gallery + .ce-bodytext {
//        margin-top: 30px;
//        @include breakpoint(sm) {
//            margin-top: 20px;
//        }
//    }
//}
///* stylelint-enable */

.text-and-media-gallery {
    $this: &;

    &__wrapper {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;

        @include breakpoint(md) {
            row-gap: 2rem;
        }
    }

    &__row {
        display: grid;
        column-gap: 1rem;
        row-gap: 1rem;

        @include breakpoint(md) {
            column-gap: 2rem;
            row-gap: 2rem;
        }
    }

    &__column {
        > * {
            width: 100%;
        }
    }

    &--columns-2 {
        #{$this}__row {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &--columns-3 {
        #{$this}__row {
            grid-template-columns: repeat(1, 1fr);

            @include breakpoint(sm) {
                grid-template-columns: repeat(2, 1fr);
            }

            @include breakpoint(md) {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }

    &--columns-4 {
        #{$this}__row {
            grid-template-columns: repeat(2, 1fr);

            @include breakpoint(md) {
                grid-template-columns: repeat(3, 1fr);
            }

            @include breakpoint(lg) {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    }
}

.text-and-media {
    --rocket-ui-tam-float: none;
    --rocket-ui-tam-margin-top: 0.625rem;
    --rocket-ui-tam-margin-right: 0;
    --rocket-ui-tam-margin-bottom: 1.5rem;
    --rocket-ui-tam-margin-left: 0;
    --rocket-ui-tam-width: 100%;

    $this: &;

    @include clearfix;

    > *:last-child {
        margin-bottom: 0;
    }

    &__gallery {
        float: var(--rocket-ui-tam-float);
        width: var(--rocket-ui-tam-width);
        margin: var(--rocket-ui-tam-margin-top) var(--rocket-ui-tam-margin-right) var(--rocket-ui-tam-margin-bottom) var(--rocket-ui-tam-margin-left);
    }

    &--gallery-left {
        --rocket-ui-tam-float: left;
        --rocket-ui-tam-margin-right: 1rem;
        --rocket-ui-tam-width: calc(50% - 1rem);

        @include breakpoint(sm) {
            --rocket-ui-tam-margin-right: 2rem;
        }
    }

    &--gallery-right {
        --rocket-ui-tam-float: right;
        --rocket-ui-tam-margin-left: 1rem;
        --rocket-ui-tam-width: calc(50% - 1rem);

        @include breakpoint(sm) {
            --rocket-ui-tam-margin-left: 2rem;
        }
    }

    &--gallery-above,
    &--gallery-below {
        --rocket-ui-tam-margin-top: 1.5rem;
        --rocket-ui-tam-margin-bottom: 1.5rem;
    }

    &--gallery-center {
        #{$this} {
            &__gallery {
                @include breakpoint(lg) {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                }
            }
        }
    }

    &--gallery-width-25 {
        #{$this} {
            &__gallery {
                width: 25%;
            }
        }

        figcaption {
            display: none;

            @include breakpoint(xs) {
                display: -webkit-box;
            }
        }
    }

    &--gallery-width-33 {
        #{$this} {
            &__gallery {
                width: 33%;
            }
        }

        figcaption {
            display: none;

            @include breakpoint(xs) {
                display: -webkit-box;
            }
        }
    }

    &__content {
        &:empty {
            display: none;
        }
    }

    &--no-wrap {
        --rocket-ui-tam-margin-top: 0;
        --rocket-ui-tam-margin-right: 0;
        --rocket-ui-tam-margin-left: 0;
        --rocket-ui-tam-width: 100%;

        @include breakpoint(sm) {
            --rocket-ui-tam-width: calc(50% - 1rem);
            --rocket-ui-tam-margin-top: .625rem;
        }

        &#{$this}--gallery-left {
            @include breakpoint(sm) {
                --rocket-ui-tam-margin-right: 2rem;
            }
        }

        &#{$this}--gallery-right {
            @include breakpoint(sm) {
                --rocket-ui-tam-margin-left: 2rem;
            }
        }

        #{$this} {
            &__content {
                @include breakpoint(sm) {
                    overflow: hidden;
                }
            }
        }
    }

    &--text-align-left {
        #{$this}__content {
            text-align: left;
        }
    }

    &--text-align-right {
        #{$this}__content {
            text-align: right;
        }
    }

    &--text-align-center {
        #{$this}__content {
            text-align: center;
        }
    }

    &--text-align-justify {
        #{$this}__content {
            text-align: justify;
        }
    }
}