// basic

// main
.ok-section--main {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto;
  grid-template-areas: '. first first first first first first first first .';
  align-items: center;
  padding: 50px 0;

  @media (min-width: 1200px) {
    grid-template-areas: '. . . first first first first . . .';
  }

  &.wide {
    @media (min-width: 1200px) {
      grid-template-areas: '. first first first first first first first first .';
    }
  }

  &.extra-section {
    @media (min-width: 851px) {
      grid-template-areas: '. . first first first first first first . .';
    }

    @media (min-width: 1600px) {
      grid-template-areas: '. . first first first first first first . .';
    }
  }
}

.ok-column {
  position: relative;
  z-index: 3;
  color: #777;

  &.first {
    grid-area: first;
  }
  &.second {
    grid-area: second;
  }
  &.third {
    grid-area: third;
  }
  &.fourth {
    grid-area: fourth;
  }
  &.fifth {
    grid-area: fifth;
  }
  &.sixth {
    grid-area: sixth;
  }
  &.seventh {
    grid-area: seventh;
  }
  &.eighth {
    grid-area: eighth;
  }
  &.ninth {
    grid-area: ninth;
  }
  &.tenth {
    grid-area: tenth;
  }
}