<section><!-- HCWH section -->
  <div class="sqs-col-4"><!-- Left column -->
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170">
  <defs>
    <style>
      .b,.c{fill:none;stroke:#282d33;stroke-width:5px}
    </style>
  </defs>
  <circle cx="85" cy="85" r="85" fill="#fff"/>
  <path d="M49.157 79.966a14.665 14.665 0 0 0 1.1 1.229 14.963 14.963 0 0 0 25.48-11.978c-.152.02-.306.042-.453.057" class="b"/>
  <path d="M94.78 70.063c-6.047-3.516-7.636-3.66-16.1-1.428a23.378 23.378 0 0 1-3.4.639 23.243 23.243 0 0 1-3.4-.639c-8.463-2.232-10.049-2.088-16.1 1.428-5.3 2.8-8.353 10.889-6.837 19.984 1.753 10.515 5.808 11.247 5.808 22.636 0 11.325 4.108 16.982 7.414 16.982s4.967-3.881 8.592-13.582c2.486-6.654 6.17-7.709 9.055 0 3.627 9.7 5.285 13.582 8.589 13.582s7.411-5.657 7.411-16.982c0-11.36 4.041-12.01 5.812-22.636 1.514-9.095-1.537-17.187-6.844-19.984z" class="c"/>
  <path d="M94.669 81.28a7 7 0 1 1-10.844-5.851" class="b"/>
  <path d="M90.169 78.78l21.332-21.334M122 53.947a7 7 0 1 1-7-7 7 7 0 0 1 7 7zM57.069 63.514l-4.091-9.311M53.124 42.232a7 7 0 1 1-9.063 3.985 7 7 0 0 1 9.063-3.985zM127.237 52.613h15.834M127.237 62.613h15.834M66.739 44.613h15.834M66.739 54.613h15.834" class="c"/>
</svg> <!-- 10 -->
      <div>
        <h3>
          <a href="#">I need a tooth fixed</a>
        </h3>
        <p>Dental implants, bridges &amp; dentures provide solutions for missing teeth. Dr. Y brings their expertise to direct your tooth replacement case at every stage.</p> 
      </div>
    </div>
  </div>
  <div class="sqs-col-4"><!-- Left column -->
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170">
  <defs>
    <style>
      .b{fill:none;stroke:#282d33;stroke-width:5px}
    </style>
  </defs>
  <circle cx="85" cy="85" r="85" fill="#fff"/>
  <path d="M141.727 73.234h-12.024M137.115 47.414l-11.295 4.112M137.226 99.073l-11.296-4.114M141.727 73.234l-12.025-.002M31.135 73.234h12.023M35.746 47.414l11.297 4.112M35.635 99.073l11.299-4.114M31.135 73.234l12.026-.002M108.413 57.563c-6.815-3.965-8.606-4.126-18.149-1.612a26.418 26.418 0 0 1-3.832.723 26.461 26.461 0 0 1-3.838-.723c-9.537-2.514-11.328-2.353-18.147 1.612-5.978 3.153-9.418 12.274-7.709 22.523 1.979 11.854 6.549 12.679 6.549 25.519 0 12.764 4.631 19.139 8.357 19.139s5.6-4.373 9.682-15.308c2.8-7.5 6.957-8.691 10.208 0 4.089 10.935 5.96 15.308 9.687 15.308s8.349-6.375 8.349-19.139c0-12.806 4.555-13.54 6.551-25.519 1.712-10.249-1.721-19.37-7.708-22.523zM75.344 66.022h-8.266M105.783 66.022H97.52" class="b"/>
  <path d="M70.686 77.1c.392 9.721 7.406 17.471 16.026 17.471s15.634-7.75 16.024-17.471z" class="b"/>
</svg> <!-- 11 -->
      <div>
        <h3>
          <a href="#">I want straighter teeth</a>
        </h3>
        <p>Invisalign brings stealth straightening to you with thin, invisible trays. ABC Smiles’s experience puts a stunning smile within easy reach.</p> 
      </div>
    </div>
  </div>
  <div class="sqs-col-4"><!-- Left column -->
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170">
  <defs>
    <style>
      .b{fill:none;stroke:#282d33;stroke-width:5px}
    </style>
  </defs>
  <circle cx="85" cy="85" r="85" fill="#fff"/>
  <path d="M79.766 52.8c-.857.2-1.772.432-2.759.683a31.366 31.366 0 0 1-4.418.8 31.322 31.322 0 0 1-4.423-.8c-11-2.8-13.058-2.626-20.917 1.8-6.891 3.518-10.855 13.7-8.886 25.133 2.279 13.227 7.548 14.146 7.548 28.471 0 14.244 5.337 21.358 9.631 21.358s6.458-4.887 11.164-17.087c3.23-8.369 8.018-9.7 11.765 0 4.713 12.2 6.868 17.082 11.162 17.082s9.628-7.114 9.628-21.358a33.118 33.118 0 0 1 1.919-12.142" class="b"/>
  <path d="M105.492 37.919a29.524 29.524 0 0 0-22.514 48.648L80 95.716l8.617-4.028a29.516 29.516 0 0 0 46.416-24.225M135.029 67.463q0-1.008-.066-2" class="b"/>
  <path fill="none" stroke="#282d33" stroke-dasharray="3.854 3.854" stroke-width="4" d="M134.457 61.644a29.563 29.563 0 0 0-25.045-23.467"/>
  <path d="M107.492 37.985q-.993-.066-2-.066M119.432 63.01h-9.492v-9.491h-8.904v9.491h-9.492v8.902h9.492v9.492h8.904v-9.492h9.492V63.01z" class="b"/>
</svg> <!-- 12 -->
      <div>
        <h3>
          <a href="#">I need wisdom teeth removed</a>
        </h3>
        <p>Wisdom teeth should be evaluated for long-term health. Dr. Y in Big Town, USA helps you determine the best plan for you &amp; your third molars.</p> 
      </div>
    </div>
  </div>
</section>
section { 
  //the how-can-we-help section
  display:flex;
  flex-wrap:wrap;
  padding:0;
  margin:50px; 
  .sqs-col-4 {
    //each column  
    position:relative;
    width:calc(~'33.333% - 11.333px'); 
    background:linear-gradient(to bottom right, fade(white,33.333%), fade(white,0%), fade(white,33.333%)); 
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    transform:scale(1);
    border-radius:18px;
    border:1px solid fade(white,20%);
    position:relative; 
    margin:0 17px 0 0; 
    transition:250ms all; 
    text-shadow:1px 1px 1px fade(black,15%);
    & > a {
      display:block; 
      padding:34px; 
      color:white;
      text-decoration:none;
    }
    svg {
      width:72px;
      margin:0 0 -17px -17px;
      path {
        stroke:white; 
      }
      circle {
        fill:none
      }
    } 
    svg path, h3 a, p {
      transition:250ms all
    }
    &:hover { 
      transform:scale(1.05);
      z-index:1000;
      background-size:100%; 
    }
    &:last-of-type {
      margin:0
    }
  }
  @media all and (max-width:1024px) {
    margin:50px;
    .sqs-col-4 {
      width:100%;
      margin:17px 0;
      text-align:center;
      &:last-of-type {
        margin:17px 0
      }
      p {
        display:none
      }
      & > a {
        padding:17px 34px
      }
    }
  }
}

//codepen formatting
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
section {
  position:fixed;
  top:50%;
  transform:translatey(-60%)
}
body {
  &::before {
    width:100vw;
    height:100vh;
    position:fixed;
    background:fade(black,15%);
    content:''
  }
  height:150vh;
  margin:0;
  background: url('https://static1.squarespace.com/static/5c0ee91950a54f0bfd65f6e2/t/5fbef039cb3e0f57713aead6/1606348859952/bg.jpg');
  background-size:cover;
  font-family:sans-serif;
  font-size:1em;
  h3 { 
    font-size:125%; 
  }
  p {
    line-height:1.3;
    font-size:92.5%
  }
  h3 a {
    color:white;
    text-decoration:none
  }
}
View Compiled
var hcwhCTA = $('.sqs-col-4 h3 a');
var hcwhLink = $(hcwhCTA).attr("href");

$('.sqs-col-4 > div').wrap('<a href="' + hcwhLink + '"></a>');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js