.square-grid {
  position: relative;
  width: 100%;
  margin: 2em auto 4em;
  display: grid;
  grid-auto-flow: dense;
  grid-gap: 30px;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(1, 1fr);
  counter-reset: section;
}

.square-grid > div {
  grid-column-start: span 1;
  grid-row-start: span 1;
  height: 0;
  padding-bottom: 100%;
  color: #607d8b;
  background-color: #cfd8dc;
}

@media only screen and (min-width: 1025px) {
  .square-grid {
    max-width: 1024px;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__1x1 {
    grid-column-start: span 1;
    grid-row-start: span 1;
    height: 0;
    padding-bottom: calc(100% + 0px);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__1x2 {
    grid-column-start: span 1;
    grid-row-start: span 2;
    height: 0;
    padding-bottom: calc(200% + 20px);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__1x3 {
    grid-column-start: span 1;
    grid-row-start: span 3;
    height: 0;
    padding-bottom: calc(300% + 40px);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__2x1 {
    grid-column-start: span 2;
    grid-row-start: span 1;
    height: 0;
    padding-bottom: calc(50% + -10px);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__2x2 {
    grid-column-start: span 2;
    grid-row-start: span 2;
    height: 0;
    padding-bottom: calc(100% + 0px);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__2x3 {
    grid-column-start: span 2;
    grid-row-start: span 3;
    height: 0;
    padding-bottom: calc(150% + 10px);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__3x1 {
    grid-column-start: span 3;
    grid-row-start: span 1;
    height: 0;
    padding-bottom: calc(33.33333333333333% + -13.333333333333334px);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__3x2 {
    grid-column-start: span 3;
    grid-row-start: span 2;
    height: 0;
    padding-bottom: calc(66.66666666666666% + -6.666666666666668px);
  }
}

@media only screen and (min-width: 1025px) {
  .square-grid > .grid-desktop-size__3x3 {
    grid-column-start: span 3;
    grid-row-start: span 3;
    height: 0;
    padding-bottom: calc(100% + 0px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid {
    max-width: 767px;
    grid-gap: 15px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__1x1 {
    grid-column-start: span 1;
    grid-row-start: span 1;
    height: 0;
    padding-bottom: calc(100% + 0px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__1x2 {
    grid-column-start: span 1;
    grid-row-start: span 2;
    height: 0;
    padding-bottom: calc(200% + 15px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__1x3 {
    grid-column-start: span 1;
    grid-row-start: span 3;
    height: 0;
    padding-bottom: calc(300% + 30px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__2x1 {
    grid-column-start: span 2;
    grid-row-start: span 1;
    height: 0;
    padding-bottom: calc(50% + -7.5px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__2x2 {
    grid-column-start: span 2;
    grid-row-start: span 2;
    height: 0;
    padding-bottom: calc(100% + 0px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__2x3 {
    grid-column-start: span 2;
    grid-row-start: span 3;
    height: 0;
    padding-bottom: calc(150% + 7.5px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__3x1 {
    grid-column-start: span 3;
    grid-row-start: span 1;
    height: 0;
    padding-bottom: calc(33.33333333333333% + -10px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__3x2 {
    grid-column-start: span 3;
    grid-row-start: span 2;
    height: 0;
    padding-bottom: calc(66.66666666666666% + -5px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .square-grid > .grid-tablet-size__3x3 {
    grid-column-start: span 3;
    grid-row-start: span 3;
    height: 0;
    padding-bottom: calc(100% + 0px);
  }
}

@media only screen and (min-width: 425px) and (max-width: 767px) {
  .square-grid {
    max-width: 424px;
    grid-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 425px) and (max-width: 767px) {
  .square-grid > .grid-mobile-size__1x1 {
    grid-column-start: span 1;
    grid-row-start: span 1;
    height: 0;
    padding-bottom: calc(100% + 0px);
  }
}

@media only screen and (min-width: 425px) and (max-width: 767px) {
  .square-grid > .grid-mobile-size__1x2 {
    grid-column-start: span 1;
    grid-row-start: span 2;
    height: 0;
    padding-bottom: calc(200% + 10px);
  }
}

@media only screen and (min-width: 425px) and (max-width: 767px) {
  .square-grid > .grid-mobile-size__2x1 {
    grid-column-start: span 2;
    grid-row-start: span 1;
    height: 0;
    padding-bottom: calc(50% + -5px);
  }
}

@media only screen and (min-width: 425px) and (max-width: 767px) {
  .square-grid > .grid-mobile-size__2x2 {
    grid-column-start: span 2;
    grid-row-start: span 2;
    height: 0;
    padding-bottom: calc(100% + 0px);
  }
}