
.frame-type-ce_introduction {
    & .grid{
        display:grid;
        gap:2rem;

        & img{
            width:100%;
            border-radius:var(--image-border-radius-small);
        }

        & .image-icon{
            max-width:50%;
            margin-top:2rem;
            border-radius:0;
        }

        & .headline-two{
            margin-bottom:0 !important;
        }
    }
}

.frame-type-ce_introduction[class*="frame-bg-"]{
}


@media only screen and (max-width: 768px) {
}

@media only screen and (min-width: 768px) {
    .frame-type-ce_introduction {
        & .grid{
            grid-template-columns:9% 12% 5% 16% 3% 15% 5% 15% 7% 1fr;
            gap:0;
            align-items:flex-end;

            & .image-one{
                grid-column-start:1;
                grid-column-end:5;
                grid-row-start:1;
                grid-row-end:3;
                align-self: flex-start;
            }

            & .headline-one_ce-bodytext{
                grid-column-start:6;
                grid-column-end:11;
                grid-row-start:1;
                grid-row-end:2;
                margin-bottom:2rem;
            }

            & .image-icon{
                grid-column-start:6;
                grid-column-end:9;
                grid-row-start:3;
                grid-row-end:4;
                margin:2rem 0 2rem 0;
                max-width:80%;
            }

            & .headline-two{
                grid-column-start:1;
                grid-column-end:5;
                grid-row-start:3;
                grid-row-end:4;
                margin-bottom:2rem !important;
            }

            & .image-two{
                grid-column-start:1;
                grid-column-end:11;
                grid-row-start:4;
                grid-row-end:5;
            }
        }
    }
}

@media only screen and (min-width: 1024px) {
    .frame-type-ce_introduction {
        & .grid{
            grid-template-columns:9% 12% 5% 16% 3% 15% 5% 15% 5% 1fr;
            gap:0;
            align-items:flex-start;

            & .image-one{
                grid-column-start:1;
                grid-column-end:3;
                grid-row-start:1;
                grid-row-end:3;
            }

            & .headline-one_ce-bodytext{
                grid-column-start:4;
                grid-column-end:9;
                grid-row-start:1;
                grid-row-end:2;
                margin-bottom:4rem;
            }

            & .image-icon{
                grid-column-start:10;
                grid-column-end:11;
                grid-row-start:1;
                grid-row-end:2;
                margin-bottom:4rem;
                max-width:100%;
            }

            & .headline-two{
                grid-column-start:2;
                grid-column-end:6;
                grid-row-start:3;
                grid-row-end:4;
                margin-top:4rem;
            }

            & .image-two{
                grid-column-start:5;
                grid-column-end:11;
                grid-row-start:3;
                grid-row-end:4;
            }
        }
    }
}

@media only screen and (min-width: 1280px) {
    .frame-type-ce_introduction {
        overflow:visible !important;

        & .grid{
            grid-template-columns:9% 12% 5% 16% 3% 15% 5% 15% 7% 1fr;

            & .image-one{
                grid-column-start:1;
                grid-column-end:3;
                grid-row-start:1;
                grid-row-end:3;
            }

            & .headline-one_ce-bodytext{
                grid-column-start:4;
                grid-column-end:7;
                grid-row-start:1;
                grid-row-end:2;
                margin-bottom:4rem;
            }

            & .image-icon{
                grid-column-start:8;
                grid-column-end:9;
                grid-row-start:1;
                grid-row-end:2;
                margin-bottom:4rem;
                max-width:100%;
                transform:translate(0,-50%);
            }

            & .headline-two{
                grid-column-start:2;
                grid-column-end:6;
                grid-row-start:3;
                grid-row-end:4;
                margin-top:4rem;
            }

            & .image-two{
                grid-column-start:5;
                grid-column-end:10;
                grid-row-start:2;
                grid-row-end:4;
            }
        }
    }
}