#header {
  height: 480px;
  background-size: cover;
  background-position: center;
  --gradient-a: #B2853Faa 20%, #b2853f55 68%, #c2954fff;
  --gradient-b: -75deg, #1757a100, #d2855f88;
}

#header.limpieza {
  background-image: 
    linear-gradient(var(--gradient-a)),
    linear-gradient(var(--gradient-b)),
    url('../img/limpieza-lilux.jpg')
  ;
}

#header.parquizacion {
  background-image: 
    linear-gradient(var(--gradient-a)),
    linear-gradient(var(--gradient-b)),
    url('../img/parquizacion.jpg')
  ;
}

#header.mantenimiento {
  background-image: 
    linear-gradient(var(--gradient-a)),
    linear-gradient(var(--gradient-b)),
    url('../img/mantenimiento-lilux.jpg')
  ;
}

#header.insumos {
  background-image: 
    linear-gradient(var(--gradient-a)),
    linear-gradient(var(--gradient-b)),
    url('../img/insumos-lilux.jpg')
  ;
}

#header.construccion {
  background-image: 
    linear-gradient(var(--gradient-a)),
    linear-gradient(var(--gradient-b)),
    url('../img/construccion.jpg')
  ;
}

.servicios-cont {
  display: flex;
  flex-wrap: wrap;
}

.servicios-cont > * {
  flex: 1 1 350px;
}

.servicios-cont > div {
  margin-bottom: 1rem;
}

.cards > div {
  background: var(--clr-green);
  color: white;
  font-weight: 600;
  padding: 2rem;
  text-align: center;
}

.cards > div > i {
  font-size: var(--fnt-h2);
}

.cards > div > div {
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .cards {
    flex-direction: column;
  }
}