<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="icon-circle">
	<circle cx="35" cy="35" r="35"/>
</g>
</defs>
</svg>

<ul class="list">
  <li>
    <a href="#">
      <svg class="icon" viewBox="0 0 70 70">
        <use xlink:href="#icon-circle"></use>
       </svg>
      <div>
        <h3>Title 1</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <svg class="icon" viewBox="0 0 70 70">
        <use xlink:href="#icon-circle"></use>
       </svg>
      <div>
        <h3>Title 2</h3>
        <p>Eam ei partem luptatum temporibus. Et per nisl assueverit</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <svg class="icon" viewBox="0 0 70 70">
        <use xlink:href="#icon-circle"></use>
       </svg>
      <div>
        <h3>Title 3</h3>
        <p>Pro veniam commune rationibus cu. Ne sed nusquam omittam</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <svg class="icon" viewBox="0 0 70 70">
        <use xlink:href="#icon-circle"></use>
       </svg>
      <div>
        <h3>Title 4</h3>
        <p>Dolor dolore volutpat et est. Scriptorem disputationi an pr</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <svg class="icon" viewBox="0 0 70 70">
        <use xlink:href="#icon-circle"></use>
       </svg>
      <div>
        <h3>Title 5</h3>
        <p>Usu accusata laboramus at</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <svg class="icon" viewBox="0 0 70 70">
        <use xlink:href="#icon-circle"></use>
       </svg>
      <div>
        <h3>Title 6</h3>
        <p>Mutat aeterno usu eu, cu mea numquam electram</p>
      </div>
    </a>
  </li>
</ul>

/** {outline: 1px red dotted;}*/
.list {
  max-width: 1100px; /* This will probably be defined by the container on th real page */
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  font-family: sans-serif;
}
.list li {
  margin: 1em;
  flex: 1 1 16em; /* flex-basis (last value) will define the width where an item will wrap to a new line */
}
.list a {
  color: #000;
  text-decoration: none;
  display: flex;
}
.icon {
  width: 70px;
  height: 70px;
  margin: 1em;
  fill: #ef7c00;
  flex-shrink: 0;
}
.list div {
  flex-grow: 1;
}