.steps {
  position: relative;
  max-width: 96.125rem;
  margin-inline: auto;
  container-type: inline-size;
}

.steps__list {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25.94%;
  text-align: center;
}

.step:first-child {
  width: 21.85%;
}

.step__img {
  width: auto;
  height: min(17.6875rem, 18.4cqi);
  object-fit: contain;
  margin-bottom: 2.5rem;
}

.step:first-child .step__img {
  height: min(17.625rem, 18.34cqi);
}

.step__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.step__text {
  margin: 0.9375rem 0 1.875rem;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-text-muted);
}

.step:first-child .step__text {
  max-width: 19.9375rem;
}

.step .tile {
  margin-top: auto;
}

.steps::before,
.steps::after {
  content: "";
  position: absolute;
  bottom: 1.625rem;
  height: 2px;
  background-color: var(--color-border-tile);
  background-image: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-0) 74%);
  pointer-events: none;
}

.steps::before {
  left: calc(10.92% + 27px);
  width: calc(47.96% - 10.92% - 54px);
}

.steps::after {
  left: calc(47.96% + 27px);
  width: calc(87.03% - 47.96% - 54px);
}

@media (max-width: 64rem) {
  .steps__list {
    gap: 1rem;
  }

  .step:first-child .step__text {
    max-width: none;
  }
}

@media (max-width: 48rem) {

  .steps::before,
  .steps::after {
    display: none;
  }

  .steps__list {
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
  }

  .step,
  .step:first-child {
    position: relative;
    width: 100%;
  }

  .step:last-child {
    margin-top: -0.5rem;
  }

  .step__img,
  .step:first-child .step__img {
    width: 100%;
    height: auto;
  }

  .step:nth-child(2) .step__img {
    width: min(21.25rem, 100%);
  }

  .step:nth-child(3) .step__img {
    width: min(21.1875rem, 100%);
  }

  .step:first-child .step__text {
    max-width: none;
  }

  .step:nth-child(3) .step__title {
    font-size: 1.5rem;
    line-height: 1.8125rem;
  }

  .step:nth-child(3) .step__text {
    line-height: 1.6875rem;
  }

  .step:nth-child(3) .step__text {
    font-size: 1.125rem;
  }

  .step .tile {
    margin-top: 0;
  }

  .step::before,
  .step::after {
    content: "";
    position: absolute;
    bottom: 1.625rem;
    height: 2px;
    background-color: var(--color-border-tile);
  }

  .step::before {
    right: calc(50% + 27px);
    left: calc(-1 * var(--container-pad));
    background-image: linear-gradient(270deg, var(--color-accent) 0%, var(--color-accent-0) 74%);
  }

  .step::after {
    left: calc(50% + 27px);
    right: calc(-1 * var(--container-pad));
    background-image: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-0) 74%);
  }

  .step:first-child::before,
  .step:last-child::after {
    display: none;
  }
}