/* =========================================
   TVGA ARTICLES RESPONSIVE
========================================= */


/* =========================================
   LARGE TABLET
========================================= */

@media (max-width: 1100px) {

    .articles-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .articles-section-header {

        gap: 40px;

    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .articles-hero {

        min-height: 430px;

    }

    .articles-hero-content {

        padding: 80px 0;

    }

    .articles-section,
    .articles-cta {

        padding: 80px 0;

    }

    .articles-section-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 45px;

    }

    .articles-section-header h2 {

        font-size: 42px;

    }

    .articles-section-header > p {

        text-align: left;

        max-width: 600px;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .articles-hero {

        min-height: 500px;

    }

    .articles-hero-content {

        padding: 70px 0;

    }

    .articles-hero-content h1 {

        font-size: 48px;

    }

    .articles-hero-content p {

        font-size: 15px;

        line-height: 1.7;

    }


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

    .articles-section,
    .articles-cta {

        padding: 65px 0;

    }

    .articles-section-header h2 {

        font-size: 36px;

    }

    .articles-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .article-card {

        min-height: auto;

    }

    .article-card-image {

        height: 220px;

    }

    .article-card-content {

        padding: 28px;

    }

    .article-card h3 {

        font-size: 24px;

    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .articles-cta-content h2 {

        font-size: 45px;

    }

    .articles-cta-content p {

        font-size: 15px;

    }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .articles-hero-content h1 {

        font-size: 42px;

    }

    .articles-section-header h2 {

        font-size: 32px;

    }

    .article-card-content {

        padding: 24px;

    }

    .article-card h3 {

        font-size: 22px;

    }

    .articles-cta-content h2 {

        font-size: 39px;

    }

}