I want to be able to stack my element, side by side and top position like checkered board, right now they stack on top of each other

Question

I I want to be able to stack my element, side by side and top position like checkered board, right now they stack on top of each other. I was under the impression, that with the current code I have, I was able to achieve this.

Currently it is like this Problem 1: https://i.stack.imgur.com/BwD3W.png

I want to achieve something like this: Solution

My current code is:

import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { images } from '../../constants';

import './About.scss';

const abouts = [
  { title: 'Cloud and DevOps Engineer', description: 'I am a professional DevOps Engineer', imgUrl: images.about01},
  { title: 'Front End', description: 'I am an excellent Front End Developer', imgUrl: images.about02},
  { title: 'Automation Engineer', description: 'I like automating infrastructure, development and database(ETL) tasks', imgUrl: images.about03},
  { title: 'Automation Engineer', description: 'I like automating infrastructure, development and database(ETL) tasks', imgUrl: images.about03},
]

const About = () => {
  return (
    <>
      <h2 className="head-text"> I know that  <span> Good Solutions </span> <br /> means <span> Good Business </span></h2>
      <div className="app__profile">
          {abouts.map((about, index) => (
            <motion.div
            
              whileInView={{ opacity: 1 }}
              whileHover={{ scale: 1.1 }}
              transition={{ duration: 0.5, type: 'tween'}}
              className="app__profile-item"
              key={about.title + index}
            
            >
              <img src={about.imgUrl} alt={about.title} />
              <h2 className="bold-text" style={{ marginTop: 20 }}>{about.title}</h2>
              <p className="p-text" style={{ marginTop: 20 }}>{about.description}</p>

            </motion.div>
          ))}
      </div>
    </>
  )
}

export default About

.app__about {
    flex: 1;
    width: 100%;
    flex-direction: column;
  }
  
  .app__profiles {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 2rem;
  }
  
  .app__profile-item {
    width: 190px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin: 2rem;
  
    img {
      width: 100%;
      height: 170px;
      border-radius: 15px;
      object-fit: cover;
    }
  
    @media screen and (min-width: 2000px) {
      width: 370px;
      margin: 2rem 4rem;
  
      img {
        height: 320px;
      }
    }
  }

enter code here

Any help would be appreciated