/* -- The root styles must go in the element of the structure with the name "Card". --*/
.card-process-7__wrapper{
  counter-increment: item;

  /* Horizontal line between cards, except for the last one */
  &:not(:last-child):before{
    content: '';
    width:var(--space-m);
    height: 0px;
    border-block-start: 1px dashed var(--dark-40);
    position: absolute;
    left: 100%;
    z-index: -1;
  }

  /* Tablet Styles */
  @media (max-width: 991px) {
    /* Hide pseudo-element on the 2nd and last cards */
    &:nth-child(2)::before{
      border: none;
    }
  }

  /* Mobile Styles */
  @media (max-width: 767px) {
    /* Convert line to vertical between cards, except for the first one */
    &:not(:first-child):before,
    &:nth-child(2)::before {
      content: '';
      width: 0;
      height: var(--space-3xl);
      border-block-start: none;
      border-inline-start: 1px dashed var(--dark-40);
      position: absolute;
      left: 50%;
      bottom: 100%;
      z-index: -1;
    }
    /* Remove the pseudo-element from the first card to avoid errors */
    &:nth-child(1)::before{
      border: none;
    }
  }

  .card-process-7__step {
    /* Styles and configuration of the outgoing card counter */
    &:after {
      /* You can remove the text “decimal-leading-zero” if you do not want the number to have a leading zero. */
      content: counter(item, decimal-leading-zero);
    }
  }
}