@layer parts {
    .post-quote {
        --_color: var(--quote-color, var(--color-muted));
        --_mark-color: var(--quote-mark-color, var(--color-border));
        --_font: var(--quote-font, var(--font-heading));
        max-width: var(--quote-max-width, 900px);
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .post-quote--center { text-align: center; align-items: center; }
    .post-quote--left { text-align: left; align-items: flex-start; }
    .post-quote--right { text-align: right; align-items: flex-end; }

    .post-quote__link {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .post-quote__link:hover .post-quote__text,
    .post-quote__link:hover .post-quote__title,
    .post-quote__link:hover .post-quote__date {
        color: var(--color-text);
    }

    .post-quote__text {
        font-family: var(--_font);
        color: var(--_color);
        line-height: 1.3;
        margin: 0;
        transition: color 0.2s ease;
    }

    .post-quote--italic .post-quote__text {
        font-style: italic;
    }

    .post-quote--marks .post-quote__text::before {
        content: '\201C';
        color: var(--_mark-color);
    }

    .post-quote--marks .post-quote__text::after {
        content: '\201D';
        color: var(--_mark-color);
    }

    /* Sizes */
    .post-quote--md .post-quote__text { font-size: var(--font-size-md); }
    .post-quote--lg .post-quote__text { font-size: var(--font-size-lg); }
    .post-quote--xl .post-quote__text { font-size: var(--font-size-xl); }
    .post-quote--2xl .post-quote__text { font-size: var(--font-size-2xl); }
    .post-quote--3xl .post-quote__text { font-size: var(--font-size-3xl); }


.post-quote__group {
        display: flex;
        align-items: center;
        justify-content: inherit;
        gap: 0.5em;
        flex-wrap: wrap;
    }

    .post-quote__sep {
        opacity: 0.5;
    }

    .post-quote__date {
        font-size: var(--font-size-sm);
        color: var(--color-muted);
        transition: color 0.2s ease;
    }

    .post-quote__title {
        font-family: var(--font-heading);
        font-weight: var(--font-weight-heading);
        font-size: var(--font-size-base);
        font-style: normal;
        color: var(--_color);
        transition: color 0.2s ease;
    }
}