/**
 * ============================================================================
 * COURSMARKETING.FR — RESPONSIVE GLOBAL
 * ============================================================================
 *
 * Le desktop > 1279 px est le rendu de référence validé.
 *
 * Ce fichier contient uniquement les adaptations nécessaires lorsque
 * l'espace disponible diminue.
 *
 * BREAKPOINTS HOME / FOOTER :
 *
 * 1279 px : laptop
 * 1023 px : tablette paysage / petit laptop
 *  767 px : tablette portrait
 *  559 px : mobile
 *
 * Le header conserve ses propres breakpoints déjà validés.
 * ============================================================================
 */


/* ==========================================================================
   1. LAPTOP — 1024 À 1279 PX
   ========================================================================== */

@media (max-width: 1279px) {

    /* ----------------------------------------------------------------------
       CONTAINERS
       ---------------------------------------------------------------------- */

    .cm-home-container,
    .cm-footer-container {
        width: calc(100% - 32px);
    }


    /* ----------------------------------------------------------------------
       HERO
       ---------------------------------------------------------------------- */

    .cm-home-hero {
        padding-top: 52px;
    }

    .cm-home-hero-grid {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(340px, 0.95fr);

        gap: 36px;
    }

    .cm-home-title {
        font-size: clamp(39px, 4.2vw, 52px);
    }

    .cm-featured-card {
        padding: 30px;
    }


    /* ----------------------------------------------------------------------
       CATÉGORIES
       ---------------------------------------------------------------------- */

    .cm-topics-grid {
        gap: 10px;
    }

    .cm-topic-card {
        padding-inline: 14px;
    }


    

    /* ----------------------------------------------------------------------
       FOOTER
       ---------------------------------------------------------------------- */

    .cm-footer-main {
        grid-template-columns:
            minmax(220px, 1.45fr)
            repeat(4, minmax(105px, 1fr));

        gap: 26px;
    }
}


/* ==========================================================================
   2. TABLETTE / PETIT LAPTOP — 768 À 1023 PX
   ========================================================================== */

@media (max-width: 1023px) {

    /* ----------------------------------------------------------------------
       HERO
       ---------------------------------------------------------------------- */

    .cm-home-hero {
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .cm-home-hero-grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 28px;
    }

    .cm-home-hero-intro {
        max-width: 760px;
    }

    .cm-home-title {
        max-width: 720px;

        font-size: clamp(40px, 6vw, 54px);
    }

    .cm-home-lead {
        max-width: 680px;
    }

    .cm-home-proof {
        max-width: 650px;
    }

    .cm-home-featured {
        width: 100%;
    }

    .cm-featured-card {
        min-height: 285px;
    }


    /* ----------------------------------------------------------------------
       TITRES DE SECTION
       ---------------------------------------------------------------------- */

    .cm-section-heading {
        gap: 20px;
    }


    /* ----------------------------------------------------------------------
       CATÉGORIES
       Rail horizontal natif.
       Aucun passage en grille verticale.
       ---------------------------------------------------------------------- */

    .cm-topics-grid {
        display: grid;

        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(180px, 27vw);

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 2px 2px 10px;

        scroll-snap-type: none;
        scroll-padding-inline: 2px;

        overscroll-behavior-inline: contain;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .cm-topics-grid::-webkit-scrollbar {
        display: none;
    }

    .cm-topic-card {
        min-height: 148px;

        scroll-snap-align: none;
    }


    /* ----------------------------------------------------------------------
       DERNIERS ARTICLES
       ---------------------------------------------------------------------- */

    .cm-latest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;
    }


    /* ----------------------------------------------------------------------
       CONTENUS INCONTOURNABLES
       ---------------------------------------------------------------------- */

    .cm-pillars-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 12px;
    }

    .cm-pillar-card {
        grid-template-columns: minmax(0, 1fr);

        gap: 12px;
    }


    

    /* ----------------------------------------------------------------------
       FOOTER
       ---------------------------------------------------------------------- */

    .cm-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 30px 44px;
    }

    .cm-footer-brand {
        grid-column: 1 / -1;
    }

    .cm-footer-brand p {
        max-width: 520px;
    }
}


/* ==========================================================================
   3. PETITE TABLETTE — 560 À 767 PX
   ========================================================================== */

@media (max-width: 767px) {

    /* ----------------------------------------------------------------------
       CONTAINERS
       ---------------------------------------------------------------------- */

    .cm-home-container,
    .cm-footer-container {
        width: calc(100% - 28px);
    }


    /* ----------------------------------------------------------------------
       ESPACEMENT GLOBAL
       ---------------------------------------------------------------------- */

    .cm-home-section {
        padding: 32px 0;
    }


    /* ----------------------------------------------------------------------
       HERO
       ---------------------------------------------------------------------- */

    .cm-home-hero {
        padding-top: 34px;
    }

    .cm-home-title {
        font-size: clamp(36px, 8vw, 46px);
    }

    .cm-home-lead {
        font-size: 14px;
    }

    .cm-featured-card {
        min-height: 270px;

        padding: 27px;
    }

    .cm-featured-title {
        font-size: clamp(25px, 5vw, 31px);
    }


    /* ----------------------------------------------------------------------
       TITRES DE SECTION
       ---------------------------------------------------------------------- */

    .cm-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }


    /* ----------------------------------------------------------------------
       CATÉGORIES
       ---------------------------------------------------------------------- */

    .cm-topics-grid {
        grid-auto-columns: minmax(185px, 43vw);
    }


    /* ----------------------------------------------------------------------
       DERNIERS ARTICLES
       ---------------------------------------------------------------------- */

    .cm-latest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* ----------------------------------------------------------------------
       CONTENUS INCONTOURNABLES
       ---------------------------------------------------------------------- */

    .cm-pillars-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cm-pillar-card {
        grid-template-columns: auto minmax(0, 1fr);
    }


    

    /* ----------------------------------------------------------------------
       FOOTER
       ---------------------------------------------------------------------- */

    .cm-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 27px 34px;

        padding-top: 35px;
    }

    .cm-footer-brand {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   4. MOBILE — < 560 PX
   ========================================================================== */

@media (max-width: 559px) {

    /* ----------------------------------------------------------------------
       CONTAINERS
       ---------------------------------------------------------------------- */

    .cm-home-container,
    .cm-footer-container {
        width: calc(100% - 24px);
    }


    /* ----------------------------------------------------------------------
       HOME
       ---------------------------------------------------------------------- */

    .cm-home-section {
        padding: 28px 0;
    }


    /* ----------------------------------------------------------------------
       HERO
       ---------------------------------------------------------------------- */

    .cm-home-hero {
        padding-top: 29px;
        padding-bottom: 24px;
    }

    .cm-home-title {
        font-size: clamp(33px, 10.4vw, 40px);
        line-height: 1.06;
    }

    .cm-home-lead {
        margin-top: 16px;

        font-size: 14px;
        line-height: 1.58;
    }

    .cm-home-hero-actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 20px;
    }

    .cm-home-hero-actions .cm-button {
        width: 100%;
    }

    .cm-home-proof {
        margin-top: 17px;
    }

    .cm-featured-card {
        min-height: 260px;

        padding: 24px 21px;

        border-radius: 14px;
    }

    .cm-featured-label {
        margin-bottom: 18px;
    }

    .cm-featured-title {
        font-size: 25px;
    }

    .cm-featured-excerpt {
        font-size: 12px;
    }

    .cm-featured-meta {
        gap: 5px;

        font-size: 9px;
    }


    /* ----------------------------------------------------------------------
       TITRES
       ---------------------------------------------------------------------- */

    .cm-section-heading h2 {
        font-size: 21px;
    }


    /* ----------------------------------------------------------------------
       CATÉGORIES
       Une carte principale + aperçu de la suivante.
       ---------------------------------------------------------------------- */

    .cm-topics-grid {
        grid-auto-columns: minmax(175px, 72vw);

        margin-right: -12px;
        padding-right: 12px;
    }

    .cm-topic-card {
        min-height: 136px;

        padding: 17px 15px;
    }


    /* ----------------------------------------------------------------------
       DERNIERS ARTICLES
       ---------------------------------------------------------------------- */

    .cm-latest-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cm-latest-card {
        min-height: 220px;
    }


    /* ----------------------------------------------------------------------
       CONTENUS INCONTOURNABLES
       ---------------------------------------------------------------------- */

    .cm-pillar-card {
        grid-template-columns: auto minmax(0, 1fr);

        padding: 18px;
    }


    

    /* ----------------------------------------------------------------------
       FOOTER
       ---------------------------------------------------------------------- */

    .cm-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 24px 28px;

        padding-top: 32px;
        padding-bottom: 29px;
    }

    .cm-footer-brand {
        grid-column: 1 / -1;
    }

    .cm-footer-brand p {
        max-width: 420px;
    }

    .cm-footer-column {
        gap: 6px;
    }

    .cm-footer-column h2 {
        margin-bottom: 4px;
    }

    .cm-footer-bottom p {
        padding: 13px 0;
    }
}


/* ==========================================================================
   RESPIRATION THÉMATIQUES — RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {

    .cm-home-topics {
        padding-bottom: 52px;
    }
}

@media (max-width: 767px) {

    .cm-home-topics {
        padding-bottom: 46px;
    }
}

@media (max-width: 559px) {

    .cm-home-topics {
        padding-bottom: 42px;
    }
}


@media (max-width: 1023px) {

}

@media (max-width: 559px) {

}


@media (max-width: 1023px) {

}

@media (max-width: 767px) {

}

@media (max-width: 559px) {

}


/* ==========================================================================
   KREABOARD — RESPONSIVE CANONIQUE
   ========================================================================== */

@media (max-width: 1279px) {

    .cm-kreaboard-panel {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(230px, 0.8fr);

        gap: 28px 36px;
    }
}

@media (max-width: 1023px) {

    .cm-kreaboard-panel {
        grid-template-columns: minmax(0, 1fr);

        gap: 22px;

        padding: 30px;
    }

    .cm-kreaboard-copy .cm-kreaboard-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        max-width: 700px;
    }

    .cm-kreaboard-visual {
        justify-content: center;
    }

    .cm-kreaboard-visual img {
        width: min(100%, 360px);
    }
}

@media (max-width: 767px) {

    .cm-home-kreaboard {
        padding-top: 35px;
        padding-bottom: 44px;
    }

    .cm-kreaboard-panel {
        padding: 27px 25px;
    }

    .cm-kreaboard-copy .cm-kreaboard-benefits {
        grid-template-columns: minmax(0, 1fr);

        gap: 9px;
    }
}

@media (max-width: 559px) {

    .cm-home-kreaboard {
        padding-top: 31px;
        padding-bottom: 38px;
    }

    .cm-kreaboard-panel {
        gap: 20px;

        padding: 24px 20px;
    }

    .cm-kreaboard-copy h2 {
        font-size: 24px;
    }

    .cm-kreaboard-intro {
        font-size: 11px;
    }

    .cm-kreaboard-copy .cm-kreaboard-action {
        width: 100%;

        flex-direction: column;
        align-items: stretch;
    }

    .cm-button-kreaboard {
        width: 100%;
    }

    .cm-kreaboard-copy .cm-kreaboard-note {
        text-align: center;
    }

    .cm-kreaboard-visual img {
        width: min(100%, 290px);
    }
}



/* ==========================================================================
   COURSMARKETING — PAGE GÉNÉRIQUE — RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {

    .cm-page {
        padding-top: 26px;
        padding-bottom: 64px;
    }

    .cm-page-container {
        width: min(
            calc(100% - var(--cm-gutter-tablet)),
            var(--cm-container)
        );
    }

    .cm-page-header,
    .cm-page-content,
    .cm-page-breadcrumb {
        max-width: 760px;
    }
}

@media (max-width: 767px) {

    .cm-page {
        padding-top: 22px;
        padding-bottom: 52px;
    }

    .cm-page-container {
        width: calc(100% - var(--cm-gutter-mobile));
    }

    .cm-page-breadcrumb {
        margin-bottom: 24px;
    }

    .cm-page-header {
        margin-bottom: 24px;
    }

    .cm-page-title {
        font-size: clamp(36px, 10vw, 50px);
    }

    .cm-page-content {
        font-size: 15px;
        line-height: 1.7;
    }

    .cm-page-content h2 {
        margin-top: 34px;

        font-size: 26px;
    }

    .cm-page-content h3 {
        font-size: 20px;
    }

    .cm-page-content blockquote {
        padding: 18px 20px;
    }
}

@media (max-width: 559px) {

    .cm-page {
        padding-top: 20px;
        padding-bottom: 46px;
    }

    .cm-page-title {
        font-size: clamp(34px, 11vw, 44px);
    }
}


/* ==========================================================================
   COURSMARKETING.FR — PAGE CATÉGORIE / RESPONSIVE
   ==========================================================================
   Adaptation exclusive de la page d'archive catégorie.

   Breakpoints du thème :
   - 1279 px : laptop
   - 1023 px : tablette paysage
   - 767 px  : tablette compacte
   - 559 px  : mobile

   Le rendu desktop supérieur à 1279 px reste inchangé.
   ========================================================================== */


/* ==========================================================================
   LAPTOP — 1279 PX
   ========================================================================== */

@media (max-width: 1279px) {

    .cm-category-container {
        width: min(calc(100% - 40px), 1120px);
    }

    .cm-category-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(270px, 310px);

        gap: 32px;
    }

    .cm-category-article-card {
        grid-template-columns:
            minmax(190px, 230px)
            minmax(0, 1fr);
    }

    .cm-category-article-content {
        padding: 22px 23px;
    }

    .cm-category-kreaboard-panel {
        grid-template-columns:
            minmax(180px, 0.7fr)
            minmax(0, 1.5fr)
            auto;

        gap: 26px;

        padding: 29px 31px;
    }

    .cm-category-kreaboard-visual img {
        width: min(100%, 205px);
    }
}


/* ==========================================================================
   TABLETTE PAYSAGE — 1023 PX
   ========================================================================== */

@media (max-width: 1023px) {

    .cm-category-container {
        width: min(calc(100% - 36px), 900px);

        padding-bottom: 64px;
    }

    .cm-category-hero {
        gap: 20px;

        margin-bottom: 44px;
    }

    .cm-category-hero-icon {
        width: 82px;
        height: 82px;
    }

    .cm-category-hero-icon img {
        width: 50px;
        height: 50px;
    }

    .cm-category-title {
        font-size: clamp(36px, 5vw, 48px);
    }

    .cm-category-layout {
        grid-template-columns: minmax(0, 1fr);

        gap: 38px;
    }

    .cm-category-sidebar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .cm-category-sidebar-card {
        min-width: 0;
    }

    .cm-category-kreaboard {
        margin-top: 52px;
    }

    .cm-category-kreaboard-panel {
        grid-template-columns:
            minmax(160px, 0.65fr)
            minmax(0, 1.35fr);

        gap: 26px;

        padding: 28px 30px;
    }

    .cm-category-kreaboard-visual img {
        width: min(100%, 190px);
    }

    .cm-category-kreaboard-action {
        grid-column: 1 / -1;

        flex-direction: row;
        justify-content: flex-end;

        min-width: 0;
    }
}


/* ==========================================================================
   TABLETTE COMPACTE — 767 PX
   ========================================================================== */

@media (max-width: 767px) {

    .cm-category-container {
        width: min(calc(100% - 32px), 720px);

        padding-top: 28px;
        padding-bottom: 58px;
    }

    .cm-category-hero {
        align-items: flex-start;

        gap: 18px;

        margin-bottom: 38px;
    }

    .cm-category-hero-icon {
        width: 74px;
        height: 74px;
    }

    .cm-category-hero-icon img {
        width: 45px;
        height: 45px;
    }

    .cm-category-title {
        font-size: clamp(34px, 7vw, 43px);
    }

    .cm-category-description {
        margin-top: 11px;

        font-size: 15px;
    }

    .cm-category-section-header {
        margin-bottom: 19px;
    }

    .cm-category-section-header h2 {
        font-size: 25px;
    }

    .cm-category-article-card {
        grid-template-columns: minmax(0, 1fr);

        min-height: 0;
    }

    .cm-category-article-image {
        height: auto;
        min-height: 0;

        aspect-ratio: 16 / 9;
    }

    .cm-category-article-content {
        padding: 22px 23px;
    }

    .cm-category-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .cm-category-pagination .nav-links {
        flex-wrap: wrap;
    }

    .cm-category-kreaboard-panel {
        grid-template-columns: minmax(0, 1fr);

        gap: 24px;

        padding: 28px;
    }

    .cm-category-kreaboard-visual {
        justify-content: flex-start;
    }

    .cm-category-kreaboard-visual img {
        width: min(100%, 180px);
    }

    .cm-category-kreaboard-action {
        grid-column: auto;

        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
}


/* ==========================================================================
   MOBILE — 559 PX
   ========================================================================== */

@media (max-width: 559px) {

    .cm-category-container {
        width: calc(100% - 28px);

        padding-top: 24px;
        padding-bottom: 52px;
    }

    .cm-category-hero {
        flex-direction: column;

        gap: 14px;

        margin-bottom: 34px;
    }

    .cm-category-hero-icon {
        width: 68px;
        height: 68px;
    }

    .cm-category-hero-icon img {
        width: 41px;
        height: 41px;
    }

    .cm-category-title {
        font-size: 34px;
        line-height: 1.08;
    }

    .cm-category-description {
        font-size: 14px;
        line-height: 1.65;
    }

    .cm-category-count {
        margin-top: 10px;
    }

    .cm-category-section-header h2 {
        font-size: 23px;
    }

    .cm-category-articles-list {
        gap: 16px;
    }

    .cm-category-article-content {
        padding: 20px;
    }

    .cm-category-article-title {
        font-size: 19px;
    }

    .cm-category-article-excerpt {
        font-size: 13px;
    }

    .cm-category-empty {
        padding: 25px 22px;
    }

    .cm-category-sidebar {
        gap: 16px;
    }

    .cm-category-sidebar-card,
    .cm-category-popular {
        padding: 21px 20px;
    }

    .cm-category-sidebar-category-list a {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            auto;

        gap: 9px;

        padding: 6px;
    }

    .cm-category-sidebar-category-icon {
        width: 32px;
        height: 32px;
    }

    .cm-category-sidebar-category-icon img {
        width: 20px;
        height: 20px;
    }

    .cm-category-pagination {
        margin-top: 26px;
    }

    .cm-category-pagination .nav-links {
        gap: 6px;
    }

    .cm-category-pagination .page-numbers {
        min-width: 36px;
        height: 36px;

        padding: 0 9px;
    }

    .cm-category-kreaboard {
        margin-top: 44px;
    }

    .cm-category-kreaboard-panel {
        gap: 20px;

        min-height: 0;

        padding: 24px 20px;

        border-radius: 14px;
    }

    .cm-category-kreaboard-visual {
        justify-content: center;
    }

    .cm-category-kreaboard-visual img {
        width: min(100%, 165px);
    }

    .cm-category-kreaboard-copy h2 {
        font-size: 22px;
    }

    .cm-category-kreaboard-benefits {
        grid-template-columns: minmax(0, 1fr);

        gap: 8px;

        margin-top: 15px;
    }

    .cm-category-kreaboard-action {
        align-items: stretch;

        width: 100%;
    }

    .cm-category-kreaboard-button {
        width: 100%;
    }

    .cm-category-kreaboard-note {
        width: 100%;
    }
}


/* ==========================================================================
   COURSMARKETING.FR — ARTICLE / RESPONSIVE
   ==========================================================================
   Adaptation exclusive du modèle Article.

   Breakpoints du thème :
   - 1279 px : laptop
   - 1023 px : tablette paysage / petit laptop
   - 767 px  : tablette compacte
   - 559 px  : mobile

   Le rendu desktop supérieur à 1279 px reste inchangé.
   ========================================================================== */


/* ==========================================================================
   LAPTOP — 1024 À 1279 PX
   ========================================================================== */

@media (max-width: 1279px) {

    .cm-article-container {
        width: min(calc(100% - 40px), 1080px);
    }

    .cm-article-layout {
        grid-template-columns:
            minmax(0, 1fr)
            270px;

        gap: 30px;
    }

    .cm-article-main-column {
        max-width: none;
    }

    .cm-article-header:has(.cm-article-featured-image) {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(300px, 0.9fr);

        column-gap: 34px;
    }

    .cm-article-title {
        font-size: clamp(32px, 3.6vw, 44px);
    }
}


/* ==========================================================================
   TABLETTE PAYSAGE / PETIT LAPTOP — 768 À 1023 PX
   ========================================================================== */

@media (max-width: 1023px) {

    .cm-article-container {
        width: min(calc(100% - 36px), 900px);

        padding-top: 22px;
        padding-bottom: 56px;
    }

    .cm-article-breadcrumb {
        margin-bottom: 20px;
    }

    .cm-article-header {
        margin-bottom: 30px;
    }

    .cm-article-header:has(.cm-article-featured-image) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 22px;
    }

    .cm-article-header:has(.cm-article-featured-image)
    .cm-article-category,
    .cm-article-header:has(.cm-article-featured-image)
    .cm-article-title,
    .cm-article-header:has(.cm-article-featured-image)
    .cm-article-lead,
    .cm-article-header:has(.cm-article-featured-image)
    .cm-article-meta,
    .cm-article-header:has(.cm-article-featured-image)
    .cm-article-featured-image {
        grid-column: 1;
    }

    .cm-article-header:has(.cm-article-featured-image)
    .cm-article-featured-image {
        grid-row: auto;

        width: 100%;
        margin-top: 4px;
    }

    

    .cm-article-title {
        max-width: 760px;

        font-size: clamp(32px, 5vw, 42px);
    }

    .cm-article-lead {
        max-width: 720px;
    }

    .cm-article-layout {
        grid-template-columns: minmax(0, 1fr);

        gap: 34px;
    }

    .cm-article-main-column {
        width: 100%;
        max-width: none;
    }

    .cm-article-sidebar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .cm-article-sidebar-kreaboard {
        min-width: 0;
    }

    .cm-article-kreaboard--main
    .cm-article-kreaboard-benefits {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cm-article-content table {
        display: block;

        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   TABLETTE COMPACTE — 560 À 767 PX
   ========================================================================== */

@media (max-width: 767px) {

    .cm-article-container {
        width: min(calc(100% - 32px), 720px);

        padding-top: 20px;
        padding-bottom: 50px;
    }

    .cm-article-breadcrumb {
        margin-bottom: 18px;

        font-size: 11px;
    }

    .cm-article-header {
        margin-bottom: 26px;
    }

    .cm-article-category {
        margin-bottom: 8px;
    }

    .cm-article-title {
        font-size: clamp(30px, 7.5vw, 39px);
        line-height: 1.09;
    }

    .cm-article-lead {
        margin-top: 12px;

        font-size: 15px;
        line-height: 1.6;
    }

    .cm-article-meta {
        gap: 7px 18px;

        margin-top: 14px;

        font-size: 10px;
    }

    .cm-article-meta > *:not(:last-child)::after {
        right: -11px;
    }

    .cm-article-featured-image {
        border-radius: 12px;
    }

    .cm-article-layout {
        gap: 30px;
    }

    .cm-article-toc {
        margin-bottom: 22px;
    }

    .cm-article-toc-title {
        font-size: 14px;
    }

    .cm-article-toc-list ul,
    .cm-article-toc-list ol {
        padding-left: 16px;
    }

    .cm-article-content {
        font-size: 15px;
        line-height: 1.72;
    }

    .cm-article-content h2 {
        margin-top: 30px;

        font-size: 23px;
    }

    .cm-article-content h3 {
        margin-top: 23px;

        font-size: 18px;
    }

    .cm-article-content h4 {
        font-size: 16px;
    }

    .cm-article-content blockquote {
        margin: 20px 0;
        padding: 14px 16px;

        border-radius: 0 11px 11px 0;
    }

    .cm-article-content img {
        border-radius: 12px;
    }

    .cm-article-sidebar {
        grid-template-columns: minmax(0, 1fr);

        gap: 16px;
    }

    .cm-article-sidebar-card,
    .cm-article-kreaboard--sidebar {
        padding: 17px;
    }

    .cm-article-kreaboard--main {
        padding: 20px;
    }

    .cm-article-kreaboard--main
    .cm-article-kreaboard-benefits {
        grid-template-columns: minmax(0, 1fr);

        gap: 6px;
    }

    .cm-article-author-box {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        gap: 12px;

        padding: 15px 16px;
    }

    .cm-article-author-avatar img {
        width: 52px;
        height: 52px;
    }

    .cm-article-share-links {
        gap: 7px;
    }

    .cm-article-share-links a {
        min-height: 32px;

        padding: 6px 10px;

        font-size: 10px;
    }

    .cm-article-main-column
    .comment-form
    input[type="text"],
    .cm-article-main-column
    .comment-form
    input[type="email"],
    .cm-article-main-column
    .comment-form
    input[type="url"],
    .cm-article-main-column
    .comment-form
    textarea {
        max-width: 100%;
    }
}


/* ==========================================================================
   MOBILE — < 560 PX
   ========================================================================== */

@media (max-width: 559px) {

    .cm-article-container {
        width: calc(100% - 24px);

        padding-top: 18px;
        padding-bottom: 44px;
    }

    .cm-article-breadcrumb {
        gap: 5px;

        margin-bottom: 16px;

        font-size: 10px;
        line-height: 1.45;
    }

    .cm-article-header {
        margin-bottom: 24px;
    }

    .cm-article-category {
        margin-bottom: 7px;

        font-size: 10px;
    }

    .cm-article-title {
        max-width: none;

        font-size: clamp(28px, 9vw, 36px);
        line-height: 1.08;
        letter-spacing: -0.03em;
    }

    .cm-article-lead {
        max-width: none;

        margin-top: 11px;

        font-size: 14px;
        line-height: 1.58;
    }

    .cm-article-meta {
        align-items: flex-start;

        gap: 5px 14px;

        margin-top: 13px;

        font-size: 9px;
        line-height: 1.45;
    }

    .cm-article-meta > *:not(:last-child)::after {
        display: none;
    }

    .cm-article-header:has(.cm-article-featured-image) {
        gap: 18px;
    }

    .cm-article-header:has(.cm-article-featured-image)
    .cm-article-featured-image {
        margin-top: 2px;

        border-radius: 11px;
    }

    .cm-article-layout {
        gap: 26px;
    }

    .cm-article-toc {
        margin-bottom: 20px;
    }

    .cm-article-toc-title {
        margin-bottom: 8px;

        font-size: 13px;
    }

    .cm-article-toc-list a {
        font-size: 11px;
        line-height: 1.45;
    }

    .cm-article-content {
        font-size: 14px;
        line-height: 1.72;
    }

    .cm-article-content p {
        margin-bottom: 16px;
    }

    .cm-article-content h2 {
        margin: 28px 0 10px;

        font-size: 21px;
        line-height: 1.25;
    }

    .cm-article-content h3 {
        margin: 22px 0 9px;

        font-size: 17px;
    }

    .cm-article-content h4 {
        margin: 20px 0 8px;

        font-size: 15px;
    }

    .cm-article-content ul,
    .cm-article-content ol {
        padding-left: 21px;
    }

    .cm-article-content blockquote {
        margin: 18px 0;
        padding: 13px 14px;

        font-size: 13px;
    }

    .cm-article-content figure {
        margin: 20px 0;
    }

    .cm-article-content figcaption {
        font-size: 11px;
    }

    .cm-article-content table {
        margin: 24px 0;

        font-size: 13px;
    }

    .cm-article-content th,
    .cm-article-content td {
        min-width: 120px;

        padding: 10px 11px;
    }

    .cm-article-sidebar-card,
    .cm-article-kreaboard--sidebar {
        padding: 16px;

        border-radius: 11px;
    }

    .cm-article-sidebar-card h2 {
        margin-bottom: 12px;

        font-size: 14px;
    }

    .cm-article-related-item {
        grid-template-columns:
            72px
            minmax(0, 1fr);

        gap: 9px;
    }

    .cm-article-related-image {
        width: 72px;
        height: 56px;
    }

    .cm-article-related-title {
        font-size: 9px;
    }

    .cm-article-related-meta {
        font-size: 8px;
    }

    .cm-article-kreaboard--main {
        margin-top: 28px;
        padding: 18px;

        border-radius: 11px;
    }

    .cm-article-kreaboard--main h2 {
        font-size: 18px;
    }

    .cm-article-kreaboard--main
    .cm-article-kreaboard-intro {
        font-size: 11px;
    }

    .cm-article-kreaboard--main
    .cm-article-kreaboard-benefits li {
        font-size: 10px;
    }

    .cm-article-kreaboard--main
    .cm-article-kreaboard-button {
        width: 100%;

        text-align: center;
    }

    .cm-article-kreaboard--sidebar h2 {
        font-size: 14px;
    }

    .cm-article-author-box {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 11px;

        margin-top: 24px;
        padding: 14px;
    }

    .cm-article-author-avatar img {
        width: 46px;
        height: 46px;
    }

    .cm-article-author-content h2 {
        font-size: 13px;
    }

    .cm-article-author-content p {
        font-size: 10px;
    }

    .cm-article-share {
        margin-top: 16px;
        padding-top: 14px;
    }

    .cm-article-share-links {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        width: 100%;
    }

    .cm-article-share-links a {
        width: 100%;

        min-height: 34px;

        padding: 7px 6px;
    }

    .cm-article-main-column .comments-area {
        margin-top: 22px;
        padding-top: 20px;
    }

    .cm-article-main-column
    .comments-area
    .title-comments,
    .cm-article-main-column
    .comment-reply-title {
        font-size: 17px;
    }

    .cm-article-main-column .comment-body {
        padding: 13px;
    }

    .cm-article-main-column .comment-author {
        align-items: flex-start;
    }

    .cm-article-main-column
    .comment-form
    input[type="text"],
    .cm-article-main-column
    .comment-form
    input[type="email"],
    .cm-article-main-column
    .comment-form
    input[type="url"],
    .cm-article-main-column
    .comment-form
    textarea {
        width: 100%;

        padding: 11px 12px;
    }

    .cm-article-main-column
    .form-submit
    .submit {
        width: 100%;

        min-height: 38px;
    }
}