.home--card {
  width: 100%;
  padding-top: 100%;
  background-position: center;
  background-size: auto 100%;
  display: block;
}

.home--card:hover {
  background-size: auto 125%;
}

.home--card h2 {
  
  padding: 1rem 1.5rem;
  text-transform: uppercase;
  font-weight: bold !important;
  color: white;
  margin-bottom: .5rem;
  font-size: 13px !important;
  
  position: absolute;
  top: 2rem;
  background: BLACK;
  width: calc(100% - 30px);
  text-align: center;
  
  z-index: 10;
  
}

.home--card img {
  position: absolute;
  width: calc(50% - 16px);
  bottom: 0;
  right: 1rem;
  z-index: 10;
}

.home--card::before {
  position: absolute;
  top: 0;
  right: 15px;
  height: 100%;
  width: calc(100% - 30px);
  background: rgba(22, 162, 228, .5);
  content: " ";
  z-index: 2;
}

.home--card::after {
  position: absolute;
  top: 0;
  right: 15px;
  height: 100%;
  width: calc(50% - 15px);
  background: rgba(22, 162, 228, .75);
  content: " ";
  z-index: 5;
}

@media (max-width: 992px) {
	.home--card {
		height: 100px !important;		
		padding-top: 0%;
		display: block;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left;
	}
	.home--card img {
		width: 100px;
		height: 100px;
		top: 0;
		left: 15px;
	}
	.home--card h2 {
		background: none;
		font-size: 18px !important;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 100px;
		padding-left: 1rem;
    text-align: left;
    width: auto;
	}
	.home--card::before,
	.home--card::after {
		height: 100px;										
  }
  .home--card::before {
    background: rgba(22, 162, 228, .75);
  }
	.home--card::after {
		width: calc(100% - 130px);
		background: white;
		z-index: 1;
	}
}