.pull-quote {
    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, transparent);
    border-bottom: 16px solid var(--color-cwc-blue-03);
    position: relative;
    overflow: hidden;

    .pull-quote__vector {
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 0;
    }

    .pull-quote__vector img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .pull-quote__content {
        padding: 5rem 0;
        position: relative;
        z-index: 1;
    }

    .pull-quote__text {
        font-family: var(--font-quincy);
        font-size: var(--text-34px);
        font-weight: 500;
        line-height: 1;
        text-align: center;
        text-wrap: balance;

        strong, b {
            color: var(--color-cwc-blue-02);
            font-weight: 800;
        }

        p {
            color: var(--color-cwc-blue-01);
            margin: 0;
        }
    }
}

@media (max-width: 767px) {
    .pull-quote {
        background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
        border-bottom-width: 1rem;
        height: calc(89.8vw - 1px);
    }

    .pull-quote .pull-quote__vector img {
        height: 100%;
        object-fit: cover;
        object-position: 30% center;
        width: 100%;
    }

    .pull-quote .pull-quote__content {
        align-items: center;
        display: flex;
        height: 100%;
        padding: 2.5rem 2rem;
    }

    .pull-quote .pull-quote__text {
        font-size: clamp(1.25rem, 5.535vw, 1.390625rem);
        line-height: clamp(1.5rem, 6.72vw, 1.6875rem);
        width: 100%;
    }
}