.sc5 {
    & [class^="container"] { 
        & .text-center[class^="text"] {
            text-align: initial;
            align-items: initial;
            @media screen and (width >= 1200px) {
                & {
                    margin-inline:auto;
                    text-align: center;
                    align-items: center;
                }
            }
        }
        & .wp-grid {
            display: grid;
            row-gap: clamp(min(2em,5vw),2.344vw,2.5em);
            & > .intro {
                @media screen and (width >= 1200px) {
                    & {
                        grid-area: 1 / 1 / 20 / 12;
                        & .text {
                            aspect-ratio: 1/1;
                            justify-content: center;
                        }
                    }
                }
            }
            & .grid {
                position: relative;
                width: auto;
                display: flex;
                flex-wrap: nowrap;
                column-gap: 1.3em;
                overflow-y: hidden;
                overflow-x: scroll;
                scrollbar-width: none;
                -ms-overflow-style: none;
                scroll-snap-type: x mandatory;
                scrollbar-color: transparent transparent;
                padding-inline: calc((100vw - var(--ct-xl)) / 2);
                margin-inline: calc((100vw - var(--ct-xl)) / -2);
                & .cardB {
                    position: relative;
                    display: grid;
                    row-gap: .8em;
                    flex: 0 0 auto;
                    scroll-snap-align: center;
                    width: min(330px,min(100%,70vw));
                    background-color: var(--cLWhite);
                    & picture {
                        position: relative;
                        height: auto;
                        overflow: hidden;
                        aspect-ratio: 1/1.2;
                        border-radius: 1em 0;
                        &::after {
                            position: absolute;
                            inset: 0;
                            content: '';
                            mix-blend-mode: multiply;
                            background-color: hsl(from var(--cLDarkGray) h s l/.5);
                        }
                        & img {
                            transition: all .3s;
                            &:is(.cardB:hover &) {scale: 1.05}
                        }
                        & .ct-text {
                            position: absolute;
                            inset: 0;
                            z-index: 1;
                            display: grid;
                            align-content: flex-end;
                            & .text {
                                width: 90%;
                                color: var(--cLWhite);
                                row-gap: min(.5em,5vw);
                                justify-content: flex-end;
                                border-radius: 0 .5em 0 0;
                                background-color: var(--cLDarkBlack);
                                padding: clamp(min(1em,5vw),1.46vw,2em);
                                @media screen and (width >= 1200px) {
                                    & {
                                        display: grid;
                                        grid-template-rows: 1.6em 1fr;
                                        transition: all .3s, padding 0s;
                                        &:not(.cardB:hover &) {
                                            padding: 0;
                                            grid-template-rows: 3.3em 0fr;
                                            background-color: transparent;
                                        }
                                        & .title {
                                            height: max-content;
                                            display: inline-block;
                                            transition: all .3s, padding 0s;
                                            &:not(.cardB:hover &) {
                                                border-radius: 0 .5em 0 0;
                                                background-color: var(--cLDarkBlack);
                                                padding: clamp(min(0.6em,3vw),0.9vw,1em) clamp(min(1em,5vw),1.46vw,2em);
                                            }
                                        }
                                        & p {
                                            display: block;
                                            overflow: hidden;
                                            transition: all .3s, padding 0s;
                                            &:not(.cardB:hover &) {
                                                padding-inline: clamp(min(1em,5vw),1.46vw,2em);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    & .see-more {
                        font-size: var(--fs16);
                        &::after {transition: all .3s;}
                        &:is(.cardB:hover &) {
                            color: var(--cLPrimaryBlue);
                            &::after {translate: .5em 0;}
                        }
                    }
                    @media screen and (width >= 1200px) {
                        & {
                            gap: 0;
                            width: auto;
                            display: grid;
                            margin-inline: 0;
                            padding-inline: 0;
                            overflow-y: initial;
                            overflow-x: initial;
                            scroll-snap-type: initial;
                            &:nth-child(1) {grid-area: 1 / 16 / 27 / 30;}
                            &:nth-child(2) {grid-area: 5 / 31 / 31 / 45;}
                            &:nth-child(3) {grid-area: 16 / 46 / 42 / 61;}
                            &:nth-child(4) {grid-area: 24 / 1 / 50 / 15;}
                            &:nth-child(5) {grid-area: 31 / 16 / 57 / 30;}
                            &:nth-child(6) {grid-area: 35 / 31 / 61 / 45;}
                        }
                    }
                }
                @media screen and (width >= 1200px) {
                    & {
                        margin: 0;
                        padding: 0;
                        display: grid;
                        overflow: inherit;
                        grid-area: 1 / 1 / 51 / 51;
                        grid-template-columns: repeat(50, 1fr);
                   }

                }
            }
            @media screen and (width >= 1200px) {
                & {
                    gap: 0;
                    grid-template-columns: repeat(50, 1fr);
                }
            }
        }
    }
}