/* ======================================
   TOPIK PILIHAN
====================================== */

.topik-pilihan-section{

    margin-top:40px;

    margin-bottom:40px;
}

/* ======================================
   GRID
====================================== */

.topik-grid{

    display:grid;

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

    gap:25px;
}

/* ======================================
   COLUMN
====================================== */

.topik-column{

    display:flex;

    flex-direction:column;
}

/* ======================================
   FEATURED
====================================== */

.topik-featured{

    position:relative;

    overflow:hidden;

    border-radius:10px;

    margin-bottom:15px;
}

.topik-featured img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;
}

.topik-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:15px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.2),
        transparent
    );
}

.topik-overlay h3{

    color:#fff;

    font-size:24px;

    line-height:1.3;

    font-weight:700;
}

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

.topik-list{

    list-style:none;

    padding:0;

    margin:0;
}

.topik-list li{

    padding:14px 0;

    border-bottom:1px solid #e5e7eb;

    font-size:15px;

    line-height:1.5;

    color:#111827;

    cursor:pointer;

    transition:.3s;
}

.topik-list li:hover{

    color:#dc2626;
}

/* ======================================
   LINK
====================================== */

.topik-more{

    margin-top:15px;

    color:#2563eb;

    font-size:14px;

    font-weight:600;

    text-decoration:none;
}

.topik-more:hover{

    color:#dc2626;
}

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

@media(max-width:992px){

    .topik-grid{

        grid-template-columns:1fr 1fr;
    }

}

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

@media(max-width:768px){

    .topik-grid{

        grid-template-columns:1fr;

        gap:30px;
    }

    .topik-overlay h3{

        font-size:20px;
    }

}