.steps-orbit {
  position: relative;
  width: 100vw;
  height: 470px;
  margin: 4px 0 0 calc(50% - 50vw);
  overflow: hidden;
}

.steps-orbit .steps {
  position: absolute;
  inset: 0;
  display: block;
}

.steps-orbit .step {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  width: 280px;
  justify-items: center;
  color: #222;
  text-align: center;
  will-change: transform;
  outline: none;
}

.step-media {
  position: relative;
  width: 208px;
  height: 208px;
  overflow: hidden;
  background: #e9eef2;
  border: 5px solid #fff;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgb(21 50 76 / 18%);
  transition: transform .24s ease, box-shadow .24s ease;
}

.step-media::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid rgb(36 103 159 / 42%);
  border-radius: inherit;
}

.step-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.65) contrast(1.05); transition: filter .24s ease; }
.step-copy { width: 250px; margin-top: 18px; text-align: center; transform: none; }
.step-copy span { display: block; color: #24679f; font-size: 16px; line-height: 1; letter-spacing: 1px; }
.steps-orbit .step h3 { margin: 8px 0 0; font-size: 24px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.steps-orbit .step p { margin: 8px auto 0; max-width: 230px; color: #8b8f94; font-size: 16px; line-height: 1.6; white-space: normal; }

.steps-orbit .step:hover .step-media,
.steps-orbit .step:focus-visible .step-media { box-shadow: 0 12px 26px rgb(19 62 96 / 30%); transform: scale(1.09); }
.steps-orbit .step:hover .step-media img,
.steps-orbit .step:focus-visible .step-media img { filter: grayscale(0) contrast(1.05); }

@media (max-width: 800px) {
  .steps-orbit { width: 100%; max-width: 100%; height: auto; margin: 0; overflow: visible; box-sizing: border-box; padding: 0 10px; }
  .steps-orbit .steps { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; padding: 0; }
  .steps-orbit .step { position: static; width: auto; }
  .step-media { width: min(100%, 142px); height: auto; aspect-ratio: 1; border-width: 3px; margin: 0 auto; }
  .step-copy { width: 100%; margin-top: 9px; padding: 0 3px; }
  .step-copy span { font-size: 13px; }
  .steps-orbit .step h3 { font-size: 17px; line-height: 1.25; white-space: normal; }
  .steps-orbit .step p { margin: 6px auto 0; max-width: 180px; font-size: 14px; }
  .steps-orbit .step p { max-width: 150px; font-size: 12px; line-height: 1.55; }
}