/* services-hero */
.services-hero__title {
  margin-bottom: 5rem;
}

.services-hero__img {
  display: block;
  width: calc(100% + 4 * var(--container-padding));
  height: auto;
  margin: 0 calc(-2 * var(--container-padding)) 2.7rem;
}

.services-hero__content {
  max-width: 64rem;
  margin-left: 76rem;
}

.services-hero__content .button {
  margin-top: 4rem;
}

/* services-list */
.services-list {
  --gap: 3.7rem;

  display: grid;
  gap: var(--gap);
}

.services-list__item:not(:has(.services-list__img)) {
  padding-bottom: var(--gap);
  border-bottom: 1px solid var(--gray-color);
}

.services-list__title {
  margin-bottom: 1rem;
}

.services-list__link {
  transition: color var(--transition-time) ease-in-out;
}

.services-list__info {
  display: grid;
  grid-template-columns: 1fr 1.6rem;
  gap: 4rem 1rem;
}

.services-list__description {
  max-width: 66rem;
}

.services-list__icon {
  color: var(--active-color);
}

.services-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.services-list__tags-link,
.services-list__tags-text {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 1px solid var(--gray-color);
  border-radius: 2rem;
  white-space: nowrap;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 120%;
  color: var(--gray-color);
}

.services-list__tags-link {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: 0.4rem;
  transition: color var(--transition-time) ease-in-out,
    background-color var(--transition-time) ease-in-out,
    border-color var(--transition-time) ease-in-out;
}

.services-list__img {
  display: block;
  height: auto;
  width: 100%;
  margin-top: 3rem;
}

@media (hover: hover) and (pointer: fine) {
  .services-list__link:hover {
    color: var(--active-color);
  }

  .services-list__tags-link:hover {
    background-color: var(--active-color);
    border-color: var(--active-color);
    color: var(--black);
  }
}

@media (max-width: 1024px) {
  .services-hero__img {
    width: calc(100% + 2 * var(--container-padding));
    margin-inline: calc(-1 * var(--container-padding));
  }

  .services-hero__content {
    max-width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 500px) {
  .services-hero__content .button {
    width: 100%;
  }
}