.shm-artikel{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


@media screen and (width>=785px){
    .img-artikel{
        max-width: 254px;
        max-height: 191px;
        min-height: 254px;
    
        /* width:200px; 
        height:160px; */
    }
    .caption-artikel{
        bottom:20px; 
        position:absolute; 
        justify-content:space-between;
        width: 75%;
    }
    
    .ringkasan-artikel{
        font-size: 13pt;
    }
    
    h5{
        font-size: 17pt;
    }
    
    small{
        font-size: 10pt;
    }
    
}


@media screen and (width<=785px) and (width>=650px){
.img-artikel{
    max-width: 254px;
    max-height: 191px;
    min-height: 254px;

}
.caption-artikel{
    bottom:20px; 
    position:absolute; 
    justify-content:space-between;
    width: 75%;
}

.ringkasan-artikel{
    font-size: 11pt;
}

h5{
    font-size: 15pt;
}

small{
    font-size: 10pt;
}

}

@media screen and (width<650px) and (width>550px){

    .neks-artikel, .isi-artikel, .prev-artikel{
        justify-content: center;
        align-items: center;
    }

    .konten-artikel{
        display: block !important; 
    }
    .img-fluid{
        width: 300px;
        height: 300px;
    }

    .list-group{
        display: flex;
        flex-direction: column;
    }

    .list-group-item{
        max-width: 300px;
        min-height: auto;

    }

    div.d-flex.pb-2.w-100 {
        flex-wrap: nowrap !important;
    }

    h5{
        font-size: 11pt;
    }
     p,small{
        font-size: 10pt;
    }


}

@media screen and (width<=550px) and (width>481px){
    
    .konten-artikel{
        display: block !important; 
        margin-top: 5%;
    }

    .img-fluid{
        width: 300px ;
        min-height: auto;
        max-height: fit-content;
    }

    .list-group{
        display: flex;
        flex-direction: column;
    }

    .list-group-item{
        max-width: 300px;
        min-height: auto;
        max-height: fit-content;

    }

    div.d-flex.pb-2.w-100 {
        flex-wrap: nowrap !important;
    }

    h5{
        font-size: 10pt;
    }
    p,small{
        font-size:9pt;
    }


}

@media screen and (width<=481px) and (width>375px){
    
    .konten-artikel{
        display: block !important; 
        margin-top: 5%;
    }

    .img-fluid{
        width: 250px ;
        min-height: auto;
        max-height: fit-content;
    }

    .list-group{
        flex-direction: column;
    }

    .list-group-item{
        width: 250px;
        min-height: auto;
        max-height: fit-content;

    }

    div.d-flex.pb-2.w-100 {
        flex-wrap: nowrap !important;
    }

    h5{
        font-size: 10pt;
    }
    p,small{
        font-size:9pt;
    }


}

@media screen and (width<=375px) and (width>280px){
    .konten-artikel{
        display: block !important; 
        margin-top: 5%;
    }
    
     .img-fluid{
        width: 330px;
        min-width:310px;
        max-height: 300px;
        min-height:280;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .list-group{
        display: flex;
        flex-direction: column;
    }

    .list-group-item{
        max-width: 330px;
        min-width:310px;
    }

    h5{
        font-size: 9pt;
    }
    p,small{
        font-size: 8pt;
    } 
    
    
}