/**
 * The layout when there are two sidebars.
 */

/**
 * Use 3 grid columns for smaller screens.
 */



@include breakpoint($desktop) {

  @include add-grid(14);
  @include add-gutter(1/3);

  .two-sidebars {
    /* Span 3 columns, starting in 2nd column from left. */
    #content {
      @include grid-span(8, 2);
    }

    /* Span 1 column, starting in 5th column from left. */
    .sidebars {
      @include grid-span(4, 11);
    }
  }

}


@include breakpoint($lg-desktop) {

  @include add-grid(14);
  @include add-gutter(1/3);

  .two-sidebars {
    /* Span 3 columns, starting in 2nd column from left. */
    #content {
      @include grid-span(7, 4);
    }

    .sidebars {
      float: none;
      width: auto;
      margin: 0;

      /* Span 1 column, starting in 1st column from left. */
      .sidebar-first {
        @include grid-span(3, 1);
      }

      /* Span 1 column, starting in 5th column from left. */
      .sidebar-second {
        @include grid-span(4, 11);
      }
    }
  }

}