.faq.v8 {
    --opacity: .2;
    --crd-rds: 10px;

    .bg {
        img {
            mix-blend-mode: luminosity;
        }
    }

    .faqs-v8-bg {
        opacity: 0.2;
    }

    .fnt_t-itm {
        --fnt-t-itm-ff: var(--fnt-t);
        --fnt-t-itm-w: 500;
        --fnt-t-itm-s: 1rem;
        --fnt-t-itm-lh: 1.556;
    }

    .fnt_t-nt.cstm {
        --fnt-t-nt-ff: var(--fnt-t);
        --fnt-t-nt-w: 500;
        --fnt-t-nt-s: 0.778rem;
        --fnt-t-nt-lh: 1.429;
    }

    summary svg {
        font-size: 1.11rem;
        transition: transform .3s ease 0s;
    }

    details[open] summary svg {
        transform: rotate(45deg);
    }

    .tab-bar .el-tab {
        padding: 0.611rem 1.389rem;
        border: 1px solid var(--lt-bdr);
        border-radius: 9999px;
        transition: border-color .3s ease, color .3s ease, border-width .3s ease;

        &.active {
            border: 2px solid var(--accent);
            color: var(--accent);
            padding: calc(0.611rem - 1px) calc(1.389rem - 1px);
        }

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

    .faqs-v8-item {
        border: 1px solid var(--lt-bdr);

        > summary.qst {
            padding: 1.222rem 1.333rem;
        }

        .ans {
            padding-inline: 1.333rem;   
        }
    }
}