.stf.v4 {

    .bx-scrl {
        overflow: hidden;

        .bx-track {
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            cursor: grab;

            &::-webkit-scrollbar {
                display: none;
            }

            &:active {
                cursor: grabbing;
            }

            ul {
                flex-wrap: nowrap;
                gap: 3rem;

                > li {

                    .pd_v-30 {
                        padding: 1.11rem 1.11rem 2.78rem;
                    }

                    /* Card image — fills width, 10px radius */
                    .stf-itm-img img {
                        aspect-ratio: 1;
                    }

                    .stf-itm-hd {
                        margin-top: 2.78rem;

                        svg {
                            font-size: 2.22rem;
                            color: var(--buttons);
                            margin-bottom: 1.67rem;
                        }

                         
                        .stf-itm-ttl {
                            font-weight: 500;
                            font-size: 1.11rem;
                            line-height: 1.8;
                            color: rgb(244 240 232 / 0.6);
                            margin: 0;
                        }
                    }
                }
            }
        }
    }

    .btm-bx svg {
        font-size: 1.33rem;
    }

    /* Featured quote — beneath name/title on the card and in the bio popover.
       Colour comes from .fnt_qte (contextual); reset the browser blockquote
       margins so spacing is driven by the mrg_tp-20 utility. */
    .stf-v4-quote {
        margin-inline: 0;
        margin-bottom: 0;
        font-style: italic;
    }

    /* Pin the Read More button to the bottom of the card so buttons align
       across cards of differing quote/title length. */
    .stf-v4-actions {
        margin-top: auto;
    }

    /* Read More — solid button to contrast the near-black card. On this flipped
       (.ulk-bg) card the theme's default fill resolves too dark/low-contrast, so
       force the card's accent red (same --buttons as the Flair icon) with white
       text, deepening slightly on hover. */
    .stf-v4-actions .btn.v1 {
        --btn-bg: var(--buttons);
        --btn-clr: #ffffff;
        background-color: var(--btn-bg);
        color: var(--btn-clr);
    }

    .stf-v4-actions .btn.v1:is(:hover, :focus-visible) {
        --btn-bg: var(--lt-accent);
        background-color: var(--btn-bg);
    }
}