\:root
  --row-count: 5

.flex-table
  // display: inline-flex
  // justify-content: center
  // width: 80%
  // margin: 0 auto
  // display: inline-block
  padding: 5px
  box-sizing: border-box
  background: lightblue

  // border: 1px solid black

  & &
    display: none
    width: 100%
    background: gray
    padding: 20px
    box-sizing: border-box

    & .flex-table
      padding-right: 0

//
  // &.flex-table
    // width: 100%
    // background: gray
    // padding: 20px
    // box-sizing: border-box
//
    // &.flex-table
      // padding-right: 0

.flex-line

  padding: 0
  margin: auto
  list-style: none // ??
  border-bottom: 1px solid black

  &:first-child
    border-top: 1px solid black

  background: lightgreen

  // Зачем это ?
  // display: -webkit-box
  // display: -moz-box
  // display: -ms-flexbox
  // display: -webkit-flex
  //

  &.row
    display: flex
    // flex-flow: row wrap
    // justify-content: space-between

    // ничего не сделало
    // flex-direction: row
    // ничего не сделало
    // flex-wrap: nowrap

  // -webkit-flex-flow: row wrap

   &.column
     flex: 1
     flex-flow: column wrap
     align-content: flex-start
     // align-items: stretch

.flex-item
  border-right: 1px solid black
  &:first-child
    border-left: 1px solid black
  // border-bottom: 1px solid black
  background: tomato
  padding: 5px

  // margin: auto
  text-align: center

  .row &
    width: calc(100%/var(--row-count))
    min-height: 20px
  // Что я сделал ?? - оно почемуто заработало было flex-grow: 1
  // В статье написано что это тоже самое, а на практике - не так ?
  // flex: 1
  // TODO: need function that will count % from num childs?
  // магические отступы ))
  // width: 23%

  // line-height: 150px
  // color: white
  // font-weight: bold
  // font-size: 3em
  // text-align: center

  .column &
    width: 100%

.request-action-title
  text-align: center
  background-color: lightblue