/*==================================
            PAGE HERO
===================================*/

.page-hero{

    text-align:center;

    max-width:760px;

    margin:0 auto;

    padding:1rem 0 1rem;

}

.page-hero h1{

    font-size:clamp(2.6rem,5vw,4rem);

    font-weight:400;

    margin-bottom:1rem;

}

.page-hero p{

    max-width:680px;

    margin:0 auto;

    color:#000000;

    line-height:1.8;

}

/* Tablet */

@media (max-width:991.98px){

    .page-hero{

        padding:3rem 0 2rem;

    }

}

/* Mobile */

@media (max-width:767.98px){

    .page-hero{

        padding:2rem 0 1rem;

    }

}

.page-hero h1{
    color:#009893;
}

/*==================================
            BLOG LIST
===================================*/

.blog-list-section{

    padding:2rem 0 3rem;

}

.article-card{

    height:100%;

    background:var(--white);

    border:1px solid rgba(0,37,42,.15);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:0 5px 0 #00252A;

    transition:var(--transition);

}

.article-card:hover{

    transform:translateY(-8px);

    box-shadow:0 10px 0 #00252A;

}

.article-image{

    width:100%;

    display:block;

    aspect-ratio:16/10;

    object-fit:cover;

}

.article-content{

    padding:2rem;

}

.article-content h2{

    font-size:1.8rem;

    font-weight:400;

    margin-bottom:1rem;

}

.article-content p{

    color:#000000;

    line-height:1.8;

    margin-bottom:2rem;

}

/*==================================
            RESPONSIVE
===================================*/

@media(max-width:991.98px){

    .blog-list-section{

        padding:2rem 0 4rem;

    }

    .article-content{

        padding:1.75rem;

    }

}

@media(max-width:767.98px){

    .blog-list-section{

        padding:2rem 0 3rem;

    }

    .article-content{

        padding:1.5rem;

    }

    .article-content h2{

        font-size:1.5rem;

    }

}