/* Values V3 — 6-Card Grid (Light BG) */
.vls.v3 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0.6%, rgba(255, 255, 255, 0.64) 50.89%, rgba(255, 255, 255, 0.82) 70.29%, rgba(255, 255, 255, 0.93) 86.94%, #FFF 100.39%), #335A9E;
    padding-top: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5) );
    /* Heading (h4 → fnt_t-1): mixed-case Bayon, lh 0.9 (defaults: uppercase, lh 1) */
    --fnt-t-1-tt: none;
    --fnt-t-1-lh: 0.9;

    /* Card title (.fnt_t-3) — Figma 37px Bayon mixed-case lh 0.9 weight 400
       (defaults: 27px Albert Sans 700 uppercase lh 1.5) */
    --fnt-t-3-ff: var(--fnt-t);
    --fnt-t-3-s: 2.06rem;
    --fnt-t-3-w: 400;
    --fnt-t-3-tt: none;
    --fnt-t-3-lh: 0.9;

    /* Card title color: white inside the dark card (default --dk-h3 is light teal) */
    --dk-h3: var(--dk-txt);

    /* Card description line-height — Figma 140% (default 1.8) */
    --fnt-cnt-lh: 1.4;

    /* Card chrome — Figma 10px radius */


    /* Icon → content gap on the inner row flex — Figma 24px */
    .vls-v3-itm .f_gp { --flx-gap: 1.33rem; }

    /* Grid gap — Figma 50px between cards */
    .vls-v3-list { 
        --grd-sp-dyn: 2.78rem; 

        li { 
            svg {
                font-size: 2rem;
                color: var(--accent);
            }

            p {
                font-weight: 500;
            }
        }
    }

    &[data-colors*="-dark"] {
        .bg-bx {
            svg {
                path {
                    fill: var(--text-color);
                }
            }
        }
    }




    @media screen and (min-width: 1280px) {
        /* Card padding override — Figma 40px on roughly half-width card */
        .vls-v3-itm > .pd_v.pd_h { padding: 2.22rem; }

      
            p.vls-v3-sub {
                max-width: var(--mn_ch-w);
                margin-inline: auto;
            }
        
    }
}