Section avec Flip Card

  <section class="container">
    <div class="columns is-multiline is-flex is-justify-content-space-around is-desktop ">
      <div class="column flipCard">
        <div class="flipCardInner">
          <div class="flipCardFront">
            <img src="<?php echo get_template_directory_uri(); ?>/css/img/image1.jpg" alt="">
          </div>
          <div class="flipCardBack">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna rhoncus, dictum orci et, gravida mi. Etiam ut ex mi. Mauris ut mauris a est eleifend tempus.</p>
          </div>
        </div>
      </div>
      <div class="column flipCard">
        <div class="flipCardInner">
          <div class="flipCardFront">
            <img src="<?php echo get_template_directory_uri(); ?>/css/img/batman-icon.png" alt="">
          </div>
          <div class="flipCardBack">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna rhoncus, dictum orci et, gravida mi. Etiam ut ex mi. Mauris ut mauris a est eleifend tempus.</p>
          </div>
        </div>
      </div>
      <div class="column flipCard">
        <div class="flipCardInner">
          <div class="flipCardFront">
            <img src="<?php echo get_template_directory_uri(); ?>/css/img/batman-icon.png" alt="">
          </div>
          <div class="flipCardBack">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna rhoncus, dictum orci et, gravida mi. Etiam ut ex mi. Mauris ut mauris a est eleifend tempus.</p>
          </div>
        </div>
      </div>
      <div class="column flipCard">
        <div class="flipCardInner">
          <div class="flipCardFront">
            <img src="<?php echo get_template_directory_uri(); ?>/css/img/batman-icon.png" alt="">
          </div>
          <div class="flipCardBack">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna rhoncus, dictum orci et, gravida mi. Etiam ut ex mi. Mauris ut mauris a est eleifend tempus.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

.flipCard{
  width: 22%;
  height: 400px;
  background-color: transparent;
  flex: none;
  margin-bottom: 10px;
  padding: 0px;
}

.flipCardInner{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flipCard:hover .flipCardInner{
  transform: rotateY(180deg);
}

.flipCardFront, .flipCardBack{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flipCardFront{
  background-color: dodgerblue;
  color: black;
}

.flipCardFront img{
  display: block;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 400px;
}

.flipCardBack{
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width:768px){
  .flipCard{
    width: 45%;
  }
}

@media (max-width:426px){
  .flipCard{
    width: 100%;
  }

}