// Styles defining image hover effects: .img-hover__img-wrapper {

margin: 0 0 15px;
right: 0;

}

@media (min-width:767px) {

.img-hover__img-wrapper {
  margin: 0 0 30px;
}

}

.img-hover__img-link {

border-radius: 5px;
cursor: pointer;
display: block;
margin: 0 auto;
max-width: 400px;
overflow: hidden;
position: relative;

}

.img-hover__hover {

background: $primary-blue;
border-color: $primary-red;
border-radius: 5px;
border-style: solid;
border-width: 5px;
height: 100%;
position: absolute;
transition: opacity ease .5s;
width: 100%;
z-index: 2;
opacity: 0;
&--inverse {
  opacity: .7;
}

}

.img-hover__hover:hover, .img-hover__thumb-caption:hover + .img-hover__hover { // Needed to make hover affect work when hovering the thumbnail caption

opacity: .85;

}

.img-hover__hover–inverse:hover, .img-hover__thumb-caption:hover + .img-hover__hover–inverse { // Needed to make hover affect work when hovering the thumbnail caption

opacity: 0;

}

.img-hover__img-ease {

transition: transform 1s ease-in-out;

}

.img-hover__img-hover img.img-hover__img-ease {

transform: scale(1.2);

}

.img-hover__thumb-caption {

color: $white;
font-size: 20px;
height: 20px;
margin-top: -12px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: 3;

}