.grid-con img {
  margin: 0;
  width: 100%;
}

.grid-con {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.item {
  flex: 1 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* gap 1/2 */
.gap--05 {}

/* gap 1 */
.gap--1 .item {}

/* gap 2 */
.gap--2 {}

/* gap 3 */
.gap--3 {}

/* gap 4 */
.gap--4 {}


/* row 1 */
.row--1 {}

/* row 2 */
.row--2 .item {
  flex: 1 50%;
}

.row--2.gap--05 .item {
  max-width: calc(50% - .25em);
  margin-bottom: .5em;
}

.row--2.gap--1 .item {
  max-width: calc(50% - .5em);
  margin-bottom: 1em;
}

.row--2.gap--2 .item {
  max-width: calc(50% - 1em);
  margin-bottom: 2em;
}

.row--2.gap--3 .item {
  max-width: calc(50% - 1.5em);
  margin-bottom: 3em;
}

.row--2.gap--4 .item {
  max-width: calc(50% - 2em);
  margin-bottom: 4em;
}

/* row 3 */
@media (min-width: 700px) {
  .row--3 .item {
    flex: 1 33%;
    max-width: calc(100% / 3);
  }

  .row--3.gap--05 .item {
    max-width: calc(100% / 3 - .34em);
    margin-bottom: .5em;
  }

  .row--3.gap--1 .item {
    max-width: calc(100% / 3 - .67em);
    margin-bottom: 1em;
  }

  .row--3.gap--2 .item {
    max-width: calc(100% / 3 - 1.34em);
    margin-bottom: 2em;
  }

  .row--3.gap--3 .item {
    max-width: calc(100% / 3 - 2em);
    margin-bottom: 3em;
  }

  .row--3.gap--4 .item {
    max-width: calc(100% / 3 - 2.67em);
    margin-bottom: 4em;
  }
}

/* row 4 */

@media (min-width: 600px) {
  .row--4 .item {
    flex: 1 50%;
  }

  .row--4.gap--05 .item {
    max-width: calc(50% - .25em);
    margin-bottom: .5em;
  }

  .row--4.gap--1 .item {
    max-width: calc(50% - .5em);
    margin-bottom: 1em;
  }

  .row--4.gap--2 .item {
    max-width: calc(50% - 1em);
    margin-bottom: 2em;
  }

  .row--4.gap--3 .item {
    max-width: calc(50% - 1.5em);
    margin-bottom: 3em;
  }

  .row--4.gap--4 .item {
    max-width: calc(50% - 2em);
    margin-bottom: 4em;
  }
}

@media (min-width: 990px) {
  .row--4 .item {
    flex: 1 25%;
  }

  .row--4.gap--05 .item {
    max-width: calc(25% - .375em);
    margin-bottom: .5em;
  }

  .row--4.gap--1 .item {
    max-width: calc(25% - .75em);
    margin-bottom: 1em;
  }

  .row--4.gap--2 .item {
    max-width: calc(25% - 1.5em);
    margin-bottom: 2em;
  }

  .row--4.gap--3 .item {
    max-width: calc(25% - 2.33em);
    margin-bottom: 3em;
  }

  .row--4.gap--4 .item {
    max-width: calc(25% - 3em);
    margin-bottom: 4em;
  }
}

/* row 5 */
@media (min-width: 600px) {
  .row--5 .item {
    flex: 1 50%;
  }

  .row--5.gap--05 .item {
    max-width: calc(50% - .25em);
    margin-bottom: .5em;
  }

  .row--5.gap--1 .item {
    max-width: calc(50% - .5em);
    margin-bottom: 1em;
  }

  .row--5.gap--2 .item {
    max-width: calc(50% - 1em);
    margin-bottom: 2em;
  }

  .row--5.gap--3 .item {
    max-width: calc(50% - 1.5em);
    margin-bottom: 3em;
  }

  .row--5.gap--4 .item {
    max-width: calc(50% - 2em);
    margin-bottom: 4em;
  }
}

@media (min-width: 900px) {
  .row--5 .item {
    flex: 1 33%;
    max-width: calc(100% / 3);
  }

  .row--5.gap--05 .item {
    max-width: calc(100% / 3 - .34em);
    margin-bottom: .5em;
  }

  .row--5.gap--1 .item {
    max-width: calc(100% / 3 - .67em);
    margin-bottom: 1em;
  }

  .row--5.gap--2 .item {
    max-width: calc(100% / 3 - 1.34em);
    margin-bottom: 2em;
  }

  .row--5.gap--3 .item {
    max-width: calc(100% / 3 - 2em);
    margin-bottom: 3em;
  }

  .row--5.gap--4 .item {
    max-width: calc(100% / 3 - 2.67em);
    margin-bottom: 4em;
  }
}

@media (min-width: 1025px) {
  .row--5 .item {
    flex: 1 20%;
    max-width: calc(20%);
  }

  .row--5.gap--05 .item {
    max-width: calc(20% - .4em);
    margin-bottom: .5em;
  }

  .row--5.gap--1 .item {
    max-width: calc(20% - .8em);
    margin-bottom: 1em;
  }

  .row--5.gap--2 .item {
    max-width: calc(20% - 1.34em);
    margin-bottom: 2em;
  }

  .row--5.gap--3 .item {
    max-width: calc(20% - 2em);
    margin-bottom: 3em;
  }
}

@media (min-width: 1320px) {
  .row--5.gap--4 .item {
    max-width: calc(20% - 2.67em);
    margin-bottom: 4em;
  }
}

/* row 6 */
@media (min-width: 700px) {
  .row--6 .item {
    flex: 1 33%;
    max-width: calc(100% / 3);
  }

  .row--6.gap--05 .item {
    max-width: calc(100% / 3 - .34em);
    margin-bottom: .5em;
  }

  .row--6.gap--1 .item {
    max-width: calc(100% / 3 - .67em);
    margin-bottom: 1em;
  }

  .row--6.gap--2 .item {
    max-width: calc(100% / 3 - 1.34em);
    margin-bottom: 2em;
  }

  .row--6.gap--3 .item {
    max-width: calc(100% / 3 - 2em);
    margin-bottom: 3em;
  }

  .row--6.gap--4 .item {
    max-width: calc(100% / 3 - 2.67em);
    margin-bottom: 4em;
  }
}

@media (min-width: 1150px) {
  .row--6 .item {
    flex: 1 17%;
    max-width: calc(100% / 6);
  }

  .row--6.gap--05 .item {
    max-width: calc(100% / 6 - .42em);
    margin-bottom: .5em;
  }

  .row--6.gap--1 .item {
    max-width: calc(100% / 6 - .84em);
    margin-bottom: 1em;
  }

  .row--6.gap--2 .item {
    max-width: calc(100% / 6 - 1.67em);
    margin-bottom: 2em;
  }

  .row--6.gap--3 .item {
    max-width: calc(100% / 6 - 2em);
    margin-bottom: 3em;
  }

  .row--6.gap--4 .item {
    max-width: calc(100% / 6 - 2.67em);
    margin-bottom: 4em;
  }
}

/* row 7 */
@media (min-width: 600px) {
  .row--7.gap--05 .item {
    max-width: calc(50% - .25em);
    margin-bottom: .5em;
  }

  .row--7.gap--1 .item {
    max-width: calc(50% - .5em);
    margin-bottom: 1em;
  }

  .row--7.gap--2 .item {
    max-width: calc(50% - 1em);
    margin-bottom: 2em;
  }

  .row--7.gap--3 .item {
    max-width: calc(50% - 1.5em);
    margin-bottom: 3em;
  }

  .row--7.gap--4 .item {
    max-width: calc(50% - 2em);
    margin-bottom: 4em;
  }
}

@media (min-width: 900px) {
  .row--7.gap--05 .item {
    max-width: calc(100% / 3 - .34em);
    margin-bottom: .5em;
  }

  .row--7.gap--1 .item {
    max-width: calc(100% / 3 - .67em);
    margin-bottom: 1em;
  }

  .row--7.gap--2 .item {
    max-width: calc(100% / 3 - 1.34em);
    margin-bottom: 2em;
  }

  .row--7.gap--3 .item {
    max-width: calc(100% / 3 - 2em);
    margin-bottom: 3em;
  }

  .row--7.gap--4 .item {
    max-width: calc(100% / 3 - 2.67em);
    margin-bottom: 4em;
  }
}

@media (min-width: 1100px) {
  .row--7.gap--05 .item {
    max-width: calc(100% / 7 - .43em);
    margin-bottom: .5em;
  }

  .row--7.gap--1 .item {
    max-width: calc(100% / 7 - .86em);
    margin-bottom: 1em;
  }
}

@media (min-width: 1255px) {
  .row--7.gap--2 .item {
    max-width: calc(100% / 7 - 1.34em);
    margin-bottom: 2em;
  }
}

/* row 8 */
.row--8 .item {
  flex: 1 50%;
}

.row--8.gap--05 .item {
  max-width: calc(50% - .25em);
  margin-bottom: .5em;
}

.row--8.gap--1 .item {
  max-width: calc(50% - .5em);
  margin-bottom: 1em;
}

.row--8.gap--2 .item {
  max-width: calc(50% - 1em);
  margin-bottom: 2em;
}

.row--8.gap--3 .item {
  max-width: calc(50% - 1.5em);
  margin-bottom: 3em;
}

.row--8.gap--4 .item {
  max-width: calc(50% - 2em);
  margin-bottom: 4em;
}

@media (min-width: 900px) {
  .row--8.gap--05 .item {
    max-width: calc(25% - .375em);
    margin-bottom: .5em;
  }

  .row--8.gap--1 .item {
    max-width: calc(25% - .75em);
    margin-bottom: 1em;
  }

  .row--8.gap--2 .item {
    max-width: calc(25% - 1.5em);
    margin-bottom: 2em;
  }

  .row--8.gap--3 .item {
    max-width: calc(25% - 2.33em);
    margin-bottom: 3em;
  }

  .row--8.gap--4 .item {
    max-width: calc(25% - 3em);
    margin-bottom: 4em;
  }
}

@media (min-width: 1025px) {
  .row--8.gap--05 .item {
    max-width: calc(12.5% - .437em);
    margin-bottom: .5em;
  }

  .row--8.gap--1 .item {
    max-width: calc(12.5% - .875em);
    margin-bottom: 1em;
  }
}

@media (min-width: 2040px) {
  .row--8.gap--2 .item {
    max-width: calc(12.5% - 1.75em);
    margin-bottom: 2em;
  }
}