<div class="stepper">
  <ol>
    <li>
      <svg viewBox="0 0 512 512" width="100" title="asterisk">
        <path d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
      </svg>
      <div class="stepper-content">
        <h3>Step 1</h3>
        <span>Description</span>
      </div>
    </li>
    <li>
      <svg viewBox="0 0 512 512" width="100" title="asterisk">
        <path d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
      </svg>
      <div class="stepper-content">
        <h3>Step 2</h3>
        <span>Description</span>
      </div>
    </li>
    <li>
      <svg viewBox="0 0 512 512" width="100" title="asterisk">
        <path d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
      </svg>
      <div class="stepper-content">
        <h3>Step 3</h3>
        <span>Description</span>
      </div>
    </li>
  </ol>
</div>

<div class="stepper">
  <ol>
    <li>
      <svg viewBox="0 0 512 512" width="100" title="asterisk">
        <path d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
      </svg>
      <div class="stepper-content">
        <h3>Step 1</h3>
        <span>Description</span>
      </div>
    </li>
    <li>
      <svg viewBox="0 0 512 512" width="100" title="asterisk">
        <path d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
      </svg>
      <div class="stepper-content">
        <h3>Step 2</h3>
        <span>Description</span>
      </div>
    </li>
    <li>
      <svg viewBox="0 0 512 512" width="100" title="asterisk">
        <path d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
      </svg>
      <div class="stepper-content">
        <h3>Step 3</h3>
        <span>Description</span>
      </div>
    </li>
    <li>
      <svg viewBox="0 0 512 512" width="100" title="asterisk">
        <path d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
      </svg>
      <div class="stepper-content">
        <h3>Step 4</h3>
        <span>Description</span>
      </div>
    </li>
    <li>
      <svg viewBox="0 0 512 512" width="100" title="asterisk">
        <path d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
      </svg>
      <div class="stepper-content">
        <h3>Step 5</h3>
        <span>Description</span>
      </div>
    </li>
  </ol>
</div>

:root {
  --color-light: hsl(40 75% 90%);
  --color-dark: hsl(40 75% 10%);
  --size: 3rem;
}

body {
  background: var(--color-dark);
  padding: var(--size);
}

.stepper {
  container: stepper / inline-size;
  overflow: hidden;
}

.stepper ol {
  background: var(--color-light);
  border-radius: 1rem;
  color: var(--color-dark);
  display: flex;
  list-style: "";
  padding-inline-start: 0;
  padding: var(--size);
}

.stepper li {
  display: flex;
  flex: 1;
  position: relative;
  
  &:not(:last-child):before {
    content: "";
    position: absolute;
    background-color: var(--color-dark);
  }
}

.stepper-content {
  display: flex;
  flex-direction: column;
}

.stepper svg {
  background: var(--color-dark);
  border: 2px solid var(--color-dark);
  border-radius: 50%;
  fill: var(--color-light);
  flex: 1 1 50px;
  padding: .5em;
  position: relative;
  width: 50px;
}

@container stepper (width > 500px) {
  .stepper ol {
    justify-content: center;
    gap: 2rem;
  }
  .stepper li {
    flex-direction: column;
    align-items: center;
    
    &:not(:last-child):before {
      inset-inline-start: 50%;
      inset-block-start: 35px;
      height: 2px;
      width: 100%;
    }
  }
  .stepper-content {
    align-items: center;
  }
}

@container stepper (width < 500px) {
  .stepper ol {
    flex-direction: column;
    font-size: 1.25em;
    gap: calc(var(--size) - 1rem);
    place-items: start center;
  }
  
  .stepper li {
    align-items: start;
    gap: 1.5rem;
    
    &:not(:last-child):before {
      background-color: var(--color-dark);
      content: "";
      inset-inline-start: 23px;
      inset-block-start: 40px;
      height: 100%;
      width: 2px;
    }
  }
  
  .stepper svg {
    flex: 1 1 24px;
    height: 24px;
    inset-block-start: 10px;
    width: 24px;
  }
}