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

    --cpn-bdr-w: 3px;
    --cpn-bdr-s: dashed;
    position: relative;
    z-index: 1;

    &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #FFF 16.02%, rgba(255, 255, 255, 0.00) 66.06%);
        content:'';
        z-index: -1;
    }

    .bg {
        z-index: -2;
    }

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

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

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

    .lgo {
        margin-top: calc(var(--cpn-s1-lgo-ovlp) * -1);
        z-index: 2;
        position: relative;
    }

    .act {
        justify-content: center;

        @media (width >= 700px) {
         

            & > li + li {
                border-left: 1px solid hsl(from white 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%;
        }
    }
}