@media screen and (width < 391px ){
    #logopu{
       height:30px;
       width:auto;
       padding-left: 10px;
    }

    #headpu{
            font-size: 18px;
    }


    #logokab{
        height:35px;
        width:auto;
        padding-left: 10px
    }

    #headkab{
        font-size: 12px;
    }
}


@media screen and (width > 390px){
    #logopu{
       height:40px;
       width:auto;
       padding-left: 10px;
    }

    #headpu{
        font-size: 21px;
    }


    #logokab{
        height:45px;
        width:auto;
        padding-left: 10px
    }

    #headkab{
        font-size: 16px;
    }
}

@media screen and (width >= 600px){

    a[name="list-berita"]{
        display: flex;
        height: max-content;

    }
    img[name="img-berita"]{
        height:250px;
        width: 250px;
        max-height: 200px;
        object-fit: cover;
        flex-shrink: 0;
    }


    a[name="list-artikel"]{
        display: flex;
        height: max-content;

    }
    img[name="img-artikel"]{
        height:250px;
        width: 250px;
        max-height: 200px;
        object-fit: cover;
        flex-shrink: 0;
    }

}


@media screen and (width <= 600px){

    div[name="baris-berita"]{
        display: block;
    }

    a[name="list-berita"]{
        display: block;
        height: 100%;
    }


    img[name="img-berita"]{
        max-height: 330px;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }


    div[name="baris-artikel"]{
        display: block;
    }

    a[name="list-artikel"]{
        display: block;
        height: 100%;
    }


    img[name="img-artikel"]{
        max-height: 330px;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    h6[name="judul-berita"]{
        padding-top:10px;
        padding-bottom: 10px;
    }
    small[name="tgl-berita"]{
        padding-top:10px;
    }


    h6[name="judul-artikel"]{
        padding-top:10px;
        padding-bottom: 10px;
    }
    small[name="tgl-artikel"]{
        padding-top:10px;
    }
}