.hero {
  background-image: url("../img/media/tests.jpg");
  display: flex;
}

@media (width >= 768px) {
  .photo-wrapper {
    grid-template-columns: repeat(2, 320px);
    grid-template-rows: repeat(21, 260px);
  }
}

@media (1280px<= width < 1440px) {
  .photo-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 320px);
    grid-template-rows: repeat(14, 260px);
  }
}

@media (width >= 1440px) {
  .photo-wrapper {
    grid-template-columns: repeat(4, 320px);
    grid-template-rows: repeat(11, 260px);
  }
}