.cpn.v1 {
    --opacity: .2;
    --cpn-v1-lgo-ovlp: 5.5rem;

    --cpn-bdr-w: 3px;
    --cpn-bdr-s: dashed;
    --flr-mrg-tp: 2.7rem;
    --flr-mrg-bt: 2.7rem;

    --cpn-lg-mx-wd: 154;
    --cpn-lg-mx-wd-mbl: 170;
    --cpn-lg-mx-wd-clc: calc((var(--cpn-lg-mx-wd-mbl) * 1px) + (var(--cpn-lg-mx-wd) - var(--cpn-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));

    position: relative;
    z-index: 1;

    &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, var(--background) 16.02%, hsl(from var(--background) h s l / 0) 66.06%);
        content:'';
        z-index: -1;
    }

    .bg {
        z-index: -2;
    }

    .grd > li,
    .cpn-itm {
        overflow: visible;
    }

    .grd {
        padding-top: var(--cpn-v1-lgo-ovlp);
        @container (width < 33rem) {
            &.gp_sp {
                gap: calc(var(--grd-sp-dyn) + (var(--cpn-v1-lgo-ovlp) / 3));
            }
        }
    }

    /* Make room above each card for the overlapping logo */

    .lgo {
        z-index: 2;
        position: relative;

        @media screen and (min-width:1280px) {
            & {
                margin-top: calc(var(--cpn-v1-lgo-ovlp) * -1);
            }
        }
    }

    .act {
        justify-content: center;

        @media (width >= 700px) {
         

            & > li + li {
                border-left: 1px solid hsl(from var(--bdr-clr) h s l / 0.3);
                padding-left: var(--grd-sp-dyn);
            }
        }
    }

    .flr_hd > svg {
        font-size: var(--flr-bx-w-clc);
        width: 100%;
    }

    .cpn-div {
        display: flex;
        justify-content: center;

        svg {
            width: 100%;
        }
    }

    @media screen and (max-width: 1280px) {
        li.cpn-cnt + li.cpn-cnt {
            display: none;
        }
    }
}