/*  ========================================================================== */
/*  @group Layout */
/*  ========================================================================== */

/*  ========================================================================== */
/*  @group Layout Helpers */
/*  ========================================================================== */

    @mixin l-constrained() {

        display: block;
        width: 95%;
        max-width: 720px;
        margin: 0 auto;

        @media only screen and (min-width: $breakpoint-narrow) {
            width: 90%;
        }

    }

    .l-constrained {
        @include l-constrained();
    }

/*  ========================================================================== */
/*  @group Header */
/*  ========================================================================== */

    [role="banner"] {
        background-color: darken( $color-background, 10% );
        border-bottom: 1px solid darken( $color-background, 15% );
        padding: 1em 0 1em;
        margin-bottom: 1.5em;
    }
        .branding {}
        .branding-logo {
            margin: 0;
            @include font-size( 24 );
        }


/*  ========================================================================== */
/*  @group Main */
/*  ========================================================================== */

    [role="main"] {

    }

    [role="complementary"] {

    }

/*  ========================================================================== */
/*  @group Footer */
/*  ========================================================================== */

    [role="contentinfo"] {

      clear: both;
      @include font-size( 13 );
      margin-top: 1.5em;
      margin-bottom: 1em;
      padding-top: .5em;
      border-top: 1px solid darken( $color-background, 15% );

    }
