Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="l-row l-desktop-row">
    <div class="l-desktop-row__item flex-2">
        <section class="island">
            <h1>We build in pursuit of a cause that is greater than ourselves.</h1>
            <div class="l-row l-tablet-row l-tablet-row--max-2">
                <div class="l-tablet-row__item">
                    <section class="island">
                        <h1 class="h3">Empowering journalists</h1>
                        <p>We build products that make it easier for journalists to publish informative and delightful stories.</p>
                        <div class="l-row l-default-row l-default-row--max-2">
                            <div class="l-default-row__item">
                                <div class="island">foo</div>
                            </div>
                            <div class="l-default-row__item">
                                <div class="island">foo</div>
                            </div>
                            <div class="l-default-row__item">
                                <div class="island">foo</div>
                            </div>
                            <div class="l-default-row__item">
                                <div class="island">foo</div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="l-tablet-row__item">
                    <section class="island">
                        <h1 class="h3">Coding in the open</h1>
                        <p>We do all our coding in public. Sadly, the same can be said of our karaoke.</p>
                    </section>
                </div>
                <div class="l-tablet-row__item">
                    <section class="island">
                        <h1 class="h3">Moving fast</h1>
                        <p>We spend our energy on the right things, shipping code and then rapidly iterating on it. Move fast, break news.</p>
                    </section>
                </div>
                <div class="l-tablet-row__item">
                    <section class="island">
                        <h1 class="h3">Using the best tool for the job</h1>
                        <p>We mostly program in Scala and Javascript, but we use the best tool that solves the problem.</p>
                    </section>
                </div>
            </div>
        </section>
    </div>
    <div class="l-desktop-row__item flex-1">
        <section class="island">
            <h1>What's it like to work at the Guardian?</h1>
            <p>Members of our team talk about what they enjoy about working at the Guardian.</p>
        </section>
    </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

$tablet: 500px;
$desktop: 800px;

@mixin breakpoint($size) {
    @media (min-width: $size) {
        @content;
    }
}

@mixin grid($unit) {
    .l-#{$unit}-row {
        display: flex;
        margin-left: -1rem;
    }

    .l-#{$unit}-row--max-2 {
        flex-wrap: wrap;
    }

    .l-#{$unit}-row__item {
        box-sizing: border-box;
        padding-left: 1rem;

        // Add more modifiers for different max values
        .l-#{$unit}-row--max-2 & {
            flex-basis: 50%;
        }
    }
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

@include grid(default);

@include breakpoint($tablet) {
    @include grid(tablet);
}

@include breakpoint($desktop) {
    @include grid(desktop);
}

.island {
    background: hsl(0,0%, 85%);

    .island {
        background: hsl(0,0%, 75%);

        .island {
            background: hsl(0,0%, 65%);
        }
    }
}

SassMeister-output.css

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.l-default-row {
  display: flex;
  margin-left: -1rem;
}

.l-default-row--max-2 {
  flex-wrap: wrap;
}

.l-default-row__item {
  box-sizing: border-box;
  padding-left: 1rem;
}
.l-default-row--max-2 .l-default-row__item {
  flex-basis: 50%;
}

@media (min-width: 500px) {
  .l-tablet-row {
    display: flex;
    margin-left: -1rem;
  }

  .l-tablet-row--max-2 {
    flex-wrap: wrap;
  }

  .l-tablet-row__item {
    box-sizing: border-box;
    padding-left: 1rem;
  }
  .l-tablet-row--max-2 .l-tablet-row__item {
    flex-basis: 50%;
  }
}
@media (min-width: 800px) {
  .l-desktop-row {
    display: flex;
    margin-left: -1rem;
  }

  .l-desktop-row--max-2 {
    flex-wrap: wrap;
  }

  .l-desktop-row__item {
    box-sizing: border-box;
    padding-left: 1rem;
  }
  .l-desktop-row--max-2 .l-desktop-row__item {
    flex-basis: 50%;
  }
}
.island {
  background: #d9d9d9;
}
.island .island {
  background: #bfbfbf;
}
.island .island .island {
  background: #a6a6a6;
}

SassMeister-rendered.html

<div class="l-row l-desktop-row">
    <div class="l-desktop-row__item flex-2">
        <section class="island">
            <h1>We build in pursuit of a cause that is greater than ourselves.</h1>
            <div class="l-row l-tablet-row l-tablet-row--max-2">
                <div class="l-tablet-row__item">
                    <section class="island">
                        <h1 class="h3">Empowering journalists</h1>
                        <p>We build products that make it easier for journalists to publish informative and delightful stories.</p>
                        <div class="l-row l-default-row l-default-row--max-2">
                            <div class="l-default-row__item">
                                <div class="island">foo</div>
                            </div>
                            <div class="l-default-row__item">
                                <div class="island">foo</div>
                            </div>
                            <div class="l-default-row__item">
                                <div class="island">foo</div>
                            </div>
                            <div class="l-default-row__item">
                                <div class="island">foo</div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="l-tablet-row__item">
                    <section class="island">
                        <h1 class="h3">Coding in the open</h1>
                        <p>We do all our coding in public. Sadly, the same can be said of our karaoke.</p>
                    </section>
                </div>
                <div class="l-tablet-row__item">
                    <section class="island">
                        <h1 class="h3">Moving fast</h1>
                        <p>We spend our energy on the right things, shipping code and then rapidly iterating on it. Move fast, break news.</p>
                    </section>
                </div>
                <div class="l-tablet-row__item">
                    <section class="island">
                        <h1 class="h3">Using the best tool for the job</h1>
                        <p>We mostly program in Scala and Javascript, but we use the best tool that solves the problem.</p>
                    </section>
                </div>
            </div>
        </section>
    </div>
    <div class="l-desktop-row__item flex-1">
        <section class="island">
            <h1>What's it like to work at the Guardian?</h1>
            <p>Members of our team talk about what they enjoy about working at the Guardian.</p>
        </section>
    </div>
</div>