.cpn.v4 {
    --fnt-t-3-w: 400;
    --opacity: .2;

    --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, var(--background) 16.02%, hsl(from var(--background) h s l / 0) 66.06%);
        content:'';
        z-index: -1;
    }

    .bg {
        z-index: -2;
    }

    .prc {
        color: var(--fnt-t-co);
    }


    /* Disclaimer is 14px Ubuntu 400 at half opacity */
    .dis.cstm {
        --fnt-t-nt-s: 0.778rem;
        opacity: 0.5;
    }

    .pattern-bg {
        border-top-left-radius: var(--bdr-rds-crd);
        border-top-right-radius: var(--bdr-rds-crd);
        overflow: hidden;
    }

     .tag {
        position: absolute;
        top: 1.33rem;
        right: 1.33rem;
        background: hsl(from var(--text-color) h s l / 0.20);
        border: 1px solid var(--bdr-clr);
    }

    .act {
        justify-content: center;

        @media (width >= 700px) {
            justify-content: unset;

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

     @media screen and (min-width:1280px) {
        li {
            .fourth {
                width: 11.38rem;
                padding-inline: 1rem;
                padding-block: 2.22rem;
                border-top-left-radius: var(--bdr-rds-crd);
                border-bottom-left-radius: var(--bdr-rds-crd);
                border-top-right-radius: 0;
            }

            .fourth + .inf {
                padding-block: 2.22rem;
                padding-inline: 2.22rem;

                &::before, &::after {
                    position: absolute;
                    width: 1.33rem;
                    height: 1.33rem;
                    border-radius: 50%;
                    left: calc((1.33rem / 2) * -1);
                    content: '';
                    z-index: 2;
                    background-color: var(--inner-theme);
                }

                &::before {
                    top: 2.78rem;
                }

                &::after {
                    bottom: 2.78rem;
                }
            }
        }
    }
}