:root {
  --bs-stepper-size: 3rem;
  --bs-stepper-gap: 2rem;
  --bs-stepper-font-size: 22px;
  --bs-stepper-text-gap: 0.5rem;
  --bs-stepper-track-size: 0.2rem;
  --bs-stepper-bg: Lightgrey;
  --bs-stepper-active-color: Whitesmoke;
  --bs-stepper-active-bg: Dodgerblue;
}
.contains-inline {
  container-type: inline-size;
}
.stepper-item:first-child::before {
  font: var(--fa-font-solid);
  font-size: 16px;
  content: "\f007";
}
.stepper-item:nth-child(2)::before {
  font: var(--fa-font-solid);
  font-size: 16px;
  content: "\f0e0";
}
.stepper-item:nth-child(3)::before {
  font: var(--fa-font-solid);
  font-size: 16px;
  content: "\f4fe";
}
.stepper-item:nth-child(4)::before {
  font: var(--fa-font-solid);
  font-size: 16px;
  content: "\f135";
}
.stepper-item:before {
  border: 4px solid White;
  box-shadow: 2px 2px 8px Lightgrey;
}
.stepper {
  gap: var(--bs-stepper-gap);
  counter-reset: stepper;
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
  padding-inline-start: 0;
  list-style-type: "";
  display: grid;
}
.stepper-item {
  grid-template-rows: auto;
  grid-template-columns: var(--bs-stepper-size) auto;
  gap: var(--bs-stepper-text-gap);
  align-items: var(--bs-stepper-align-items, center);
  text-decoration: none;
  display: grid;
  position: relative;
}
.stepper-item:before {
  z-index: 1;
  width: var(--bs-stepper-size);
  height: var(--bs-stepper-size);
  font-size: var(--bs-stepper-font-size);
  text-align: center;
  content: counter(stepper);
  counter-increment: stepper;
  background-color: var(--bs-stepper-bg);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  position: relative;
}
.stepper-item:after {
  width: var(--bs-stepper-track-size);
  height: calc(100% + var(--bs-stepper-gap));
  content: "";
  background-color: var(--bs-stepper-bg);
  position: absolute;
  inset-block: 50% 100%;
  inset-inline-start: calc(
    var(--bs-stepper-size) * 0.5 - var(--bs-stepper-track-size) * 0.5
  );
}
.stepper-item:last-child:after {
  display: none;
}
.stepper-item.active:before,
.stepper-item.active:after {
  color: var(--bs-theme-contrast, var(--bs-stepper-active-color));
  background-color: var(--bs-theme-bg, var(--bs-stepper-active-bg));
}
.stepper-item.active:not(:has(+ .stepper-item.active)):after {
  background-color: var(--bs-stepper-bg);
}
.stepper-horizontal {
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  display: inline-grid;
}
.stepper-horizontal .stepper-item {
  grid-template-rows: var(--bs-stepper-size) auto;
  text-align: center;
  grid-template-columns: auto;
  place-items: start center;
}
.stepper-horizontal .stepper-item:after {
  width: calc(100% + var(--bs-stepper-gap));
  height: var(--bs-stepper-track-size);
  inset-block-start: calc(
    var(--bs-stepper-size) * 0.5 - var(--bs-stepper-track-size) * 0.5
  );
  inset-block-end: auto;
  inset-inline: 50% 100%;
}
.stepper-horizontal .stepper-item:last-child:after {
  right: 100%;
}
@container (width>=576px) {
  .sm\:stepper-horizontal {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    display: inline-grid;
  }
  .sm\:stepper-horizontal .stepper-item {
    grid-template-rows: var(--bs-stepper-size) auto;
    text-align: center;
    grid-template-columns: auto;
    place-items: start center;
  }
  .sm\:stepper-horizontal .stepper-item:after {
    width: calc(100% + var(--bs-stepper-gap));
    height: var(--bs-stepper-track-size);
    inset-block-start: calc(
      var(--bs-stepper-size) * 0.5 - var(--bs-stepper-track-size) * 0.5
    );
    inset-block-end: auto;
    inset-inline: 50% 100%;
  }
  .sm\:stepper-horizontal .stepper-item:last-child:after {
    right: 100%;
  }
}
.stepper-overflow {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  container-type: inline-size;
}
.stepper-overflow > .stepper {
  width: max-content;
  min-width: 100%;
}