.cards {
  position: relative;
  padding: 20px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.cards .con {
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex: 0 0 33.333%;
  -ms-flex: 0 0 33.333%;
  flex: 0 0 33.333%;
  max-width: 33.333%;
  padding: 20px 30px;
}

.card {
  position: relative;
  color: rgb(255, 255, 255);
  background-color: #154268;
  border-radius: 8px;
  overflow: hidden;
}
.card-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}
.card-title {
  position: relative;
  padding: 20px 25px 5px;
  font-size: 25px;
  font-weight: 300;
}
.card-title:before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  background-color: #154268;
  border-radius: 50%;
  -webkit-transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1), opacity 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1), opacity 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card:hover .card-title:before {
  opacity: 0.8;
  transform: scale(0.6);
}
.card-description {
  padding: 5px 25px 20px;
}