.faq.v3 {
    --faq-v3-hx-s: 268;
    --faq-v3-hx-s-mbl:  16;
    --faq-v3-hx-s-clc: calc((var(--faq-v3-hx-s-mbl) * 1px) + (var(--faq-v3-hx-s) - var(--faq-v3-hx-s-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));

    summary svg {
        font-size: 1.222rem;
        transition: rotate 0.3s ease;
        rotate: 90deg;

        > path:first-child {
            fill: var(--buttons) !important;
            opacity: 1;
        }
    }

    details[open] summary svg {
        rotate: 270deg;
    }

    .ans > * {
        overflow: hidden;
    }

    .faqs-v3-banner {
        display: grid;
        gap: 1.5rem;
        align-items: center;
        border-radius: var(--bdr-rds);

        @media screen and (min-width: 1280px) {
            grid-template-columns: auto 1fr;

            &.pd_h-30 {
                padding-inline: 2.22rem;
                
            }

            &.pd_v-30 {
                padding-block: 1.78rem;
            }
        }

    }

    @media screen and (min-width:1280px) {
        li {
            .pd_h-30 {
                padding-inline: 2.22rem;
                
            }

            .pd_v-30 {
                padding-block: 1.78rem;
            }
        }
    }

    .hex-dcr {
        position: absolute;
        z-index: 0;
        pointer-events: none;
        width: var(--faq-v3-hx-s-clc);
        height: var(--faq-v3-hx-s-clc);

        svg {
            font-size: var(--faq-v3-hx-s-clc);
        }
        

        &.tp {
            top: var(--pd-v);
            left: calc(-1 * (var(--faq-v3-hx-s-clc) * .45));

            svg {
                color: var(--buttons);
            }
        }

        &.bt {
            bottom: calc(var(--pd-v) * 2);
            right: calc(-1 * (var(--faq-v3-hx-s-clc) * .45));

            svg {
                color: var(--accent);
            }
        }
    }
}