.mockup figure {
  display: grid;
  grid-template-columns: repeat(var(--master-column-count), 1fr);
  grid-column-gap: var(--gutter);
  justify-items: center;
}

.mockup figure figcaption {
  grid-column: 3 / -1;
}

section.mangyoku .info {
  grid-template-columns: repeat(var(--master-column-count), 1fr);
  padding: 9vw 35px;
}

.prototype .illustration {
  grid-column: 2 / span 2;
}

.gallery .image-container {
  justify-items: center; 
  grid-row-gap: 2rem; 
}
  
.gallery .image-container .gallery-image {
  grid-column: 1 / -1;
  max-width: 350px;
}

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

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

.gallery .image-container .gallery-image img {
  width: 100%;
}

@media (min-width: 640px) {
  /* 
  .badges .info-card.right {
    grid-column: 2 / -3;
  } */
  
  .mockup figure {
    grid-column: 1 / -1;
    /* grid-template-columns: repeat(4, 1fr); */
  }
  
  .mockup figure figcaption {
    grid-column: 4 / -2;
  }
  
  .gallery .image-container .gallery-image {
    max-width: unset;
  }  
   
  .gallery .image-container .gi-01 {
    grid-column: 2 / span 3;
  }
  
  .gallery .image-container .gi-02 {
    grid-column: 5 / span 2;
    align-self: end;
  }
  
  .gallery .image-container .gi-03 {
    grid-column: 2 / span 2;
    align-self: end;
  }
  
  .gallery .image-container .gi-04 {
    grid-column: 4 / span 3;
  }
  
  .gallery .image-container .gi-05 {
    grid-column: 2 / span 2;
  }
  
  .gallery .image-container .gi-06 {
    grid-column: 4 / span 2;
  }

}

@media (min-width: 800px) {
  
  .prototype .illustration {
    grid-column: 2 / 5;
  }
  
  section.mangyoku .info {
    grid-template-columns: repeat(var(--master-column-count), 1fr);
    padding: 9vw 35px;
  }
  
}

@media (min-width: 900px) {
  /* 
  .badges .info-card.right {
    grid-column: 3 / -6;
  } */
  
  .mockup figure {
    grid-column: 5 / -2;
    grid-template-columns: repeat(7, 1fr);
  }
  
  .mockup figure picture {
    grid-column: 1 /  -1;
  }
  
  .mockup figure figcaption {
    grid-column: 5 / -1;
    margin-top: -9rem;
  }
  
  .badges .illustration {
    grid-column: 1 / span 7;
  }
  
  section.banner * {
    grid-column: 1 / -1;
  }
  
  .prototype .illustration {
    grid-column: 3 / 8;
  }
  
  section.mangyoku .info {
    padding-left: calc(var(--gutter)/2);
    padding-right: calc(var(--gutter)/2);
    grid-column-gap: var(--gutter);
  }
  
  .gallery .image-container {
    grid-row-gap: 4.5rem;
  }
  
  .gallery .image-container .gi-01,
  .gallery .image-container .gi-03,
  .gallery .image-container .gi-05 {
    grid-column: 3 / span 4;
  }
  
  .gallery .image-container .gi-02,
  .gallery .image-container .gi-04,
  .gallery .image-container .gi-06 {
    grid-column: 8 / span 4;
  }
  
  .cta.show-main .cta-text-container {
    grid-column: 3 / 12;
  }
  
}

@media (min-width: 1194px) {
  
  .mockup figure {
    grid-column: 5 / -3;
  }
  
  .mockup p {
    grid-column: 9 / -3;
  }
  
  .mockup figure {
    grid-template-columns: repeat(9, 1fr);
  }
  
  .mockup figure figcaption {
    grid-column: 6 / -2;
  }
  
  .badges .illustration {
    grid-column: 6 / -3;
  }
  
  .badges .illustration {
    grid-column: 1 / span 8;
  }
  
  .prototype .info .info-card:last-child {
    grid-column: 5 / -6;
  }
  /* 
  .badges .info-card.right {
    grid-column: 5 / -6;
  } */
  
  .gallery .image-container {
    grid-row-gap: 2rem;
  }
  
  .gallery .image-container .gi-01,
  .gallery .image-container .gi-04 {
    grid-column: 5 / span 4;
  }
  
  .gallery .image-container .gi-02,
  .gallery .image-container .gi-05 {
    grid-column: 9 / span 3;
  }
  
  .gallery .image-container .gi-03, 
  .gallery .image-container .gi-06 {
    grid-column: 12 / span 3;
  }
  
  .cta.show-main .cta-text-container {
    grid-column: 5 / 12;
  }
  
}

@media (min-width: 1920px) {
  
  .intro *, .mockup * {
    grid-column: 7 / -5;
  }
  
  .mockup {
    margin-top: 0;
  }
  
  .mockup figure {
    grid-column: 7 / -5;
    grid-template-columns: repeat(10, 1fr);
  }
  
  .mockup figure figcaption {
    grid-column: 6 / -1;
  }
  
  .mockup p {
    grid-column: 11 / -5;
  }
  
  .diagram .info-card.right {
    grid-column: -2 / -8;
  }
  
  .badges .illustration {
    grid-column: 1 / 9;
  }  
    
  .badges .illustration {
    grid-column: 4 / span 8;    
  }
  
  .prototype .info .info-card:last-child {
    grid-column: 10 / span 6;
  }
  
  .prototype .illustration {
    grid-column: 7 / 12;
  }
  
  .gallery .image-container {
    grid-row-gap: 5.5rem;
  }

  .gallery .image-container .gi-01 {
    grid-column: 5 / span 4;
  }
  
  .gallery .image-container .gi-02 {
    grid-column: 10 / span 4;
  }
  
  .gallery .image-container .gi-03 {
    grid-column: 15 / span 4;
  }
  
  .gallery .image-container .gi-04 {
    grid-column: 5 / span 5;
  }
  
  .gallery .image-container .gi-05 {
    grid-column: 11 /span 4;
    align-self: center;   
  }
  .gallery .image-container .gi-06 {
    grid-column: 15 / span 4;
    align-self: center;   
  }
  
}

@media (min-width: 2250px) {
  
  .intro *, .mockup * {
    grid-column: 12 / -9;
  }
  
  .mockup figure {
    grid-template-columns: repeat(20, 1fr);
  }
  
  .mockup figure figcaption {
    grid-column: 11 / -5;
  }
  
  .badges .illustration {
    grid-column: 7 / span 11;
  }
  
  .diagram .info-card.right {
    grid-column: -9 / -17;
  }
  
  .prototype .info .info-card:last-child, .diagram .info-card.left {
    grid-column: 10 / span 8;
  }
  
  .prototype .illustration {
    grid-column: 12 / span 6;
  }
  
  .gallery .image-container .gi-01 {
    grid-column: 6 / span 6;
  }
  
  .gallery .image-container .gi-02 {
    grid-column: 13 / span 6;
  }
  
  .gallery .image-container .gi-03 {
    grid-column: 20 / span 6;
  }
  
  .gallery .image-container .gi-04 {
    grid-column: 6 / span 6;
  }
  
  .gallery .image-container .gi-05 {
    grid-column: 13 /span 6;
  }
  
  .gallery .image-container .gi-06 {
    grid-column: 20 / span 6;
  }
  
}