#knowledge_base_section .et_pb_image_wrap {
    border-radius: 10px 10px 10px 10px;
    box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.3);
    border: 1px black solid;    
}

/* init a few things */
.card {
  position: relative;
}
.card_image span {
  background-color: #555555;
}
/* up to large phone */
@media (max-width: 480px) {
    .card_text p {
      line-height: 1.1em;
      width: 250px;
    }
}
@media (min-width: 481px) {
    .card_text p {
      line-height: 1.1em;
      width: 300px;
    }
}
/* change image opacity to reveal grey background */
.card_image img {
  opacity: 1;
  transition: opacity ease-out 250ms;
}
.card_image span:hover img {
  opacity: 0.4;
}
/* position text in center of image and animate opacity */
.card_text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:white;
  transition: opacity ease-out 250ms;
  opacity: 0;
}
.card_text h3 {
  color: white;
}
.card_image span:hover .card_text {
  opacity: 1;
}
/* animate crossed edges */
.card_image span::before,
.card_image span::after {
  content: '';
  position: absolute;
  inset: 1.25em;
}
.card_image span::before {
  transform: scale(0, 1);
  transition: transform ease-out 250ms;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
.card_image span:hover::before {
  transform: scale(1.05, 1);
}
.card_image span::after {
  transform: scale(1, 0);
  transition: transform ease-out 250ms;
  border-left: 1px solid white;
  border-right: 1px solid white;
}
.card_image span:hover::after {
  transform: scale(1, 1.05);
}