/* =========================================================
   Blog Base — Antonio Richaud
   Depende de /css/base.css
   ========================================================= */

:root {
    --blog-container: var(--container-width);

    --blog-radius-sm: var(--radius-sm);
    --blog-radius-md: var(--radius-md);
    --blog-radius-lg: 2rem;

    --blog-shadow: var(--shadow-soft);

    --blog-card-bg:
        linear-gradient(180deg,
            rgba(245, 242, 255, 0.055),
            rgba(245, 242, 255, 0.026));

    --blog-card-bg-strong:
        linear-gradient(180deg,
            rgba(245, 242, 255, 0.072),
            rgba(245, 242, 255, 0.034));
}

html[data-theme="light"] {
    --blog-card-bg:
        linear-gradient(180deg,
            rgba(23, 23, 23, 0.035),
            rgba(23, 23, 23, 0.018));

    --blog-card-bg-strong:
        linear-gradient(180deg,
            rgba(23, 23, 23, 0.052),
            rgba(23, 23, 23, 0.024));
}

.blog-container {
    width: min(100% - 2rem, var(--blog-container));
    margin-inline: auto;
}

.blog-kicker {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.blog-page.is-language-changing [data-blog-i18n] {
    opacity: 0;
    transform: translateY(7px);
}

[data-blog-i18n] {
    transition:
        opacity 260ms ease,
        transform 260ms ease;
}