.services-page {
  background: var(--bg-gradient);
  color: var(--white);
  font-family: var(--type-body-font);
}

.services-hero {
  position: relative;
  min-height: clamp(14rem, 34vw, 30rem);
  background: var(--ink);
}

.services-hero__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: start end;
}

.services-hero h1 {
  margin: 0;
  padding-top: clamp(5.75rem, 7vw, 6.5rem);
  padding-right: clamp(10rem, 20vw, 28rem);
}

.services-image {
  display: block;
  width: 100%;
  height: clamp(16rem, 42vw, 34rem);
  overflow: hidden;
}

.services-image--hero {
  height: clamp(14rem, 34vw, 30rem);
}

.services-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.services-image--hero img {
  object-position: center top;
}

.services-image--intro img {
  object-position: center 5%;
}

.services-image--obras img {
  object-position: center 90%;
}

.services-image--hogares img {
  object-position: center 60%;
}

.services-image--oficinas img {
  object-position: center 80%;
}

.services-image--porteria img,
.services-image--seguridad img {
  object-position: center 77%;
}

.services-image--mantenimiento img {
  object-position: center 85%;
}

.services-intro,
.service-block {
  min-height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.65rem, 3vw, 2.7rem) clamp(1.3rem, 4.8vw, 4.25rem);
}

.services-intro p,
.service-block p,
.service-block h2 {
  line-height: 2rem;
}

.services-intro p,
.service-block p {
  margin: 0;
}

.services-intro--featured p {
  font-size: calc(var(--type-p-size));
}

.service-block p + p {
  margin-top: 0.35rem;
}

.service-block h2 {
  margin: 0 0 0.45rem;
}

.service-block h2:not(:first-child) {
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
}

.service-block--last {
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}