.related-services {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.related-services h3 {
  margin-bottom: 1.5rem;
}

.related-services__intro {
  margin-bottom: 2rem;
}

.related-services__links {
  display: flex;
  border-top: 1px solid rgba(255,255,255,.34);
}

.related-services__link {
  position: relative;
  flex: 1;
  padding: 1.375rem 2rem 1.375rem 0;
  font-size: 1.125rem;
  font-weight: 300;
  letter-spacing: .08em;
  text-decoration: none !important;
  transition: color .25s ease, padding-left .25s ease;
}

.related-services__link + .related-services__link {
  padding-left: 2rem;
  border-left: 1px solid rgba(255,255,255,.34);
}

.related-services__link::after {
  margin-left: .8rem;
  color: var(--color-1);
  content: "→";
  opacity: 0;
  transition: opacity .25s ease, margin-left .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .related-services__link:hover {
    padding-left: .625rem;
    color: var(--color-1) !important;
  }

  .related-services__link:hover::after {
    margin-left: 1.125rem;
    opacity: 1;
  }

  .related-services__link + .related-services__link:hover {
    padding-left: 2.625rem;
  }
}

@media (max-width: 575.98px) {
  .related-services {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .related-services__links {
    display: block;
  }

  .related-services__link {
    display: block;
    padding: 1.25rem 0;
  }

  .related-services__link + .related-services__link {
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.34);
    border-left: 0;
  }

  .related-services__link + .related-services__link:hover {
    padding-left: .625rem;
  }
}
