.highlighted-services {
  padding: 2rem 1rem;
  background: var(--color-gray-light);
  --duration: 80s;
  overflow-x: hidden;
  white-space: nowrap;
}

.highlighted-services__content {
  --gap: 3.5rem;
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin-inline: auto;

  a {
    text-decoration: none;
    color: inherit;
  }
}

.highlighted-services__service.clone {
  display: none;
}

@media( width <= 700px) {
  .highlighted-services__content {
    --gap: 1.875rem;
  }

}
@media( width <= 600px) {
  .highlighted-services__content {
    --duration: 10s;
    padding-inline: calc((var(--gap)/2));
    animation: marquee var(--duration) linear infinite;
    width: max-content;
    &.clone {
      display: flex;
    }
  }
  .highlighted-services__service.clone {
    display: flex;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media( width >= 600px) {
  .highlighted-services__content {
    justify-content: center
  }
}

@media( width >= 1024px) {
  .highlighted-services {
    gap: 5rem;
    padding-block: 2.75rem;
  }
}

.highlighted-services__service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5625rem;
  font-size: var(--step-0);
  p {
    text-transform: capitalize;
    white-space: nowrap;
    margin-block: 0;
    position: relative;
    z-index: 1;
  }

  p::after {
    position: absolute;
    --height: 0.25em;
    left: 0;
    bottom: 0.25em;
    z-index: -1;
    display: inline-block;
    content: '';
    width: 100%;
    height: var(--height);
    background: var(--color-accent);
    border-radius: var(--height);

  }
  
  svg {
    height: 23px;
  }
}

@media( width >= 1024px) {
  .highlighted-services__service {
    line-height: 1.45;
    flex-direction: row;
  }
}