.grids {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color:#FFFFFF;
}

.card01-one {
  grid-column: 1/4;
}

.card01-two {
  grid-column: 1/4;
}

.card01-three {
  grid-column: 1/4;
}

.card01-four {
  grid-column: 1/4;
}

.card01-five {
  grid-column: 1/4;
}

.card01-six {
  grid-column: 1/4;
}

.card01-seven {
  grid-column: 1/4;
}

.card01-eight {
  grid-column: 1/4;
}
.card01-nine {
  grid-column: 1/4;
}

.card01 {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 220px;
  width: 100%;
  transition: all ease-in-out 5s;
  cursor: pointer;
}

.card01:hover {
  transform: scale(1.05);
}

.card01:active {
  transform: translateY(-1px);
}

.card01__side {
  transition: all 0.8s ease;
  color: white;
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 100%;
  backface-visibility: hidden;
 /* box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.4); */
  border-radius: 8px;
}

.card01__side--front {
  background-color: #2196f3;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card01__side--back {
  background-color: #303f9f;
  transform: rotateY(180deg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.showGreen {
  transform: rotateY(-180deg);
}

.showRed {
  transform: rotateY(0);
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.text-box-top {
  font-size: 15px;
  text-shadow: 2px 2px 10px #0000006c;
  font-weight: 400;
}

.text-box-middle {
  font-size: 20px;
  font-weight: 700;
  text-shadow: 2px 2px 10px #0000006c;
}

.text-box-lower {
  font-size: 10px;
  text-shadow: 2px 2px 10px #0000006c;
  font-weight: 400;
}

.heading {
  transition: all 0.6s linear;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

.show {
  visibility: visible;
  opacity: 1;
}

#front-1 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/aerospace.jpg");
}

#front-2 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/automative.jpg");
}

#front-3 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/electricity.jpg");
}

#front-4 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/hydraulics.jpg");
}

#front-5 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/marine.jpg");
}

#front-6 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/measuring.jpg");
}

#front-7 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/medical.jpg");
}

#front-8 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/oilandgas.jpg");
}

#front-9 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.7)
    ),
    url("../images/product/rail.jpg");
}

/* Back */

#back-1 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/aerospace01.jpg");
}

#back-2 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/automative01.jpg");
}

#back-3 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/electricity01.jpg");
}

#back-4 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/hydraulics01.jpg");
}

#back-5 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/marine01.jpg");
}

#back-6 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/measuring01.jpg");
}

#back-7 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/medical01.jpg");
}

#back-8 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/oilandgas01.jpg");
}

#back-9 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("../images/product/rail01.jpg");
}


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

  .grids {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .card01-one {
    grid-column: 1/1;
  }

  .card01-two {
    grid-column: 2/2;
  }

  .card01-three {
    grid-column: 3/3;
  }

  .card01-four {
    grid-column: 4/4;
  }

  .card01-five {
    grid-column: 5/5;
  }

  .card01-six {
    grid-column: 6/6;
  }

  .card01-seven {
    grid-column: 7/7;
  }

  .card01-eight {
    grid-column: 8/8;
  }

  .card01-nine {
    grid-column: 9/9;
  }

}