Flexbox Equal Height Cards Wrapping Issue

Question

I am trying to create a section that have 3 equal columns/cards. I run into a trouble when I tries to make it works on smaller screen sizes. Each card should wrap on to a new line when the screen size gets smaller than 250px.

The problem could be seen in picture 1:

I set flex-wrap: wrap; for the flex container and flex: 1 250px; for the flex children but they do not seem to work, so I am confused what I have done wrong.

I also want the distance of my paragraph and the titles in the cards to be equal. I have .project with display: flex and have .project p {margin-top: auto} following a guide on creating equal height cards, but it also does not seem to work.

/*PROJECTS*/

.projects {
  margin: 0 12rem;
}


/*CONTAINERS FOR IMAGES*/

.project-image {
  width: 250px;
  height: 250px;
}


/*CONTAINER */

.projects-list {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}


/*ITEMS IN THE CONTAINER*/

.project {
  display: flex;
  flex-direction: column;
  flex: 1 250px;
}

.project p {
  margin-top: auto;
}

.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="projects">
  <h2>Projects</h2>

  <div class="projects-list">
    <div class="project">
      <div class="project-image">
        <img class="library-chatsphere" src="https://via.placeholder.com/300" alt="the poster of the NCHU library chatsphere 2024">
      </div>
      <h3 class="projects-title">Lorem ipsum dolor sit amet.</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
    </div>

    <div class="project">
      <div class="project-image">
        <img src="https://via.placeholder.com/300" alt="a background of green leaves">
      </div>
      <h3 class="projects-title">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit vitae illum quod quisquam provident odit praesentium assumenda quae ipsum sed.</p>
    </div>

    <div class="project">
      <div class="project-image">
        <img src="https://via.placeholder.com/300" alt="a background of green leaves">
      </div>
      <h3 class="projects-title">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit vitae illum quod quisquam provident odit praesentium assumenda quae ipsum sed.</p>
    </div>

  </div>