Cant get images responsive after a width of 1920

Question

i am struggling to get a card flip section fully responsive. I managed to get everything working and responsive but as soon as i hit a width of 1920px they cards to move apart and dont scale up in width. I don't know why since i set width etc all to 100%. Thanks a lot guys, i am kinda lost.

http://codepen.io/HendrikEng/pen/EgxamA

c-service {
    padding-bottom: span(.5);
}

.c-service__title {
    margin-top: span(.5);
    margin-bottom: span(.5);
}

.c-service__item__icon {
    position: relative;
    top: 20%;
    height: 120px;
    padding-bottom: span(2);
}

.services__item__content {
    position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.c-service__item--back p {
    font-size: 1.2em;
}
.c-service__item--back h5 {
    padding-top: 50px;
}
.c-service__item {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    //display: flex;
    //vertical-align: middle;
}
.c-service__item .c-service__item__content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
    display: flex;
    position: relative;
    width: 100%;
    width: auto;
}
.c-service__item.applyflip .c-service__item__content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}
.c-service__item .c-service__item__content .c-service__item--static {
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    text-align: center;
}
.c-service__item.applyflip .c-service__item__content .c-service__item--static {
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}
.c-service__item .c-service__item__content .c-service__item--back {
    background-color: blue;
    color: white;
    overflow: hidden;
    position: absolute;
    height:100%;
    width: 100%;
}
.c-service__item .c-service__item__content .c-service__item--back,
.c-service__item .c-service__item__content .c-service__item--front {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    overflow: hidden;
    text-align: center;
}
.c-service__item .c-service__item__content .c-service__item--front,
.c-service__item.applyflip .c-service__item__content .c-service__item--front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}
.c-service__item .c-service__item__content .c-service__item--back,
.c-service__item.applyflip .c-service__item__content .c-service__item--back {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}
.c-service__item .c-service__item__content .c-service__item--front,
.c-service__item.applyflip .c-service__item__content .c-service__item--back {
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.c-service__item .c-service__item__content .c-service__item--back,
.c-service__item.applyflip .c-service__item__content .c-service__item--front {
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}

@keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-webkit-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-moz-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-o-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-ms-keyframes donothing {
    0% {}
    100% {}
}

Answer 1

saw your solution, keep in mind that by setting height and width at 100% you must have a fixed square ratio of the image, if the image is rectangular it would be stretched.

Set it like this to avoid it:

.c-service__item--front {
    min-height: 100%;
    min-width: 100%;
}