ul.stepper {
    
    gap: 1em;
  }
  
  ul.stepper > li::before {
    
    justify-self: center;
    
    width: 0.1em;
    height: calc(100% - var(--default-line-height-rem));
    
    position: relative;
    top: var(--default-line-height-rem);
    
    background-color: var(--colour-brand-main);
  }
  
  ul.stepper > li::after {
    
    mask-size: 0.75em;
    background-color: var(--colour-brand-main);
  }
    
  @media screen and (min-width: 700px) {
    
    ul.stepper {
      
      gap: 0;
    }
    
    section:has(div + ul.stepper) > div {
      
      max-width: 32em;
    }
    
    ul.stepper > li {
      
      grid-template-columns: 1fr auto 1fr;
      gap: 2rem;
    }
    
    ul.stepper > li:nth-child(2n) > div {
      
      grid-column: 1;
    }
    
    ul.stepper > li:nth-child(2n+1) > div {
      
      grid-column: 3;
    }
    
    ul.stepper > li::before,
    ul.stepper > li::after {
      
      grid-column: 2;
    }
  }