.frame-type-ce_textmediagrid{
    & .grid-list{
        display: grid;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0;

        & .grid-item{
            border:3px solid var(--color-secondary);
            padding: 1.75rem 1.75rem 3rem 1.75rem;
            border-radius:30px;
            list-style-type:none;
            transition:all .2s linear 0s;

            &.cursor-pointer:hover{
                border-color:var(--color-primary);

                & img{
                    transform:scale(1.2);
                }
            }
        }


        & .grid-item-header{
            margin-top:1rem;
            margin-bottom:2.5rem;
        }

        & .grid-item-icon{
        }

        & .grid-item-body{
            margin-top:1rem;
        }

        & img{
            float:right;
            margin-left:20px;
            max-width:60px;
            transition:all 200ms ease-in-out;
        }

        & a{
            text-decoration:none;
        }
    }
}

[class*="frame-bg-darkblue"].frame-type-ce_textmediagrid{
    & .grid-list{
        & .grid-item{
            &.cursor-pointer:hover{
                border-color:var(--color-text-invert);
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    .frame-type-ce_textmediagrid{
        .font-size-medium{
            font-size:24px;
        }
    }
}

@media only screen and (max-width: 600px) {
    .frame-type-ce_textmediagrid{
        & header{
            & a{
                margin:.5rem 0 0 0;
            }
        }
    }
}

@media only screen and (min-width:600px) {
    .frame-type-ce_textmediagrid{
        & header{
            display:flex;
            justify-content:space-between;
            align-items:flex-end;
            margin-bottom:1rem !important;

            & a{
                height: auto;
                align-self: flex-end;
                margin:0 0 .5rem 0;
            }
        }
    }
}

@media only screen and (min-width: 768px) {
    .frame-type-ce_textmediagrid{
        & .grid-list{
            display: grid;
            grid-template-columns:1fr 1fr;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    }
}

@media only screen and (min-width: 1024px) {
    .frame-type-ce_textmediagrid{
        & header{
            & a{
                margin:0 0 .5rem 0;
            }
        }

        & .grid-list{
            & img{
                max-width:100px;
            }
        }
    }
}

@media only screen and (min-width: 1280px) {
    .frame-type-ce_textmediagrid {
        & .grid-list {
            grid-template-columns: repeat(20, 1fr);

            /* Item 1 – ~35% links, überspannt 2 Reihen */
            & .grid-item:nth-child(1) {
                grid-column: 1 / 9;
                grid-row: 1 / 3;

                & .grid-item-header {
                    margin-top: 4rem;
                }
            }

            /* Item 2 – ~35% links, 3. Reihe */
            & .grid-item:nth-child(2) {
                grid-column: 1 / 9;
                grid-row: 3 / 4;
            }

            /* Item 3 – restliche ~65% rechts oben */
            & .grid-item:nth-child(3) {
                grid-column: 9 / 21;
                grid-row: 1 / 2;

                & .grid-item-header {
                    margin-top: 4rem;
                }
            }

            /* Item 4 – rechts mitte-links */
            & .grid-item:nth-child(4) {
                grid-column: 9 / 15;
                grid-row: 2 / 4;
            }

            /* Item 5 – rechts mitte-rechts */
            & .grid-item:nth-child(5) {
                grid-column: 15 / 21;
                grid-row: 2 / 4;
            }

            /* Ab Element 6, jedes 3. = erstes im Paket */
            .grid-item:nth-child(3n + 6) {
                grid-column: 1 / 7;
            }

            /* Ab Element 7, jedes 3. = zweites im Paket */
            .grid-item:nth-child(3n + 7) {
                grid-column: 7 / 13;
            }

            /* Ab Element 8, jedes 3. = drittes im Paket */
            .grid-item:nth-child(3n + 8) {
                grid-column: 13 / 21;
            }
        }
    }
}