.projects-grid {
  max-width: 1600px;
  width: 100%;
  display: grid;
  place-items: center;
  grid-template-areas: 
  "r1c1 r1c2 r1c3 r1c4 r1c5 r1c6" 
  "r2c1 r2c2 r2c3 r2c4 r2c5 r2c6";
}

@media (width <= 900px) {
  .projects-grid {
    grid-template-areas: 
    "r1c1 r1c2 r1c3 r1c4"
    "r1c5 r1c6 r2c2 r2c3" 
    ". r2c4 r2c5 r2c6";
  }
}

@media (width <= 600px) {
  .projects-grid {
    grid-template-areas: 
    "r1c1 r1c2"
    "r1c3 r1c4"
    "r1c5 r1c6" 
    "r2c2 r2c3" 
    "r2c4 r2c5";
  }
}

.projects-grid div {
  background-size: 80% 71%;
  background-repeat: no-repeat;
  background-position: 15% 50%;
}  

.projects-grid img {
  height: 360px;
  margin: 32px 16px;
  transition-duration: 0.1s;
}

@media (pointer: fine) {
  .projects-grid img:hover {
    transform: rotateZ(-2deg);
    transform-origin: top;
  }
}

.project-orange {
  background-image: url("../images/orange-bg.png");
}

.project-green {
  background-image: url("../images/green-bg.png");
}