.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: 0.75rem;
        height: clamp(18rem, 89.8vw, 22.5625rem);
    }

    .pull-quote .pull-quote__vector img {
        height: 118%;
        left: -9%;
        max-width: none;
        object-fit: fill;
        object-position: 3% 42%;
        position: relative;
        width: 118%;
    }

    .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.6vw, 1.40625rem);
        line-height: 1.2;
        width: 100%;
    }
}
