$blocek-gutter: 10px !default;

.wpj-b-row {
   display: flex;
   flex-wrap: wrap;
   gap: $blocek-gutter;
}

.wpj-b-col {
   flex-direction: column;
   flex-basis: calc(100% / var(--lc, 1) * var(--cw, 1) - $blocek-gutter);

   > * {
      flex: auto;
   }
}

.wpj-b-col-1 {
   flex-basis: calc(100% / 12 - #{$blocek-gutter});
}

.wpj-b-col-2 {
   flex-basis: calc(100% / 12 * 2 - #{$blocek-gutter});
}

.wpj-b-col-3 {
   flex-basis: calc(100% / 12 * 3 - #{$blocek-gutter});
}

.wpj-b-col-4 {
   flex-basis: calc(100% / 12 * 4 - #{$blocek-gutter});
}

.wpj-b-col-5 {
   flex-basis: calc(100% / 12 * 5 - #{$blocek-gutter});
}

.wpj-b-col-6 {
   flex-basis: calc(100% / 12 * 6 - #{$blocek-gutter});
}

.wpj-b-col-7 {
   flex-basis: calc(100% / 12 * 7 - #{$blocek-gutter});
}

.wpj-b-col-8 {
   flex-basis: calc(100% / 12 * 8 - #{$blocek-gutter});
}

.wpj-b-col-9 {
   flex-basis: calc(100% / 12 * 9 - #{$blocek-gutter});
}

.wpj-b-col-10 {
   flex-basis: calc(100% / 12 * 10 - #{$blocek-gutter});
}

.wpj-b-col-11 {
   flex-basis: calc(100% / 12 * 11 - #{$blocek-gutter});
}

.wpj-b-col-12 {
   flex-basis: 100%;
}

// todo vyřešit responzi
@media screen and (max-width: $md - 1) {
   .wpj-b-col {
      flex-basis: 100%;
   }
}

