.file-box {
    float: left;
    width: 170px;
}
.file .file-name {
    padding: 8px;
    font-size: 11px;
    height: 50px;
}

.file-box .file .image{
    height: 150px !important;
}

.file-box .file .image .img-fluid{
    height: auto;
    width: 80% !important;
}

.file {
    margin-bottom: 13px;
    margin-right: 10px;
}

/** Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .file-box {
        float: left;
        width: 170px;
    }
    .file .file-name {
        font-size: 11px;
    }
}

/** Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .file-box {
        float: left;
        width: 170px;
    }
    .file .file-name {
        font-size: 11px;
    }
}

/** Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .file-box .file .image{
        height: 180px !important;
    }
    .file-box {
        float: left;
        width: 210px;
    }
}

/** Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .file-box .file .image{
        height: 190px !important;
    }
    .file-box {
        float: left;
        width: 220px;
    }
    .file .file-name {
        padding: 10px;
        background-color: #f8f8f8;
        border-top: 1px solid #e7eaec;
    }

}