.banner {
  background: url('../../img/content/Elipse.svg') no-repeat top left,
    url('../../img/content/Elipse.svg') no-repeat top right,
    url('../../img/content/Elipse.svg') no-repeat top;
  background-size: 700px, 0, 0;
  background-position: 20% -20%, 70% -180px, 95% 6vh;
  background-color: var(--primary-color);
  color: white;
  padding-top: 2rem;
  padding-bottom: 10rem;
}

.banner h1 {
  font-size: var(--fs-4);
  max-width: 10ch;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.hero-card {
  margin-top: -10rem;
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--primary-color);
  background-color: var(--white);
  max-width: var(--large-screens-width);
}

.hero-card img {
  margin-bottom: 2rem;
  width: 100%;
  object-fit: cover;
}
.hero-card__content .primary-btn {
    padding: 1rem 3rem;
}

.servicios__listing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem;
  margin-top: 2rem;
}

.servicio__item {
  max-width: 30rem;
  flex-grow: 0;

  display: flex;
  flex-direction: column;
}

.servicio__item img {
  object-fit: cover;
  width: 100%;
  margin-top: auto;
}

@media (width <= 992px) {
  section.highlight-banner {
    padding-bottom: 0;
  }
}

.highlight-banner .col-lg-10 {
  background: url('../../img/content/Elipse.svg');
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: -20% -200px;
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: 6rem 2rem;
}
.highlight-banner h2,
.highlight-banner p {
  max-width: 50ch;
  margin-inline: auto;
}

.highlight-banner h2 {
  font-weight: var(--fw-500);
}

/* Media queries Desktop */

@media (width >= 992px) {
  .banner {
    padding-top: 2rem;
    background-size: 700px, 20vw, 10vh;
  }

  .hero-card {
    display: flex;
    align-items: center;
    margin-inline: auto;
    padding-bottom: 0;
  }
  .hero-card img {
    margin-bottom: 0;
    max-width: 40%;
  }

  .hero-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 65ch;
    margin-inline: auto;
    padding-inline: 2rem;
  }

  .hero-card__content .primary-btn {
    margin-inline: auto;
  }

  .servicio__item {
    max-width: calc(33% - 3rem);
  }

  .servicio__item:not(:last-child) {
    margin-bottom: 0rem;
  }
}