.custom-horizontal-cards-grid {
    position: relative;
    width: 100%;
    display: grid;
    gap: min(1em,5vw);
    filter: drop-shadow(2px 4px .4em hsl(from currentColor h s l/.15));
    grid-template-columns: repeat(auto-fill, minmax(max(min(200px, 80vw), calc(100% / var(--col) - 2%)), 1fr));
    & .cardG {
        position: relative;
        display: flex;
        overflow: hidden;
        align-items: center;
        transition: all .3s;
        gap: min(1em,5vw) 5%;
        border-radius: 1em 0;
        padding: min(1em,4vw);
        background-color: var(--cLWhite);
        &:hover {
            translate: 0 -.4em;
            color: var(--cLWhite);
            background-color: var(--cLDarkBlack);
        }
        & picture {
            height: auto;
            aspect-ratio: 1/1;
            border-radius: .5em;
            flex: 1 1 max(min(100px,30vw),25%);
            & img {
                transition: all .3s;
                &:is(.cardG:hover &) {scale: 1.08;}
            }
        }
        & .text {
            row-gap: min(1em,5vw);
            flex: 1 1 max(min(200px,60vw),65%);
            & p:not([class]) {
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }
}