@if $debug-color == true {
  $blok-colors: (
    1: #4ac700,
    2: #d10031,
    3: #abda00,
    4: #a10087,
    5: #bf42ab,
    6: #ed5276,
    7: #86e44e,
    8: #d3f655,
    9: #b41e9c,
    10: #ea2755,
    11: #6adf25,
    12: #c9f429,
    13: #81006d,
    14: #a80027,
    15: #3ca000,
    16: #8ab000,
    17: #82001e,
    18: #2e7c00,
    19: #6b8800,
    20: #640054
  );

  $inner-padding-color: rgba(51, 51, 51, .295);
  $zone-color: #ccc;
  $wrapper-color: #ddee9b;

  @each $i, $color in $blok-colors {
    .grid-blok.grid_#{$i} {
      background: linear-gradient(135deg, darken($inner-padding-color, 10%) 0%, lighten($inner-padding-color, 30%) 100%);
      background-color: $inner-padding-color;

      .grid-title,
      .grid-inside {
        background-color: $color;
      }
    }
  }

  .wrapper_#{$columns-large} {
    background-color: $wrapper-color;
  }

  .grid-zone {
    background: linear-gradient(135deg, lighten($zone-color, 10%) 0%, darken($zone-color, 30%) 100%);
    background-color: $zone-color;
  }

  * {
    font-family: "Roboto Condensed", sans-serif;
  }

  h2,
  p {
    line-height: 1.5;
    margin: 0;
  }
}