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

.history-text {
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  padding: 20px 20px 0;
  font-weight: 300;
}

@media (width >= 768px) {
  .history-text {
    padding: 20px 60px;
  }
}

@media (width >= 1280px) {
  .history-text {
    margin-top: 50px;
    font-size: 20px;
    line-height: 30px;
    padding: 20px 140px;
  }
}

@media (width >= 768px) {
  .photo-wrapper {
    grid-template-rows: repeat(13, 270px);
  }
}

@media (1280px<= width < 1440px) {
  .photo-wrapper {
    display: grid;
    grid-template-rows: repeat(9, 270px);
  }
}

@media (width >= 1440px) {
  .photo-wrapper {
    grid-template-rows: repeat(7, 270px);
  }
}