/* ==========================================================================
   Quote
   ========================================================================== */

.quote {
    text-align: center;
    padding: 28px 40px;
}

.quote__mark {
    font-weight: 900;
    font-size: 54px;
    line-height: 1;
    color: var(--color-brand);
    margin-bottom: 12px;
}

.quote__text {
    min-height: 128px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto;
    max-width: 760px;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.25;
    letter-spacing: -0.6px;
    color: var(--color-text);
}

.quote__text.is-animating {
    animation: heroIn 0.55s ease;
}

.quote__text-phrase span {
    color: var(--color-brand);
}

.quote__author {
    margin-top: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-faint);
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 480px) {
    /* `.quote__text` is a flex row (to center the line), and flex rows don't
       wrap by default — so the quote ran off the side of the screen instead
       of breaking onto the next line. Plain block layout still centers it via
       `.quote`'s text-align, and wraps like normal text. */
    .quote {
        padding: 24px 8px;
    }

    .quote__text {
        display: block;
    }
}