/* mpura DEMO */
.aboutproject-header {
  margin-top: 0px;
  position: relative;
  /* background: url("/img/mpura_header.png"); */
  /* background-size: cover; */
  background-position: bottom;
  height: 600px;

  display: flex;
  flex-direction: column; /* tytuł nad opisem */
  align-items: center; /* środek w poziomie */
  justify-content: flex-start; /* góra w pionie */
  padding-top: 40px; /* odstęp od góry (zmień jak chcesz) */
  background-color: black;
  text-align: center; /* na wszelki wypadek */
}

/* obrazek tylko na dole, 500px wysokości */
.aboutproject-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 600px; /* <-- wymagane */
  background: url("/img/aboutproject_header.png") bottom center no-repeat;
  background-size: auto; /* alternatywnie: bez kadrowania */
  z-index: 0;
}

.myAboutProjectBoxInside {
  margin: 10px;
  position: relative;
  height: 120px;
  display: flex;
  margin-top: 70px;
  flex-direction: column;
  align-items: center; /* wyśrodkuj w poziomie */
  justify-content: center; /* wyśrodkuj w pionie (usuń jeśli nie chcesz) */
  text-align: center;
}

.myAboutProjectBoxInside img {
  height: 100%;
  width: auto; /* zachowuje proporcje */
  max-width: 100%; /* nie wyjdzie poza box */
  object-fit: contain; /* na wypadek gdy ustawisz też width */
}

.itemAboutProject {
  width: 250px;
  height: 300px;
  margin: 10px auto;
  position: relative;
  border: 1px solid black; /* grubość | styl | kolor */
}
.aboutProjectRow {
  display: flex;
  align-items: stretch; /* opcjonalnie */
  flex-wrap: wrap; /* żeby na małych ekranach mogły zejść niżej */
}

@media (min-width: 201px) {
  .itemAboutProject {
    width: 160px;
  }
}
@media (min-width: 600px) {
  .itemAboutProject {
    width: 180px;
  }
}
@media (min-width: 1000px) {
  .itemAboutProject {
    width: 240px;
  }
}