.box-kotak{
    display : flex;
    flex-wrap : wrap; 
    justify-content: space-around;

}
    .box-gambar{
        width:210px;
        height:310px;
        overflow: hidden;
        margin-bottom:10px;
    }
        .box-gambar .figure-img{
            height:100%;
            margin-left: 50%;
            transform: translateX(-50%);
        }
    .box-judul{
        position:relative;
        width:210px;
    }
        .box-judul .figure-caption{
            position:relative;
            bottom:10px;
            width:100%;
            padding:5px;
        }
.list-box{
     list-style :none;  
     padding:10px;
     margin:0; 
}
.list-box-item{
    border-bottom:1px solid gray;
    padding:5px;
    color:gray;
}
.list-box a{
    text-decoration: none;
}
.list-box-item:hover{
    background-color: gray;
    color:white;
}
/*===Tablet Style===*/
@media only screen and (min-width: 481px) and (max-width: 900px){  
    .box-gambar{
        width:200px;
        height:290px;
    }
    .box-judul{
        width:200px;
    }
}
/*===Smartphone Style===*/
@media only screen and (max-width: 480px){ 
    .box-gambar{
        width:180px;
        height:260px;
    }
    .box-judul{
        width:180px;
        }
        .box-judul .figure-caption{
            display:block;
        }
}