@import url(https://fonts.googleapis.com/css?family=Asul);

#card-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: center;

}
.card-border {
  flex: 0 0 350px;
/*   flex-basis: 350px; */
  position: relative;
  height: 200px;  
  border-radius: 3px;
  box-shadow: 2px 2px 5px gray;
  margin: 15px 5px;
  transition: box-shadow 0.3s ease; 
  overflow: hidden; 
  cursor: pointer;
}
.card-main-content {
  position: absolute;
  height: 75%;
  width: 100%;
}
.card-info {
  position: absolute;
  bottom: 8%;
  left: 2%;
}
.card-info p {
  font-family: 'Asul', sans-serif;
  margin: 0;
}
.card-border:hover {
  box-shadow:  0px 4px 14px rgb(126, 124, 124); 
}

$(document).ready(function() {
  var list = $('#card-group .card-main-content'), bc;
  for(var i=0;i<list.length;++i) {
    classList = list[i].classList.value.split(" ");
    if(!list[i].nextSibling.nextSibling)
        list[i].style.height = "100%";
    if(classList[1])
      list[i].style.backgroundColor = classList[1];
    else
      list[i].style.backgroundColor = '#4FC3F7';      
  }
});