.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__vector .pull-quote__vector--mobile {
        display: none;
    }

    .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;

        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: 0;
        min-height: calc(89.8vw - 1px);
    }

    .pull-quote::after {
        background: var(--color-cwc-blue-03);
        bottom: 0;
        content: "";
        height: 1rem;
        left: 0;
        position: absolute;
        right: 0;
        z-index: 2;
    }

    .pull-quote .pull-quote__vector {
        bottom: 1rem;
    }

    .pull-quote .pull-quote__vector .pull-quote__vector--bg {
        display: none;
    }

    .pull-quote .pull-quote__vector .pull-quote__vector--mobile {
        display: block;
        height: 100%;
        max-width: none;
        object-fit: cover;
        width: 100%;
    }

    .pull-quote .pull-quote__content {
        align-items: center;
        display: flex;
        margin-bottom: 1rem;
        min-height: calc(89.8vw - 1rem - 1px);
        padding: 2.5rem 2rem;
    }

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

@media (max-width: 360px) {
    .pull-quote .pull-quote__content {
        padding-block: 0.9375rem;
    }
}