:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #000000;
  --accent: #1c4ace;
  --radius: 0.75rem;
  --image-shadow: 0 0.625rem 1.25rem rgb(28 74 206 / 24%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  background: var(--background);
  color: var(--foreground);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.welcome {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;
  padding-block: 3.75rem 9rem;
  text-align: center;
}

h1 {
  max-width: 60rem;
  margin: 0 auto 5.625rem;
  color: var(--accent);
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 1.27;
  overflow-wrap: break-word;
}

.step + .step {
  margin-top: 7.5rem;
}

h2 {
  margin: 0 0 1.625rem;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.55;
}

.step-image {
  display: block;
  width: min(100%, 47.5rem);
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: var(--image-shadow);
}

@media (max-width: 63.99rem) {
  h1 {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
  }
}

@media (max-width: 47.99rem) {
  .welcome {
    padding-block: 2.5rem 4rem;
  }

  h1 {
    margin-bottom: 3rem;
  }

  h2 {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
  }

  .step + .step {
    margin-top: 3.5rem;
  }
}