.panel-media-list{
    margin-bottom: -10px;
}
.panel-media-list .panel-heading{
    margin-top: 25px;
}
.panel-media-list .panel-body{
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0; /* trick to have perfect spacing between list elements, however, the font will be normalised below*/
}

.panel-media-list .media-list{
    margin-bottom: 0;
    margin-top: -10px;
    
    padding-bottom: 10px; /* this is so the scrollbar doesn't cut the botton shadow */
}
.panel-media-list .media-list > *{
    padding: 0;
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
}
.panel-media-list .media-list > *{
    margin-left: 0;
    height: 275px;
    
    box-shadow: 0px 2px 4px #666;
    -moz-box-shadow:    0px 2px 4px #666;
    -webkit-box-shadow: 0px 2px 4px #666;
}
.panel-media-list .media-list > li{
    background-color: #EEE;
    font-size: 14px; /*normalize the fonts again*/
}
.panel-media-list .media-list > *:last-child{
    margin-right: 0;
}
.panel-media-list .media-object{
    height: auto !important;
   
    width: 100% !important;
 
    object-fit: cover;
    object-position: 0 0;
    
    position: absolute;
    left: 50%;
    top: 50%;
    
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.absolute-center-object{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    display: inline-block;
}
.panel-media-list .media-body{
    display: block; 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
    bottom: 0px; 
    background-color: rgba(0, 0, 0, 0.4); 
    color: rgb(255, 255, 255); 
    font-size: 12px; 
    padding: 11px;
}
.panel-media-list .media-body .media-heading{
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden;
}
.panel-media-list .media-body p{
    width: 100%; 
    white-space: nowrap; 
    display: block; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin: 0px;
    color: #cfcfcf;
}
@media (min-width: 992px) {
    .panel-media-list .media{
        width: 17%;
    }
}
@media (max-width:550px){
   .panel-media-list .media-list > *{
        height: 225px;
    } 
}
@media (max-width:450px){
   .panel-media-list .media-list > *{
        height: 180px;
    } 
}

.panel-title{
    font-size: 18px;
    font-weight: bold;
}