.grid-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   max-width: 400px;
   margin: 0 auto;
   grid-gap: 5px;
   padding: 0 20px;
}


.flip-text {
   color: #000;
}

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

.front {
   z-index: 1;
   width: 100%;
   height: 125px;
}

.grid {
   display: grid;
   grid-gap: 5px;
   align-content: center;
}


.back {
   background-color: #fff;
   z-index: 2;
   width: 100%;
   height: 125px;
   transform: rotateY(180deg);
}

.flip-container, .front, .back {
   width: 100%;
   height: 125px;
}

.flip-container {
   perspective: 1000px;
}

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

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

h2 {
   margin-bottom: 20px;
   margin-top: 22px;
}

.border-fr {
   margin-top: 75px;
   border-top: 2px solid #fff;
   padding-top: 25px;
}

.marg-but {
   margin-top: 35px;
}

.col-fr-3 {
   grid-column: span 2;
}







@media only screen and (min-width:730px) {

   .grid-container {
      grid-template-columns: repeat(8, 1fr);
      grid-gap: 5px;
      max-width: 710px;
      margin: 0 auto;
      padding: 0;
  }

   .front {
      z-index: 1;
      width: 175px;
      height: 125px;
   }

   .back {
      background-color: #fff;
      z-index: 2;
      width: 175px;
      height: 125px;
      transform: rotateY(180deg);
   }
   
   .flip-container, .front, .back {
      width: 175px;
      height: 125px;
   }

   h2 {
      margin-bottom: 10px;
   }

   .border-fr {
      margin-top: 20px;
      border-top: 2px solid #fff; 
   }

   .marg-but {
      margin-top: 45px;
   }
   
   .col-fr-3 {
      grid-column: span 2;
   }


   .parallax-image1 {
      height: 50vh;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      margin-top: 100px;
      margin-bottom: 100px;
   }
   
   .parallax-image1:nth-child(1) {
      background-image: url(../img/Parallax_1_fr_tab.jpg);
   }


   
}




@media only screen and (min-width:1200px) {

   .grid-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 20px;
      max-width: 1180px;
      margin: 0 auto;
      padding: 0;
  }

   .front {
      z-index: 1;
      width: 280px;
      height: 190px;
   }

   .back {
      background-color: #fff;
      z-index: 2;
      width: 280px;
      height: 190px;
      transform: rotateY(180deg);
   }
   
   .flip-container, .front, .back {
      width: 280px;
      height: 190px;
   }

   h2 {
      margin-bottom: 30px;
   }

   .border-fr {
      margin-top: 40px;
      border-top: 2px solid #fff;
   
   }
   
   .marg-but {
      margin-top: 45px;
   }
   
   .col-fr-3 {
      grid-column: span 3;
   }


   .parallax-image1 {
      height: 70vh;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      margin-top: 100px;
      margin-bottom: 100px;
   }
   
   .parallax-image1:nth-child(1) {
      background-image: url(../img/Parallax_1_fr_desk.jpg);
   }

   
}