.kitchen-sink {

  &__block {
    border-top: 1px solid $c-border;
    margin-bottom: rem-calc(60);
    padding-top: rem-calc(30);
  }

  &__description {
    border-left: rem-calc(6) solid $c-brand;
    margin-bottom: rem-calc(50);
    margin-top: rem-calc(30);
    padding: rem-calc(1) rem-calc(30);
  }

  &__description-title {
    margin: rem-calc(12) 0;
  }

  &__description-text {
    color: $c-text;
    font-size: rem-calc(14);
  }

  &__example {

    &:not(:last-child) {
      margin-bottom: rem-calc(50);
    }
  }

  &__example--wide {
    grid-column: 1 / -1;
  }

  &__example--canvas {
    $canvas-bg: #ccc;
    $canvas-fg: #dfdfdf;
    background-color: $canvas-bg;
    background-image: linear-gradient(45deg, $canvas-fg 25%, transparent 25%, transparent 75%, $canvas-fg 75%, $canvas-fg),
    linear-gradient(45deg, $canvas-fg 25%, transparent 25%, transparent 75%, $canvas-fg 75%, $canvas-fg);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
  }
}