Images are width responsive but not height.

Site I am working on is 3 Peaks.

The 3 images with the text are responsive when shrinking the browser but only by their width and not the height.

Here is the code for them…

.threeflips {
  width: 100%;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
width: 33.33%;
  height: 400px;
float: left;
}

.flip-container:hover .flipper,
  .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.front, .back {
width: 100%;
height: 400px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}

.front {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}