.titleWrapper {
  width: 100%;
  height: 100px;
  // display: flex;
  // flex-direction: column;
  position: absolute;
  top: 10em;
  h3 {
    text-align: center;
    text-anchor: middle;
    color: #609595;
    z-index: 100;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 1.6em;
  }
  h5 {
    text-align: center;
    text-anchor: middle;
    color: #609595;
    z-index: 100;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    font-size: 1.1em;
  }
}
.contentWrapper {
  z-index: 300;
  width: 100%;
  min-height: 250px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10em;
}

.imgWrapper {
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  height: auto;
  width: 90%;
  &:hover {
    // box-shadow: 0 1px 10px -1px rgba(255, 255, 255, 0.3),
    //   0 4px 3px -1px rgba(255, 255, 255, 0.3);
    animation: cardHover 0.5s forwards;
    -webkit-animation: cardHover 0.5s forwards;
  }
}

@keyframes cardHover {
  from {
    width: 90%;
  }
  to {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .titleWrapper {
    display: none;
  }
  .contentWrapper {
    margin-top: 5em;
  }
  .imgWrapper {
    width: 60%;
    height: 60%;
    pointer-events: none;
  }
}
