@include breakpoint($mobile-breakpoint) {
  section {
    &.news-items-grid {
      @include span(4 of 4 last);

      article {
        width: 100%;
      }
    }
  }
}

@include breakpoint($tablet-breakpoint) {
  section {
    &.news-items-grid {
      @include span(10 of 10 last);

      article {
        flex: 0 0 calc(50% - 20px); /* spans 1/2 */

        &:nth-child(2n+2) {
          @include last;
        }
      }
    }
  }
}

@include breakpoint($desktop-breakpoint) {
  section {
    &.news-items-grid {
      @include span(12 of 12 last);

      article {
        flex: 0 0 calc(16.666666666667% - 20px); /* spans 1/6 */

        &.double {
          flex: 0 0 calc(33.333333333333% - 20px); /* spans 1/3 */
        }

        // &.news-item-image-text {
        //   flex: 0 0 calc(33.333333333333% - 20px); /* spans 1/3 */

        //   .image-container {
        //     width: 50%;
        //   }

        //   .image-container, .text-container {
        //     float: left;
        //   }

        //   .text-container {
        //     width: calc(50% - 40px);
        //   }
        // }

        // &.x3 {
        //   flex: 0 0 calc(50% - 20px); /* spans 1/2 */
        // }

        // &.x4 {
        //   flex: 0 0 calc(66.666666666667% - 20px); /* spans 2/3 */
        // }

        // &.x5 {
        //   flex: 0 0 calc(83.333333333333% - 20px); /* spans 5/6 */
        // }

        // &.x6 {
        //   flex: 0 0 calc(100% - 20px); /* spans 1 */
        // }
      }
    }
  }
}