Bam blocks, flexbox, grid, adaptive design

Hello, @KristinaHorbenko!

You did a great job! Referring to your difficulties, indeed it is difficult to arrange the cards as they are in the design. I want to share with you how I did and explain the logic a little bit. My solution might not be the best, but it serves as an idea:

HTML: This part is the specific one of the cards. What I did here is to group the cards in the middle in the same <span> so I can put them together in the column of the middle (think about a grid with three columns and one row).

<section>
      <div class="card" id="supervisor">
        <span>
          <h2>Supervisor</h2>
          <p>Monitors activity to identify project roadblocks</p>
        </span>
        <div class="image-container">
          <img src="images/icon-supervisor.svg" alt="supervisor icon" />
        </div>
      </div>

      <span class="middle-cards">
        <div class="card" id="team-builder">
          <span>
            <h2>Team Builder</h2>
            <p>Scans our talent network to create the optimal team for your project</p>
          </span>
          <div class="image-container">
            <img src="images/icon-team-builder.svg" alt="team builder icon" />
          </div>
        </div>

        <div class="card" id="karma">
          <span>
            <h2>Karma</h2>
            <p>Regularly evaluates our talent to ensure quality</p>
          </span>
          <div class="image-container">
            <img src="images/icon-karma.svg" alt="karma icon" />
          </div>
        </div>
      </span>

      <div class="card" id="calculator">
        <span>
          <h2>Calculator</h2>
          <p>Uses data from past projects to provide better delivery estimates</p>
        </span>
        <div class="image-container">
          <img src="images/icon-calculator.svg" alt="calculator icon" />
        </div>
      </div>
    </section>

CSS Mobile: Here is how display the section in mobile screen sizes. This is simply a grid with one column .

section {
    display: grid;
    row-gap: 1rem;
}

CSS Desktop: While in the desktop styles, I set this styles for the span of the cards in the middle to convert it a grid with one column. Then, the section is defined as a grid of 3 columns and the items are aligned to the centre.

.middle-cards {
        display: grid;
        row-gap: 1rem;
}
section {
        align-items: center;
        grid-template-columns: repeat(3, 1fr);
        max-width: 80%;
}

I hope these examples of solution are helpful. They may not be the best because I'm learning too, but is something 😅 Happy coding! 😉

This is a very interesting solution, and I appreciate the approach you've taken. I would love to see more examples like this to gain more experience. Thank you!

Could you please explain why you used a <span> tag in this case?