@media (max-width: 768px) {

    /* paksa container jadi kotak */
    #head-blog ._pigura {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    #head-blog ._pigura img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

}

@media (max-width: 768px) {

    /* KUNCI KOTAK UTAMA */
    #head-blog {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden;
    }

    /* semua layer splide harus ikut penuh */
    #head-blog .splide__track,
    #head-blog .splide__list,
    #head-blog .splide__slide {
        height: 100% !important;
    }

    /* gambar wrapper ikut penuh */
    #head-blog ._pigura {
        width: 100%;
        height: 100%;
    }

    #head-blog ._pigura img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
}

#head-blog ._content {


    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;


    color: #fff !important;
}
	
  /* category hilang */
#head-blog ._category {
    display: none !important;
}

    /* judul rata kiri */
    #head-blog .elipsis.clamp2 {
        width: 100% !important;
        text-align: left !important;
        display: block !important;
        margin: 0 0 10px 0 !important;
    }

    /* detail rata kiri */
    #head-blog ._detail {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
    }



@media (max-width: 768px) {
    #feat-blog ._title {
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        position: relative !important;
        top: -16px !important; /* naik (-) / turun (+) */
    }
}

@media (max-width: 768px) {
    #feat-blog {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 30px !important;
        min-height: 50px !important;
        border-radius: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    
    }
}


/*Costum tulisan Headline*/
#head-blog .splide__track{
    position:relative !important;
    overflow:hidden !important;
    border-radius:25px !important;
}

#head-blog ._content{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2 !important;

    padding:35px 25px !important;

    background:linear-gradient(
        to top,
        rgba(33,33,33,1) 0%,
        rgba(33,33,33,0.98) 30%,
        rgba(33,33,33,0.88) 50%,
        rgba(33,33,33,0.65) 70%,
        rgba(33,33,33,0.35) 85%,
        rgba(33,33,33,0.12) 95%,
        rgba(33,33,33,0) 100%
    ) !important;
}

/* sembunyikan di desktop */
@media (min-width:1024px){

    #head-blog ._content{
        background:none !important;
    }

}

#head-blog .splide__track{
    position:relative !important;
}

#head-blog .splide__track::before{
    content:"Headline";

    position:absolute !important;

    top:10px !important;
    left:10px !important;

    background:#f8f7f8 !important;

    color:#212121  !important;

    font-size:15px !important;
    font-weight:700 !important;

    padding:2px 12px !important;

    border-radius:50px !important;

    z-index:999 !important;

    box-shadow:0 2px 10px rgba(0,0,0,.15) !important;

    pointer-events:none !important;
}

/* sembunyikan di desktop */
@media (min-width:1024px){

    #head-blog .splide__track::before{
        display:none !important;
    }

}