{{ with (.Site.GetPage "/hybrid-cloud/hybrid-cloud-how-it-works") }}
  <section class="hybrid-cloud-how-it-works">
    <div class="container">
      <div class="row">
        <div class="hybrid-cloud-how-it-works__content col-12">
          <div class="row justify-content-lg-between">
            <div class="col-12 col-lg-4">
              <h2 class="hybrid-cloud-how-it-works__title">{{ .Params.title }}</h2>
            </div>
            <div class="hybrid-cloud-how-it-works__steps col-12 col-lg-7">
              {{ range .Params.steps }}
                <div class="hybrid-cloud-how-it-works__step">
                  <div class="hybrid-cloud-how-it-works__step-number">
                    <span>{{ .number }}</span>
                  </div>
                  <h6 class="hybrid-cloud-how-it-works__step-title">{{ .title }}</h6>
                  <p class="hybrid-cloud-how-it-works__step-description">{{ .description }}</p>
                </div>
              {{ end }}
            </div>
          </div>
        </div>

        <div class="hybrid-cloud-how-it-works__preview col-12 col-lg-10">
          <img
            src="{{ .Params.image.src }}"
            alt="{{ .Params.image.alt }}"
            class="no-copy no-events"
            draggable="false"
          />
        </div>
      </div>
    </div>
  </section>
{{ end }}