.row-cards {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, 265px);
    justify-content: center;
  }
.row-cards .heading{
  font-size: 18px !important;
    font-weight: 700;
    margin-top: 16px;
  margin-bottom: 16px !important;
  text-align: left;
}
  .card-image {
    height: 264px;
  }
  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.card-image a{
  cursor: auto !important;
}
  .card-col img {
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
    height: 264px !important;
  }
  .card-col .heading {
    color: #101014;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-align: left;
  }
  .card-col .description {
    color: #101014;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-align: left;
  }

@media only screen and (max-width: 980px){
  .row-cards {
    grid-template-columns: repeat(auto-fill,384px);
  }
}
@media only screen and (max-width: 480px){
  .row-cards {
    grid-template-columns: repeat(auto-fill,356px);
  }
}
.card-image{
    position:relative;
}
#overlay {
    border-radius: 8px; 
    background: rgba(0,0,0,.15);
    text-align: center; 
    opacity: 1;
    transition: opacity 0.25s ease 0s;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    position: absolute;
    top:0;
    pointer-events: none;
}
.card-col #overlay img {
    height: 160px !important;
    width: 78% !important;
}
.card-image:hover #overlay {
    opacity: 1;
    }

#plus {
    font-family:Helvetica;
    font-weight:900;
    color: #fff;
    font-size: 96px;
       
}