.texts-and-images {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    position: relative;
    .container {
        display: flex;
        flex-direction: column;
        gap: var(--font-margin-p);
        .texts-and-images__block {
            text-align: center;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: max-content;
            row-gap: var(--font-margin-p);
            .texts-and-images__text {
                ul {
                    padding-left: 0;
                    li {
                        position: relative;
                        list-style: none;
                        padding-left: 25px;
                        display: flex;
                        line-height: var(--line-height-p);
                        &::before {
                            content: '';
                            position: absolute;
                            top: 6px;
                            left: 0px;
                            display: block;
                            height: 15px;
                            width: 15px;
                            mask-image: url('data:image/svg+xml,<svg width="2.5631mm" height="2.3027mm" version="1.1" viewBox="0 0 2.5631 2.3027" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-76.17 -17.56)"><path d="m76.616 18.589q0.08062 0 0.12196 0.13229 0.08268 0.24805 0.11782 0.24805 0.02687 0 0.05581-0.04134 0.58084-0.85369 1.0749-1.2154 0.20877-0.15296 0.40721-0.15296 0.26252 0 0.31626 0.01654 0.02274 0.0062 0.02274 0.05168 0 0.03721-0.04754 0.09302-1.3291 1.5255-1.5834 1.9844-0.08682 0.1571-0.40101 0.1571-0.10335 0-0.21704-0.05374-0.04754-0.0248-0.16536-0.31626-0.14883-0.36794-0.14883-0.64492 0-0.10128 0.14469-0.16743 0.19844-0.09095 0.29766-0.09095z" fill="%23244c5a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3229" aria-label="✔"/></g></svg>');
                            mask-repeat: no-repeat;
                            mask-size: contain;
                            background-color: var(--main-color);
                        }
                    }
                }
            }
            .texts-and-images__imagewrapper {
                height: 100%;
                figure {
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }
}

.texts-and-images.layout-2 {
    background-color: var(--light-gray);
    background-image: url(/theme/public/assets/frontend/img/transparenter-hintergrund.webp);
    background-size: cover;
    .container {
        .texts-and-images__block {
            text-align: initial;
            .texts-and-images__imagewrapper {
                figure {
                    display: block;
                    position: relative;
                    height: 100%;
                    picture {
                        position: relative;
                        z-index: 1;
                        height: 100%;
                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                    }
                    &::after {
                        content: '';
                        background-color: var(--main-color);
                        width: 35%;
                        height: 50%;
                        position: absolute;
                        z-index: 0;
                    }
                }
            }
        }
        .texts-and-images__block:nth-child(odd) {
            
            .texts-and-images__imagewrapper {
                figure {
                    padding-right: var(--picture-padding);
                    padding-bottom: var(--picture-padding);
                    &::after {
                        right: 0px;
                        bottom: 0px;
                    }
                }
            }
        }

        .texts-and-images__block:nth-child(even) {
            
            .texts-and-images__imagewrapper {
                figure {
                    padding-left: var(--picture-padding);
                    padding-bottom: var(--picture-padding);
                    &::after {
                        left: 0px;
                        bottom: 0px;
                    }
                }
            }
        }
    }
}

.texts-and-images.layout-3 {
    .container {
        .texts-and-images__block {
            text-align: initial;

            .texts-and-images__text {
                grid-row: 2;
            }
            .texts-and-images__imagewrapper {
                grid-row: 1;
            }
            .texts-and-images__imagewrapper {
                figure {
                    display: block;
                    position: relative;
                    height: 100%;
                    padding: 0 0 var(--picture-padding) var(--picture-padding);
                    picture {
                        position: relative;
                        z-index: 1;
                        height: 100%;
                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                    }
                    &::after {
                        content: '';
                        background-color: var(--main-color);
                        width: 35%;
                        height: 50%;
                        position: absolute;
                        bottom: 0px;
                        left: 0px;
                        z-index: 0;
                    }
                }
            }
        }
    }
}

@media (min-width: 768px) {
    .texts-and-images.layout-1 {
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            .texts-and-images__block {
                .texts-and-images__text {
                    grid-row: 2;
                }
                .texts-and-images__imagewrapper {
                    grid-row: 1;
                }
            }
        }
    }
}

@media (min-width: 1024px) {
    .texts-and-images.layout-1 {
        .container {
            column-gap: calc(var(--gutter) * 2);
            max-width: 1280px;
            .texts-and-images__block {
                grid-template-columns: 20% auto;
                column-gap: calc(var(--gutter) / 2);
                .texts-and-images__text {
                    text-align: initial;
                    grid-column: 2;
                    grid-row: 1;
                }
                .texts-and-images__image {
                    grid-column: 1;
                    grid-row: 1;
                    figure.svg {
                        justify-self: center;
                    }
                }
            }
        }
    }

    .texts-and-images.layout-2 {
        .container {
            row-gap: var(--margin-medium);
            .texts-and-images__block {
                .texts-and-images__text {
                    align-self: center;
                    margin-bottom: var(--picture-padding);
                }
            }
            .texts-and-images__block:nth-child(odd) {
                display: grid;
                grid-template-columns: 35fr 65fr;
                column-gap: var(--gutter);
            }
            .texts-and-images__block:nth-child(even) {
                display: grid;
                grid-template-columns: 65fr 35fr;
                column-gap: var(--gutter);
                .texts-and-images__text {

                    grid-column: 2;
                    grid-row: 1;
                }
                .texts-and-images__image {
                    grid-column: 1;
                    grid-row: 1;
                }
            }
        }
    }

    .texts-and-images.layout-3 {
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: var(--gutter);
        }
    }
}