/* ======================================
   DAFTAR ARTIKEL
====================================== */

.daftar-artikel-section{

    margin-top:40px;

    margin-bottom:40px;
}

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

.artikel-list{

    display:flex;

    flex-direction:column;

    gap:18px;
}

/* ======================================
   ITEM
====================================== */

.artikel-item{

    display:flex;

    gap:20px;

    padding-bottom:18px;

    border-bottom:1px solid #e5e7eb;
}

.artikel-item:last-child{

    border-bottom:none;
}

/* ======================================
   THUMBNAIL
====================================== */

.artikel-thumb{

    flex:0 0 260px;
}

.artikel-thumb img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:8px;

    display:block;
}

/* ======================================
   CONTENT
====================================== */

.artikel-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;
}

.artikel-content h3{

    font-size:18px;

    font-weight:700;

    line-height:1.4;

    color:#111827;

    margin-bottom:12px;

    transition:.3s;
}

.artikel-content h3:hover{

    color:#dc2626;
}

/* ======================================
   META
====================================== */

.artikel-meta{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:#6b7280;
}

.artikel-kategori{

    color:#2563eb;

    font-weight:600;
}

.artikel-dot{

    color:#9ca3af;
}

/* ======================================
   HOVER
====================================== */

.artikel-item:hover .artikel-thumb img{

    transform:scale(1.03);
}

.artikel-thumb img{

    transition:.3s;
}

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

@media(max-width:992px){

    .artikel-thumb{

        flex:0 0 220px;
    }

    .artikel-content h3{

        font-size:17px;
    }

}

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

@media(max-width:768px){

    .artikel-item{

        flex-direction:column;
    }

    .artikel-thumb{

        flex:auto;
    }

    .artikel-content h3{

        font-size:16px;
    }

}