.gallery .image-container .gi-01,
.gallery .image-container .gi-02,
.gallery .image-container .gi-04, 
.gallery .image-container .gi-05 {
  grid-column: 1 / -1;
}

.gallery .image-container .gi-01 img,
.gallery .image-container .gi-02 img,
.gallery .image-container .gi-04 img, 
.gallery .image-container .gi-05 img{
  object-fit: cover;
  object-position: left center;
  height: 260px;
  width: 100%;
}

.gallery .image-container .gi-01 { order: 1; }
.gallery .image-container .gi-02 { order: 2; }
.gallery .image-container .gi-04 { order: 3; }
.gallery .image-container .gi-05 { order: 4; }
.gallery .image-container .gi-03 { order: 5; }
.gallery .image-container .gi-06 { order: 6; }

.gallery .image-container .gi-03 img,
.gallery .image-container .gi-06 img{
  object-fit: cover;
  object-position: 38% bottom;
  height: 70vw;
  width: 100%;
}

.gallery .image-container .gi-03 {
  grid-column: 1 / span 2;
}

.gallery .image-container .gi-06 {
  grid-column: 3 / span 2;
}

@media (min-width: 640px) {
  
  .banner {
    align-content: start;
  }
  
  .flow .illustration {
    grid-column: 1 / -1;
  }
  
  .gallery .image-container .gi-01,
  .gallery .image-container .gi-02,
  .gallery .image-container .gi-04, 
  .gallery .image-container .gi-05 {
    grid-column: 2 / -2;
  }
  
  .gallery .image-container .gi-01 img,
  .gallery .image-container .gi-02 img,
  .gallery .image-container .gi-04 img, 
  .gallery .image-container .gi-05 img {
    height: 320px;
  }
  
  .gallery .image-container .gi-03 {
    grid-column: 2 / span 2;
  }
  
  .gallery .image-container .gi-06 {
    grid-column: 4 / span 2;
  }
  
  .gallery .image-container .gi-03 img,
  .gallery .image-container .gi-06 img {
    height: 65vw;
  }

}

@media (min-width: 800px) {
  
  .gallery .image-container .gi-03 img,
  .gallery .image-container .gi-06 img {
    height: 55vw;
  }
  
}

@media (min-width: 900px) {
  
  .flow .illustration {
    grid-column: 2 / -2;
  }

  .gallery .image-container .gi-01,
  .gallery .image-container .gi-02,
  .gallery .image-container .gi-04, 
  .gallery .image-container .gi-05 {
    grid-column: 5 / -2;
  }
  
  .gallery .image-container .gi-01 img,
  .gallery .image-container .gi-02 img,
  .gallery .image-container .gi-04 img, 
  .gallery .image-container .gi-05 img {
    height: 380px;
  }
  
  .gallery .image-container .gi-03 {
    grid-column: 5 / span 3;
  }
  
  .gallery .image-container .gi-06 {
    grid-column: 8 / span 4;
  }
  
}

@media (min-width: 1194px) {
  
  .comparison figure {
    grid-column: 5 / -3;
  }
  
  .layers .illustration,
  .iteration .illustration {
    grid-column: 6 / -2;
  }
  
  .gallery .image-container .gallery-image img {
    object-fit: cover;   
    height: 33vw;
    width:100%;
  }
  
  .gallery .image-container .gi-01 { order: 1; }
  .gallery .image-container .gi-02 { order: 2; }
  .gallery .image-container .gi-03 { order: 3; }
  .gallery .image-container .gi-04 { order: 4; }
  .gallery .image-container .gi-05 { order: 5; }
  .gallery .image-container .gi-06 { order: 6; }
  
  .gallery .image-container .gi-01 {
    grid-column: 2 / -2;
  }
  
  .gallery .image-container .gi-02 {
    grid-column: 3 / 10;
  }
  
  .gallery .image-container .gi-02 img {  
    height:25vw;
  }
  
  .gallery .image-container .gi-03 {
    grid-column: 10 / -3;
  }
  
  .gallery .image-container .gi-03 img {
    height:25vw;
  }
  
  .gallery .image-container .gi-04 {
    grid-column: 3 / -3;
  }
  
  .gallery .image-container .gi-05 {
    grid-column: 2 / 12;
  }
  
  .gallery .image-container .gi-06 {
    grid-column: 12 / -2;
  }
  
  .gallery .image-container {
    grid-row-gap: 50px;
  }
  
  .gallery .image-container .gallery-image img {
    object-fit: cover;   
    height: 33vw;
    width:100%;
  }
  
}

@media (min-width: 1920px) {
  
  .comparison figure {
    grid-column: 6 / -5;
  }
  
  .diagram .info-card.first {
    grid-column: -2 / -8;
  }
  
  .flow .illustration {
    grid-column: 5 / -2;
  }
  
  .layers .illustration {
    grid-column: 8 / -6;
  }
  
  .iteration .illustration {
    grid-column: 7 / -2;
  }
  
  .gallery .image-container .gi-01 {
    grid-column: 3 / -3;
  }
  
  .gallery .image-container .gi-02 {
    grid-column: 4 / 13;
  }
  
  .gallery .image-container .gi-02 img {
    height:25vw;
  }
  
  .gallery .image-container .gi-03 {
    grid-column: 13 / -4;
  }
  
  .gallery .image-container .gi-03 img {
    height:25vw;
  }
  
  .gallery .image-container .gi-04 {
    grid-column: 3 / -3;
  }
  
  .gallery .image-container .gi-05 {
    grid-column: 2 / 16;
  }
  
  .gallery .image-container .gi-06 {
    grid-column: 16 / -2;
  }
  
}

@media (min-width: 2250px) {
  
  .comparison figure {
    grid-column: 11 / span 15;
  }
  
  .diagram .info-card.right {
    grid-column: -14 / -6;
  }
  
  .flow .illustration {
    grid-column: 8 / span 21;
  }
  
  .diagram .info-card.left {
    grid-column: 12 / span 8;
  }
  
  .diagram.flow .info {
    padding-top: 12vw;
    padding-bottom: 430px;
  }
  
  .layers .illustration {
    grid-column: 11 / span 14;
  }
  
  .iteration .illustration {
    grid-column: 10 / span 19;
  }
  
  .gallery .image-container .gallery-image img {
    height: 28vw;
  }
  
  .gallery .image-container .gi-01 {
    grid-column: 5 / -5;
  }
  
  .gallery .image-container .gi-02 img, .gallery .image-container .gi-03 img {
    height: 22vw;
  }
  
  .gallery .image-container .gi-02 {
    grid-column: 7 / 19;
  }
  
  .gallery .image-container .gi-03 {
    grid-column: 19 / -7;
  }
  
  .gallery .image-container .gi-04 img {
    object-position: 50% 0%;
  }
  
  .gallery .image-container .gi-04 {
    grid-column: 7 / -7;
  }
  
  .gallery .image-container .gi-05 {
    grid-column: 5 / 22;
  }
  
  .gallery .image-container .gi-06 {
    grid-column: 22 / -5;
  }
  
}