.services {
  background: var(--soft);
}

.services-grid {
   display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.service-main {
  min-height: 360px;
  grid-column: span 1;
  border-radius: 30px;
  padding: 44px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.12);
  transition:
    transform .45s ease,
    box-shadow .45s ease,
    background-size .6s ease;
  box-shadow: 0 20px 55px rgba(0,0,0,.12);
}

.service-main:hover{
  transform: translateY(-8px);
  box-shadow: 0 35px 90px rgba(11,27,43,.22);
}

.service-main::after{
  content:"";
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    to top,
    rgba(11,27,43,.90) 8%,
    rgba(11,27,43,.55) 45%,
    rgba(11,27,43,.08) 100%
  );
  transition:.4s;
}

.service-main:hover::after{
  background:
  linear-gradient(
    to top,
    rgba(11,27,43,.95) 5%,
    rgba(11,27,43,.50) 42%,
    rgba(11,27,43,.05) 100%
  );
}

.service-main-content{
  position:relative;
  z-index:2;
}

.service-main .number{
  color:#e8d9b0;
  font-size:1rem;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:20px;
}

.service-main h3{
  font-size:clamp(2.2rem,4vw,3.2rem);
  line-height:.95;
  letter-spacing:-2px;
  margin-bottom:18px;
}

.service-main p{
  color:#d1d5db;
  max-width:520px;
  font-size:1.05rem;
  line-height:1.7;
}

.number{
  color:var(--gold);
  font-weight:800;
  margin-bottom:18px;
  font-size:.95rem;
  letter-spacing:2px;
}

.service-main.climatizacion{
    background-image:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("...");
}

.service-main.ventilacion{
    background-image:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("...");
}

.service-main.extraccion{
    background-image:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("...");
}

.service-main.mantenimiento{
    background-image:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("...");
}

.service-main::before{
    content:"";
    position:absolute;
    inset:0;
    background:inherit;
    background-size:cover;
    background-position:center;
    transition:transform .8s ease;
    z-index:0;
}

.service-main:hover::before{
    transform:scale(1.08);
}
@media (max-width: 900px){

    .services-grid{
        grid-template-columns:1fr;
    }

}