= mixin('demo-block', 'markup', 'layout = columns', 'grid = false');
  div class='layout--gutter screen-tablet:layout--${this.layout} justify-between pt-4'
    - if (this.layout === 'columns')
      - this.padding = 'screen-tablet:pr-2';

    - if (this.grid === 'false')
      div class='${this.padding}'
        - symbol = false;
        - instance = false;
        = partial('../' + this.markup);

    - if (this.grid === 'false')
      div
        div class='code-block mb-1'
          pre
            = 'code{{ '+ this.markup +' }}';

    - if (typeof this.grid === 'object')
      div class='layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter'
        - let keys = Object.keys(this.grid);
        - let even = (keys.length % 2 == 0);

        - for (key in this.grid)
          - value = this.grid[key];
          div class='flex flex-col justify-between items-center border border-color-grey-lightest p-2'
            div class='w-full'
              = partial('../' + this.markup);

          - if (even && keys.indexOf(key) === keys.length - 1)
            div