body{
    background:#000;
    color:white;
    font-family: "Montserrat", sans-serif;
}

/* =====================
   HEADER
===================== */


.article-header {
    height:217px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.article-header h1 {
    position:relative;
    z-index:3;
    color:white;
    font-size:56px;
    font-weight:300;
    letter-spacing:4px;
}

/* =====================
   BACKGROUND
===================== */

.article-background {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
}

.background-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    transform:scale(1);
    transition: opacity 2s ease, transform 8s ease;
}

.background-image.active {
    opacity:1;
    transform:scale(1.08);
}

.article-background::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:rgba(0,0,0,0.55);
}

/* =====================
   CROSS
===================== */

.close-icon {
    position:absolute;
    top:35px;
    left:50%;
    transform:translateX(-50%);
    width:45px;
    height:45px;
    z-index: 5;
}

.close-icon span {
    position:absolute;
    width:35px;
    height:2px;
    background:white;
    left:5px;
    top:22px;
    transition:.4s ease;
}

.close-icon span:first-child {
    transform:rotate(45deg);
}

.close-icon span:last-child {
    transform:rotate(-45deg);
}

.close-icon:hover span:first-child {
    transform: rotate(0deg) translateY(-7px);
    width:22px;
}

.close-icon:hover span:last-child {
    transform: rotate(0deg) translateY(7px);
    width:22px;
}

.articles{
    min-height:calc(100vh - 217px);
    margin:auto;
    padding:50px 8%;
}

.articles-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.article-card{
    position:relative;
    min-height:420px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    text-decoration:none;
    color:white;
    background:#000;
}

.article-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.05);
    transition:.55s;
}

.article-overlay{
    position:absolute;
    inset:0;
    background:#000;
    transition:.45s;
}

.article-content{
    position:relative;
    z-index:2;
    padding:40px;
    height:100%;
    display:flex;
    flex-direction:column;
}

.article-date{
    color:#b3b3b3;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.article-type{
    margin-top:18px;
    color:#d8a75b;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:2px;
}

.article-content h2{
    margin-top:18px;
    font-size:38px;
    line-height:1.15;
}

.description{
    margin-top:25px;
    color:#c9c9c9;
    line-height:1.8;
    transition:.35s;
}

.article-card:hover .description{
    opacity:0;
    transform:translateY(20px);
}

.article-card:hover .article-bg{
    opacity:1;
    transform:scale(1);
}

.article-card:hover .article-overlay{
    background:rgba(0,0,0,.45);
}

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

@media (max-width: 900px) {


    /* HEADER */

    .article-header {

        height:180px;

    }


    .article-header h1 {

        font-size:38px;

        letter-spacing:2px;

        text-align:center;

    }



    .close-icon {

        top:25px;

        width:40px;

        height:40px;

    }



    /* ARTICLES */


    .articles {

        min-height:calc(100vh - 180px);

        padding:35px 20px;

    }



    .articles-grid {

        grid-template-columns:1fr;

        gap:25px;

    }



    /* CARD */


    .article-card {

        height:360px;

    }



    .article-content {

        padding:25px;

    }



    .article-content h2 {

        font-size:28px;

    }



    .article-date,
    .article-type {

        font-size:14px;

    }



    .description {

        font-size:16px;

    }


}





@media (max-width:480px) {



    .article-header h1 {

        font-size:32px;

    }



    .article-card {

        height:320px;

    }



    .article-content h2 {

        font-size:24px;

    }



    .article-content {

        padding:20px;

    }


}