.sc7 {
    & [class^="container"] { 
        & .row {
            & .text-center[class^="text"] {
                text-align: initial;
                align-items: initial;
                @media screen and (width >= 1200px) {
                    & {
                        margin-inline:auto;
                        text-align: center;
                        align-items: center;
                    }
                }
            }
            & .flex {
                gap: 0.7em 10%;
                & .left {
                    flex: 1 1 max(min(400px,80vw),65%);
                }
            }
            & .grid {
                display: grid;
                gap: min(2em,5vw) 3%;
                grid-template-columns: repeat(auto-fill, minmax(max(min(200px, 80vw), 30%), 1fr));
                & .cardD {
                    position: relative;
                    display: flex;
                    flex-wrap: wrap;
                    gap: min(1em,4vw) 5%;
                    & picture {
                        border-radius: .4em;
                        height: min(400px,55vw);
                        flex: 1 1 max(min(200px,80vw),30%);
                        & img {
                            transition: all .3s;
                            &:is(.cardD:hover &) {
                                scale: 1.05;
                                filter: brightness(.8);
                            }
                        }
                        &::after {
                            position: absolute;
                            inset: 0;
                            content: '';
                            background: linear-gradient(0deg, hsl(from var(--cLDarkBlue) h s l/.5) 7.7%, transparent 52%);
                        }
                        @media screen and (width >= 1200px) {
                            & {
                                width: 100%;
                                height: auto;
                                aspect-ratio: 1/0.85;
                                &:is(.cardD:nth-child(1) &) {
                                    aspect-ratio: 1/.75;
                                }
                            }
                        }
                    }
                    & .text {
                        row-gap: .7em;
                        flex: 1 1 max(min(200px,80vw),50%);
                        & p:has([style^="--icn-"]) {margin-top: auto;}
                        @media screen and (width >= 1200px) {
                            &:is(.cardD:nth-child(1) &) {
                                position: absolute;
                                inset: 0;
                                justify-content: flex-end;
                                color: var(--cLWhite);
                                padding: clamp(min(1em,5vw),1.46vw,2em);
                                & p:has([style^="--icn-"]) {margin-top: 0;}
                            }
                        }
                    }
                    @media screen and (width >= 1200px) {
                        &:nth-child(1) { grid-area: 1 / 1 / 26 / 25; }
                        &:nth-child(2) { grid-area: 1 / 26 / 13 / 51; }
                        &:nth-child(3) { grid-area: 14 / 26 / 26 / 51; }
                    }
                }
                @media screen and (width >= 1200px) {
                    & {
                        gap: 0;
                        grid-template-columns: repeat(50, 1fr);
                        /* grid-template-rows: repeat(25, 1fr); */

                    }
                }
            }
        }
    }
}