/* =========================================
   TVGA ARTICLE RESPONSIVE
========================================= */


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

@media (max-width: 1100px) {

    .article-layout {

        grid-template-columns: minmax(0, 1fr) 240px;

        gap: 50px;

    }

}


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

@media (max-width: 900px) {

    .article-hero {

        padding: 85px 0 70px;

    }

    .article-hero h1 {

        font-size: 55px;

    }

    .article-image-section {

        padding: 50px 0 70px;

    }

    .article-main-image {

        max-height: 500px;

    }

    .article-main-image img {

        height: 500px;

    }

    .article-content-section {

        padding: 80px 0;

    }

    .article-layout {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .article-sidebar {

        display: grid;

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

        gap: 20px;

    }

    .article-sidebar-box {

        margin-bottom: 0;

    }

    .related-articles {

        padding: 80px 0;

    }

}


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

@media (max-width: 600px) {

    .article-hero {

        padding: 70px 0 60px;

    }

    .article-back {

        margin-bottom: 35px;

    }

    .article-hero h1 {

        font-size: 42px;

        line-height: 1.08;

    }

    .article-introduction {

        font-size: 16px;

        line-height: 1.7;

    }

    .article-meta {

        flex-direction: column;

        gap: 12px;

    }


    /* -----------------------------------------
       IMAGE
    ----------------------------------------- */

    .article-image-section {

        padding: 30px 0 60px;

    }

    .article-main-image {

        max-height: 350px;

    }

    .article-main-image img {

        height: 350px;

    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .article-content-section {

        padding: 65px 0;

    }

    .article-body p {

        font-size: 16px;

        line-height: 1.8;

    }

    .article-body .article-lead {

        font-size: 21px;

        line-height: 1.55;

    }

    .article-body h2 {

        font-size: 29px;

        margin-top: 45px;

    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .article-sidebar {

        grid-template-columns: 1fr;

    }


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

    .related-articles {

        padding: 65px 0;

    }

    .related-header h2 {

        font-size: 38px;

    }

    .related-grid {

        grid-template-columns: 1fr;

    }

    .related-card-image {

        height: 220px;

    }

    .related-card-content {

        padding: 25px;

    }

    .related-card-content h3 {

        font-size: 24px;

    }


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

    .article-cta {

        padding: 70px 0;

    }

    .article-cta-content h2 {

        font-size: 45px;

    }

    .article-cta-content p {

        font-size: 15px;

    }

}


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

@media (max-width: 380px) {

    .article-hero h1 {

        font-size: 38px;

    }

    .article-main-image img {

        height: 300px;

    }

    .article-body .article-lead {

        font-size: 20px;

    }

    .article-body h2 {

        font-size: 27px;

    }

    .related-header h2 {

        font-size: 34px;

    }

    .article-cta-content h2 {

        font-size: 39px;

    }

}