.cpn.v3 {

    --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, .fnt_pl {
        color: var(--fnt-t-co);
    }

    .dis {
        opacity: .5;
    }

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


    .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);
            }
        }
    }

    .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);
    }

    .tab-bar {
        background: hsl(from var(--callout) h s l / 0.20);
        border-radius: 1.33rem;
        border: 1px solid var(--bdr-clr);
        padding: 3px;
        gap: .4rem;

        button {
            padding: .44rem 1.33rem;
            border-radius: 1.33rem;
            transition: background-color .3s ease 0s;
            font-weight: 700;
            text-transform: uppercase;
            --fnt-t-nt-ff: var(--fnt-t);

            &.active {
                background-color: var(--white);
            }

            @media (hover: hover) and (pointer: fine) {
                &:is(:hover, :focus-visible) {
                    background-color: var(--white);
                }
            }
        }

        @media screen and (min-width:700px) {
            display: inline-flex;
        }
    }

    @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;
            }

            .inf {
                padding-block: 2.22rem;
                padding-inline: 2.22rem;
            }

            .fourth + .inf {
                &::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;
                }
            }
        }
    }
}