four card feature section

Check that the layout looks good on a range of screen sizes. At 850px wide there are two boxes stacked on top of each other. This was my approach using flexbox

main{
       display: flex;
       gap:1.5rem;
       align-items: center;
    }

<main>
    <div class="col1">
      <div class="card box1">
        <h3>Supervisor</h3>
        <p>Monitors activity to identify project roadblocks</p>
        <img src="./images/icon-supervisor.svg" alt="supervisor">
      </div>
    </div>
    
    <div class="col2">
      <div class="card box2">
        <h3>Team Builder</h3>
        <p>Scans our talent network to create the optimal 
          team for your project</p>
        <img src="./images/icon-team-builder.svg" alt="team builder">
      </div>
  
      <div class="card box3">
        <h3>Karma</h3>                 
        <p>Regularly evaluates our talent to ensure quality</p>
        <img src="./images/icon-karma.svg" alt="karma">
      </div>
    </div>
    
    <div class="col3">
      <div class="card box4">
        <h3>Calculator</h3>
        <p>Uses data from past projects to provide better delivery estimates </p>
        <img src="./images/icon-calculator.svg" alt="">
      </div>
  
    </div>
    
  </main>