.content-grid-block {
    background: #ffffff;
}
.content-grid-block.block-background-grey {
background-color: #E9E9E9;
}

.card-wrapper {
     display: inline-block;
     perspective: 1000px;
     position: relative;
}
.card-wrapper .card {
    position: absolute;
    cursor: pointer;
    transition-duration: 0.6s;
    transition-timing-function: ease-in-out;
    transform-style: preserve-3d;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-wrapper .card .front, .card-wrapper .card .back {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateX(0deg);
    position: absolute;
    text-align: center;
}
 .card-wrapper .card .front {
     z-index: 2;
}
 .card-wrapper .card .back, .card-wrapper.flip-right .card .back {
     transform: rotateY(180deg);
}
 .card-wrapper:hover .card, .card-wrapper.flip-right:hover .card {
     transform: rotateY(180deg);
}
 .card-wrapper.flip-left .card .back {
     transform: rotateY(-180deg);
}
 .card-wrapper.flip-left:hover .card {
     transform: rotateY(-180deg);
}
 .card-wrapper .card .back {

}

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.card-wrapper {
  display: flex;
  padding: 0;
  margin-bottom: 0;
}
.card {
  width: 100%;
}

 .card .front, .card .back {
     display: flex;
     align-items: center;
     justify-content: center;
}
 .card .front {
     color: #2E3192;
     background: #FFFFFF;
}
 .card .back {
     color: #FFFFFF;
     background: #2E3192;
}

.card h2 {
     width: 100%;
}
.card .front h2 {
    margin-bottom: 0;
}
.card .back h2 {
    color: #fff;
     margin-bottom: 25px;
}
 .card .front img {
     margin-bottom: 25px;
 }
.front-inner, .back-inner {
    padding: 0 15%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}



@media all and (max-width: 1366px) {
.card-wrapper {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
}
}
@media all and (max-width: 1023px) {
.card-container {
    grid-template-columns: repeat(2, 1fr);
}
}
@media all and (max-width: 660px) {
.card-container {
    grid-template-columns: repeat(1, 1fr);
}
}