victor-hugo/site/layouts/partials/services.html

<article id="services" class="l-relative l-screen-min-full services-bg">
  <div class="l-section-pad l-wrapper l-wrapper--wide">
    <h2 class="l-section-header">Services</h2>
    <ul class="l-flex-list-row service-list">
      <li class="service">
        <ul class="l-list-bare">
          <li class="service__header">
            <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
          </li>
          <li>
            <h3 class="service__heading h4">Service Heading One</h3>
            <p class="h5">Service Sub-Heading</p>
          </li>
          <li class="service__body">
            <p>
              Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
            </p>
            <p>
              Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
            </p>
          </li>
          <li>
            <ul class="l-flex-list-row service__social-list">
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="service">
        <ul class="l-list-bare">
          <li class="service__header">
            <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
          </li>
          <li>
            <h3 class="service__heading h4">Service Heading Two</h3>
            <p class="h5">Service Sub-Heading</p>
          </li>
          <li class="service__body">
            <p>
              Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
            </p>
            <p>
              Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
            </p>
            <p>
              Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
            </p>
          </li>
          <li>
            <ul class="l-flex-list-row service__social-list">
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="service">
        <ul class="l-list-bare">
          <li class="service__header">
            <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
          </li>
          <li>
            <h3 class="service__heading h4">Service Heading Three</h3>
            <p class="h5">Service Sub-Heading</p>
          </li>
          <li>
            <p class="service__body">
              Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
            </p>
          </li>
          <li>
            <ul class="l-flex-list-row service__social-list">
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="service">
        <ul class="l-list-bare">
          <li class="service__header">
            <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
          </li>
          <li>
            <h3 class="service__heading h4">Service Heading Four</h3>
            <p class="h5">Service Sub-Heading</p>
          </li>
          <li>
            <p class="service__body">
              Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
            </p>
            <p>
              Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
            </p>
          </li>
          <li>
            <ul class="l-flex-list-row service__social-list">
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
              <li><span class="social-icon"></span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</article>