blockquote {
    font-family: 'Times New Roman', 'serif';
    line-height: var(--line-height-30);
    margin: 0;
    padding: 2rem 2rem;
    font-size: var(--font-size-18);
}
.quote {
    position: relative;
}
blockquote em {
    font-size: 1rem;
    display: block;
    padding-top: 15px;
}
blockquote::before {
    content: '”';
    left: 0.75rem;
    top: 0.5rem;
    line-height: 1;
}
blockquote::after {
    content: '“';
    right: 0.75rem;
    bottom: 0.5rem;
    line-height: 0;
}
blockquote::before,
blockquote::after {
    font-size: 2.5rem;
    position: absolute;
}
.layout-primary blockquote {
    background: var(--color-primary-1);
    color: #fff;
}
.layout-secondary blockquote {
    background: var(--color-primary-2);
    color: #fff;
}
.layout-light-gray blockquote {
    background: var(--color-secondary-10);
}
.layout-dark-gray blockquote {
    background: var(--color-secondary-15);
}

/* For Desktop */

@container (min-width: 684px) {
    blockquote {
        padding: 2.5rem 6.25rem;
        font-size: var(--font-size-28);
    }
    blockquote::before {
        left: 1.5rem;
        font-size: 4em;
    }
    blockquote::after {
        right: 1.75rem;
        bottom: 1rem;
        font-size: 4em;
    }
}