Four card feature section

For larger screens I used a grid layout and

    <section class="cards">
      <div class="card supervisor">
        <h3>Supervisor</h3>
        <p>Monitors activity to identify project roadblocks</p>
        <img src="./images/icon-supervisor.svg" alt="Supervisor" />
      </div>
      <div class="card team-builder">
        <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 karma">
        <h3>Karma</h3>
        <p>Regularly evaluates our talent to ensure quality</p>
        <img src="./images/icon-karma.svg" alt="Karma" />
      </div>
      <div class="card calculator">
        <h3>Calculator</h3>
        <p>Uses data from past projects to provide better delivery estimates</p>
        <img src="./images/icon-calculator.svg" alt="Calculator" />
      </div>
    </section>

@media (min-width: 48em) {

  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fl);
    grid-template-rows: repeat(4, 1fl);
  }

  .card {
    margin: 16px;
  }

  .supervisor {
    grid-row: 2 / 4;
    grid-column: 1;
  }

  .team-builder {
    grid-row: 1 / 3;
    grid-column: 2;
  }

  .karma {
    grid-row: 3 / 5;
    grid-column: 2;
  }

  .calculator {
    grid-row: 2 / 4;
    grid-column: 3
  }
}

### What challenges did you encounter, and how did you overcome them?
Grid layout and elements positioning (see above).