.item {
  margin: 1em 0;
}
.item__number {
  position:relative;
  display: inline-block;
  padding: 15px;
  width: 45px;
  height: 45px;
  color: #3080cf;
  border-radius: 50%;
  margin-right: 10px;
  text-align: center;
  z-index: 2;

  background-color: rgba(255,255,255, 0.6);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px;
}
.item__topic {
  padding-left: 80px;
  position: relative;
}
.item__topic:before {
  content: "";
  position: absolute;
  width: 5px;
  height: calc(100% + 1em);
  top: 0;
  left: 35px;
}
.item__topic__title {
  font-weight: 700;
  font-size: 24px;
}
.item__topic__author {
  font-size: 18px;
  color: #cfcfcf;
}

@media (min-width: 768px) {
  main {
      display: none;
      max-width: 100%;
      min-height: 150vh;
      padding-bottom: 5em;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: min-content minmax(100px, 0.8fr) repeat(2, 125px) 320px repeat(2, 125px);
  }

  h1 {
      font-size: 3rem;
      grid-column: 1/-1;
  }

  .item {
      margin: 0;
  }
  .item:nth-of-type(1) {
      grid-column: 1;
      grid-row: 3;
  }
  .item:nth-of-type(2) {
      grid-column: 2;
      grid-row: 4;
  }
  .item:nth-of-type(3) {
      grid-column: 3;
      grid-row: 3;
  }
  .item:nth-of-type(4) {
      grid-column: 4;
      grid-row: 4;
  }
  .item:nth-of-type(5) {
      grid-column: 1;
      grid-row: 6;
  }
  .item:nth-of-type(5) .item__topic {
      width: 180%;
  }
  .item:nth-of-type(6) {
      grid-column: 2;
      grid-row: 7;
      margin-left: 30%;
  }
  .item:nth-of-type(6) .item__topic {
      width: 200%;
  }
  .item:nth-of-type(7) {
      grid-column: 3;
      grid-row: 6;
      margin-left: 30%;
  }

  .item {
      position: relative;
      text-align: center;
  }
  .item__number {
      width: 95px;
      height: 95px;
      margin: auto;
      background-size: 48px;
  }
  .item__topic {
      position: absolute;
      text-align: left;
      width: 130%;
      left: 50%;
      margin-left: -35px;
      padding-left: 60px;
  }
  .item__topic__title {
      margin-bottom: 8px;
  }
  .item--top .item__topic {
      bottom: calc(100% + 1em);
  }
  .item--bottom .item__topic {
      top: 100%;
      padding-top: 10px;
  }
  .item--left .item__topic {
      text-align: right;
      right: 50%;
      left: auto;
      padding-right: 25px;
      width: 140%;
  }
  .item--left .item__topic:before {
      left: auto;
      right: 0;
  }
}
@media (min-width: 1240px) {
  main {
      display: none;
      margin:0 auto;
      max-width: 1150px;
      min-height: 120vh;
      grid-template-columns: repeat(4, 125px) 20px repeat(3, 125px) 1fr;
      grid-template-rows: min-content 25% repeat(2, min-content);
      grid-gap: 10px;
  }

  .item:nth-of-type(1) {
      grid-column: 1;
      grid-row: 3;
  }
  .item:nth-of-type(1) .item__topic {
      padding-bottom: 5em;
  }
  .item:nth-of-type(2) {
      grid-column: 2;
      grid-row: 4;
  }
  .item:nth-of-type(2) .item__topic {
      padding-top: 6em;
  }
  .item:nth-of-type(3) {
      grid-column: 3;
      grid-row: 3;
  }
  .item:nth-of-type(3) .item__topic {
      padding-bottom: 11em;
  }
  .item:nth-of-type(4) {
      grid-column: 4;
      grid-row: 4;
      margin-left: 20%;
  }
  .item:nth-of-type(4) .item__topic {
      padding-top: 3em;
      width: 220%;
      margin-right: -16px;
  }
  .item:nth-of-type(5) {
      grid-column: 6;
      grid-row: 3;
  }
  .item:nth-of-type(5) .item__topic {
      padding-bottom: 2em;
  }
  .item:nth-of-type(6) {
      grid-column: 7;
      grid-row: 4;
      margin-left: 15%;
  }
  .item:nth-of-type(6) .item__topic {
      padding-top: 8em;
      left: calc(50% + 7px);
  }
  .item:nth-of-type(7) {
      grid-column: 8;
      grid-row: 3;
  }
  .item:nth-of-type(7) .item__topic {
      padding-bottom: 5em;
      width: 220%;
      left: 70%;
  }
}
.item:nth-of-type(1) .item__number {
  background-image: url("https://s.okno.rs/solutions/icons/user.svg");
}
.item:nth-of-type(1) .item__topic:before {
  background: rgba(255,255,255, 0.6);
}
.item:nth-of-type(1) .item__topic__title {
  color: #fafafa;
}
.item:nth-of-type(2) .item__number {
  background-image: url("https://s.okno.rs/solutions/icons/certified.svg");
}
.item:nth-of-type(2) .item__topic:before {
  background: rgba(255,255,255, 0.6);
}
.item:nth-of-type(2) .item__topic__title {
  color: #fafafa;
}
.item:nth-of-type(3) .item__number {
  background-image: url("https://s.okno.rs/solutions/icons/location.svg");
}
.item:nth-of-type(3) .item__topic:before {
  background: rgba(255,255,255, 0.6);
}
.item:nth-of-type(3) .item__topic__title {
  color: #fafafa;
}
.item:nth-of-type(4) .item__number {
  background-image: url("https://s.okno.rs/solutions/icons/building.svg");
}
.item:nth-of-type(4) .item__topic:before {
  background: rgba(255,255,255, 0.6);
}
.item:nth-of-type(4) .item__topic__title {
  color: #fafafa;
}
.item:nth-of-type(5) .item__number {
  background-image: url("https://s.okno.rs/solutions/icons/wall.svg");
}
.item:nth-of-type(5) .item__topic:before {
  background: rgba(255,255,255, 0.6);
}
.item:nth-of-type(5) .item__topic__title {
  color: #fafafa;
}
.item:nth-of-type(6) .item__number {
  background-image: url("https://s.okno.rs/solutions/icons/hammer.svg");
}
.item:nth-of-type(6) .item__topic:before {
  background: rgba(255,255,255, 0.6);
}
.item:nth-of-type(6) .item__topic__title {
  color: #fafafa;
}
.item:nth-of-type(7) .item__number {
  background-image: url("https://s.okno.rs/solutions/icons/measuring.svg");
}
.item:nth-of-type(7) .item__topic:before {
  background: rgba(255,255,255, 0.6);
}
.item:nth-of-type(7) .item__topic__title {
  color: #fafafa;
}

@media (min-width: 1240px) {
  .item {
      overflow: visible;
  }
  .item:before, .item:after {
      content: "";
      position: absolute;
      transform: skew(45deg);
      z-index: -1;
      opacity: 0.3;
  }
  .item:nth-of-type(1):before {
      background: #fafafa;
      width: 120%;
      height: 30px;
      left: 0;
      margin-left: -68%;
      bottom: 25%;
  }
  .item:nth-of-type(1):after {
      background: #fafafa;
      width: 40px;
      height: 120%;
      right: 0;
      top: 50%;
  }
  .item:nth-of-type(2):before {
      background: #fafafa;
      width: 35px;
      height: 80%;
      transform: none;
      left: 20%;
      bottom: 38%;
  }
  .item:nth-of-type(2):after {
      background: #fafafa;
      transform: skew(-55deg);
      opacity: 0.5;
      width: 35px;
      height: 25px;
      bottom: 118%;
      left: 35%;
  }
  .item:nth-of-type(3):before {
      background: #fafafa;
      width: 35px;
      height: 45px;
      transform: none;
      left: -59%;
      bottom: 30%;
  }
  .item:nth-of-type(3):after {
      background: #fafafa;
      opacity: 0.5;
      width: 108%;
      height: 34px;
      bottom: 40%;
      left: -46%;
  }
  .item:nth-of-type(4):before {
      background: #fafafa;
      width: 40px;
      height: 120%;
      left: -65%;
      bottom: 55%;
  }
  .item:nth-of-type(4):after {
      background: #fafafa;
      width: 105%;
      height: 30px;
      top: 20%;
      left: -5%;
  }
  .item:nth-of-type(5):before {
      background: #fafafa;
      width: 35px;
      transform: none;
      height: 107%;
      left: -49%;
      bottom: -52%;
  }
  .item:nth-of-type(5):after {
      background: #fafafa;
      opacity: 0.6;
      width: 72%;
      height: 35px;
      top: 45%;
      left: -35%;
  }
  .item:nth-of-type(6):before {
      background: #fafafa;
      width: 40px;
      height: 120%;
      left: -49%;
      top: -63%;
  }
  .item:nth-of-type(6):after {
      background: #fafafa;
      transform: none;
      width: 170%;
      height: 40px;
      bottom: 43%;
      left: 22%;
  }
  .item:nth-of-type(7):before {
      transform: scaleX(-1);
      opacity: 0.5;
      border-left: 35px solid #fafafa;
      border-bottom: 40px solid transparent;
      height: 120px;
      width: 0;
      bottom: -65%;
      left: 18%;
  }
  .item:nth-of-type(7):after {
      top: 37%;
      left: 17%;
      transform: scaleX(-1);
      border-top: 35px solid #fafafa;
      border-right: 35px solid transparent;
      height: 0;
      width: 295%;
  }
}