расположение блоков при уменьшении разрешения в react

у меня есть компонент котоырй обрабатывает изображения в контейнере

return (
    <>
      <div className={style.container}>
        {paintings.map((item, name, painting) => (
          <>
            <div key={item.id} className={style.container__wrapper}>
              <div className={style.container__illustration}>
                <img
                  src={`https://asdasdasdasd${item.imageUrl}`}
                  alt={item.name}
                />
                <span
                  className={style.container__illustrationInfo}
                  id={item.id}
                  onMouseEnter={(e) => e.target.setIsActive(!isActive)}
                  onMouseLeave={(e) => setIsActive(!isActive)}
                  onClick={(e) => setIsActive(!isActive)}
                >
                  <h1 className={style.container__name} key={item.id}>
                    {item.name}
                  </h1>
                  {!isActive && (
                    <div className={style.container__infoBox}>
                      <h1 className={style.container__infoboxItem}>
                        <strong>Author:</strong>
                        {authorsMap.get(item.authorId).name}
                      </h1>
                      <h1 className={style.container__infoboxItem}>
                        <strong>Created:</strong>
                        {item.created}
                      </h1>
                      <h1 className={style.container__infoboxItem}>
                        <strong>
                          Location:{locationsMap.get(item.locationId).location}
                        </strong>
                      </h1>
                    </div>
                  )}
                </span>
              </div>
            </div>
          </>
        ))}
      </div>
    </>
  );

а так же стили для этого компонента

.container {
   display: flex;
   flex-wrap: wrap;
   margin-top: 45px;
   align-items: stretch;
   justify-content: center;


   &__wrapper {
      width: 360px;
      margin: 10px;
      border-radius: 20px;
      overflow: hidden;

   }

   &__illustrationInfo {
      position: absolute;
      white-space: nowrap;
      text-overflow: ellipsis;
      background: rgba(255, 255, 255, 0.75);
      width: 360px;
      border-radius: 0px 0px 14px 14px;


      @media screen and (max-width:1023px) {
         width: 300px;
      }

      @media screen and (max-width:767px) {
         width: 340px;
      }

      @media screen and (max-width:320px) {
         width: 280px;
      }

   }

   &__illustration {

      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;


   }


   &__name {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      line-height: 20px;
      padding-left: 15px;

   }

   &__infoBox {
      height: 115px;
      padding-bottom: 24px;
      padding-left: 15px;
   }

   &__infoboxItem {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-size: 13px;
      line-height: 20px;

   }

   img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;

      @media screen and (max-width:1023px) {
         width: 300px;
         height: 275px;
      }



      @media screen and (max-width:767px) {
         width: 340px;
         height: 249px;
      }

      @media screen and (max-width:320px) {
         width: 280px;
         height: 205px;
      }

   }
}

при ширине в 1024px на одной странице должно выводиться 3 столбца при ширине в 768px уже 2 проблема в том что у меня при ширине экрана в 1024 выводится только 2 столбца а при разрешении в 768px только 1 и я не могу понять как это можно исправить