peduarte

<div class="Slice">
    <div class="Item NL1"></div>
    <div class="Item T2"></div>
</div>

peduarte

// Defining media query helpers
// Aliases for susy-breakpoint
// http://susydocs.oddbird.net/en/latest/toolkit/#breakpoint
@mixin medium {
    @include susy-breakpoint($bp-medium, $susy-medium) { @content };
}

@mixin to-medium {
    @include susy-breakpoint(0 ($bp-medium - 1), $susy-small) { @content };
}

peduarte

// Defining breakpoints
$bp-medium: 768px !default;
$bp-wide: 1024px !default;

// Defining container widths
$container-medium: 860px !default;
$container-wide: 1024px !default;

peduarte

// Defining grid columns
$g-small: 6 !default;
$g-wide: 12 !default;

// http://susydocs.oddbird.net/en/latest/settings/
$susy: (
    columns: $g-small,
    gutter-position: inside,
    gutters: 0,
    global-box-sizing: border-box,

peduarte

/**
*
* T2 Module
*
**/

.T-2 {
    $cols-medium: 3;
    $cols-wide: 2;

peduarte

/**
*
* NL1 Module
*
**/

.NL1 {
    $cols-medium: 9;
    $cols-wide: 10;

peduarte

/**
*
* Item Module
*
**/

.Item {
    @include flexbox;
    @include flex-direction(column);
    width: 100%;

peduarte

<div class="Item NL1">
  <div class="Item-content">
    <h2 class="Item-headline">Hello World</h2>
    <p class="Item-dip">This is an example of a slice item.</p>
    <a href="" class="Item-cta">Read the full story</a>
  </div>
  
  <div class="Item-media">
    <a href="">
      <img src="">

peduarte

/**
*
* Slice
*
**/

.Slice {
    @include flexbox;
    @include flex-direction(row);
    @include flex-wrap(wrap);

peduarte

<div class="Slice">
  <div class="Item NL1"></div>
  <div class="Item T2"></div>
</div>