.konten-berita{
    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<=655px){
    .form-cari{
        display: block !important;
        margin-top: 20px;
    }

    #cari{
        font-size: 9pt;
    }
}



@media screen and (width>1300px){
    .img-fluid{
    min-width:245px;
    min-height: auto;
    max-height: 245px;
    max-width: auto;
    }
    
    .list-group-item{
        min-height: 225px;
        max-height:245px;

    }
    
     h6{
        font-size: 14pt;
    } 
    p,small{
        font-size: 11pt ;
    }

}


@media screen and (width<=1300px) and (width>=772px){
    .list-group{
        display: flex;
        flex-direction: column;
    }

    .list-group-item{
        min-width: 375px;

    }

    .img-fluid{
        min-width: 225px;
    }

    h6{
        font-size: 16pt;
    } 
    p,small{
        font-size: 12pt ;
    }

}


@media screen and (width<772px) and (width>728px){
    .img-fluid{
        min-width: 304px;
        height: 270px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .no-paginasi{
        min-width: 500px;
    }

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

    .list-group-item{
        max-width: 304px;

    }

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

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

    a.list-group-item.list-group-item-action{
        max-height: 250px;
    }

}


@media screen and (width<=728px) and (width>=704px){
    .img-fluid{
        height: 270px;
        width:270px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

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

    .list-group-item{
        max-width: 270px;
    }

    .no-paginasi{
        min-width: 500px;
    }
}

@media screen and (width<704px) and (width>=559px){

    .img-fluid{
        min-width: 304px;
        min-height: 270px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

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

    .list-group-item{
        max-width: 304px;

    }

   
}


@media screen and (width<559px) and (width >= 423px){

    .img-fluid{
        min-width: 304px;
        min-height: 270px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

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

    .list-group-item{
        width: 304px;
     }

    h5{
        font-size: 10pt;
    }

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

   
}


@media screen and (width<423px) and (width>=357px){

    .img-fluid{
        max-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;
    } 
}



@media screen and (width < 500px){
 .item-paginasi{
    padding: 14px;
    margin-left: 0px;
    margin-right:0px;
    font-size: 11pt;
 }
}


@media screen and (width >= 500px ){
 .item-paginasi{
  padding: 16px;
  margin-left: 4px;
  margin-right: 4px;
  font-size: 11pt;
 }
}



@media screen and (width<357px) and (width>299px){

    .img-fluid{
        max-width: 200px !important;
        min-height: 166px;
    }

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

    .list-group-item{
        max-width: 200px;
    }

    .no-paginasi{
        margin-left: 10%;
    }

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