.services article {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 280px;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.services article::before,
.services article::after {
  position: absolute;
  inset: 0;
  content: "";
}

.services article::before {
  z-index: -2;
  background-position: center;
  background-size: cover;
  transition: transform .35s ease;
}

.services article::after {
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 18, 29, .12) 5%, rgba(4, 18, 29, .9) 88%);
}

.services article:hover::before { transform: scale(1.04); }
.services article:hover { color: #fff; }
.services article p { color: rgba(255, 255, 255, .86); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.services article h3 { text-shadow: 0 2px 5px rgba(0, 0, 0, .4); }
.services article i { border: 1px solid rgba(255, 255, 255, .3); background: rgba(5, 25, 39, .88); backdrop-filter: blur(4px); }

.service-plumbing::before { background-image: url("service-plumbing.webp"); }
.service-heating::before { background-image: url("service-heating.webp"); }
.service-cylinders::before { background-image: url("service-cylinders.webp"); }
.service-ashp::before { background-image: url("service-ashp.webp"); }
.service-electrical::before { background-image: url("service-electrical.webp"); }
.service-landlords::before { background-image: url("service-landlords.webp"); }

@media (max-width: 620px) {
  .services article { min-height: 260px; }
}