_area.scss

/*
  Area
  ======
  Page Layout Areas
*/
.o-area {
  $api: (
    breakpoint: 'm'
  );

  // ::::::::: ROOT SELECTOR
  $root: #{&};
  $rn: str_slice($root, 4);

  // ::::::::: API GRABBER
  @function api($keys...) {
    @return map-deep-get($api, $keys...);
  }

  // ::::::::: TAGS
  // ::::::::: MODIFIER
  // ::::::::: CHILDS

  // [root]__page
  &__wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    padding-bottom: 70px;
  }

  // [root]__container
  &__container {
    @extend %e-container;
    position: relative;
  }

  &__content {
    @extend %e-container;
    display: flex;
    flex-direction: column;
  }

  // [root]__main
  &__main {
    flex: 1;
    order: 1;
    margin-bottom: s(2);

    &-s--sidebar {
      max-width: 558px;
    }
  }

  &__sidebar {
    order: 2;

    @include break(api(breakpoint)) {
      flex: 0 0 225px;
      margin-left: 45px;
      width: 225px;
    }
  }

  &__bottom__inner,
  &__top__inner {
    @extend %e-container;
    position: relative;
  }

  &--s-holz {
    @include bitmap('body_bg', $o: (dimensions: false, repeat: repeat, filetype: jpg));

    .c-page-footer {
      background: none;
      box-shadow: none;
    }

    #{$root}__content {
      margin-top: s(2);

      @include break(api(breakpoint)) {
        flex-direction: row;
      }
    }

    .c-page-header {
      box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    }
  }
}