/* ==========================
   NEWS
========================== */

.news-page{

    max-width:1200px;

    margin:140px auto 120px;

    padding:0 32px;

}

.news-page h1{

    font-size:64px;

    font-weight:600;

    letter-spacing:.05em;

    margin-bottom:20px;

}

.news-intro{

    max-width:620px;

    font-size:16px;

    line-height:1.8;

    color:#aaa;

    margin-bottom:80px;

}


/* ==========================
   NEWS LIST
========================== */

.news-list{

    display:flex;

    flex-direction:column;

    gap:80px;

}


/* ==========================
   NEWS CARD
========================== */

.news-card{

    display:block;

    color:#fff;

    text-decoration:none;

    border-bottom:1px solid #222;

    padding-bottom:80px;

}


.news-image{

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    background:#111;

    margin-bottom:28px;

}


.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s ease;

}


.news-card:hover .news-image img{

    transform:scale(1.03);

}


/* ==========================
   TEXT
========================== */

.news-category{

    font-size:12px;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#888;

    margin-bottom:12px;

}


.news-date{

    font-size:14px;

    color:#777;

    margin-bottom:18px;

}


.news-title{

    font-size:36px;

    line-height:1.3;

    font-weight:600;

    letter-spacing:.03em;

}


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

@media(max-width:768px){

.news-page{

    margin:120px auto 80px;

    padding:0 20px;

}

.news-page h1{

    font-size:42px;

}

.news-title{

    font-size:26px;

}

.news-list{

    gap:60px;

}

.news-card{

    padding-bottom:60px;

}

}