.clickable-image img {
    max-height: 300px;
}

.image-hover {
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.hover-container {
    cursor: pointer;
}

.hover-container:hover .image-hover {
    opacity: 0.3;
}

.hover-container:hover .middle {
    opacity: 1;
}


.image-description {
    position: absolute;
    bottom: 0%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 10px;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 55%;
    transform: translate(0%, -50%);
    width: auto;
    padding: 16px;
    margin-top: -16px;
    color: black !important;
    font-weight: bold;
    font-size: 70px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: -40px;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: -40px;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
        color: white!important;
    }

@media screen and (min-width: 1200px) {
}

@media (max-width: 1199px) and (min-width: 992px) {
}

@media (max-width: 991px) and (min-width: 768px) {
}

@media (max-width: 767px) and (min-width: 576px) {
}

@media screen and (max-width: 575px) {
}