.cmi-bb-magazine-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}


.cmi-bb-magazine-quote .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* .cmi-bb-magazine-quote > div {
    width: 100%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
    padding: 0 1rem;
}

@media screen and (min-width: 768px) {
    .cmi-bb-magazine-quote > div {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
} */

.cmi-bb-magazine-quote .quote-copy {
    font-family: "Arvo", serif;
    font-size: clamp(1.2em, 4vw, 2em);
    line-height: 1.4em;
}

@media screen and (min-width: 768px) {
    .cmi-bb-magazine-quote .quote-copy {
        font-size: 2rem;
    }    
}

.cmi-bb-magazine-quote .quote-copy::before {
    content: "“";
    top: 0;
    right: 100%;
}

.cmi-bb-magazine-quote .quote-copy strong {
    display: inline;
}

.cmi-bb-magazine-quote .quote-copy strong::after {
    content: "”";
    bottom: 0;
    left: 100%;
    transform: translateY(calc(100% - 0.265em));
}

.cmi-bb-magazine-quote .quote-attribution {
    margin-top: 1em;
    font-size: 1.4rem;
    line-height: 1.2em;
    width: 80%;
}

@media screen and (min-width: 768px) {
    .cmi-bb-magazine-quote .quote-attribution {
        margin-top: 1em;
        font-size: 1.4rem;
        line-height: 1.2em;
        width: 60%;
    }    
}

.cmi-bb-magazine-quote .quote-copy,
.cmi-bb-magazine-quote .quote-copy strong {
    position: relative;
}

.cmi-bb-magazine-quote .quote-copy::before,
.cmi-bb-magazine-quote .quote-copy::after,
.cmi-bb-magazine-quote .quote-copy strong::before,
.cmi-bb-magazine-quote .quote-copy strong::after {
    display: block;
    position: absolute;
    font-family: "Oswald", sans-serif;
    font-size: 6rem;
    line-height: 0.75em;
}

@media screen and (min-width: 768px) {
    .cmi-bb-magazine-quote .quote-copy::before,
    .cmi-bb-magazine-quote .quote-copy::after,
    .cmi-bb-magazine-quote .quote-copy strong::before,
    .cmi-bb-magazine-quote .quote-copy strong::after {
        font-size: 8rem;
    }    
}

/* colours */

.cmi-bb-magazine-quote.magenta {
    background-color: #d10074;
    background-image: linear-gradient(to top, #b80066, transparent), radial-gradient(ellipse at 50% 35%, #ff38a6, transparent);
    color: #fff;
}

.cmi-bb-magazine-quote.indigo {
    background-color: #21076a;
    background-image: linear-gradient(to top, #1a0552, transparent), radial-gradient(ellipse at 50% 35%, #3f0dca, transparent);
    color: #fff;
}

.cmi-bb-magazine-quote.cyan {
    background-color: #017ac1;
    background-image: linear-gradient(to top, #016aa8, transparent), radial-gradient(ellipse at 50% 35%, #2ab0fe, transparent);
    color: #fff;
}

.cmi-bb-magazine-quote.mint {
    background-color: #00818a;
    background-image: linear-gradient(to top, #006971, transparent), radial-gradient(ellipse at 50% 35%, #00e0f0, transparent);
    color: #fff;
}

.cmi-bb-magazine-quote.mango {
    background-color: #f4a11e;
    background-image: linear-gradient(to top, #ed960c, transparent), radial-gradient(ellipse at 50% 35%, #f9ca7f, transparent);
    color: #333;
}

.cmi-bb-magazine-quote.heather {
    background-color: #dfdbe0;
    background-image: linear-gradient(to top, #d3cdd4, transparent), radial-gradient(ellipse at 50% 35%, white, transparent);
    color: #333;
}

.cmi-bb-magazine-quote.dove {
    background-color: #dcdcdc;
    background-image: linear-gradient(to top, #cfcfcf, transparent), radial-gradient(ellipse at 50% 35%, white, transparent);
    color: #333;
}

.cmi-bb-magazine-quote.violet {
    background-color: #712c6f;
    background-image: linear-gradient(to top, #5f255d, transparent), radial-gradient(ellipse at 50% 35%, #b94ab5, transparent);
    color: #fff;
}

.cmi-bb-magazine-quote.slate {
    background-color: #333;
    background-image: linear-gradient(to top, #262626, transparent), radial-gradient(ellipse at 50% 35%, #666666, transparent);
    color: #fff;
}

.cmi-bb-magazine-quote.grey {
    background-color: #757575;
    background-image: linear-gradient(to top, #686868, transparent), radial-gradient(ellipse at 50% 35%, #a8a8a8, transparent);
    color: #fff;
}

.cmi-bb-magazine-quote.midgrey {
    background-color: #efefef;
    background-image: linear-gradient(to top, #e2e2e2, transparent), radial-gradient(ellipse at 50% 35%, white, transparent);
    color: #333;
}

.cmi-bb-magazine-quote.white {
    background-color: #fff;
    background-image: linear-gradient(to top, #f2f2f2, transparent), radial-gradient(ellipse at 50% 35%, white, transparent);
    color: #333;
}