hy-main-content-wrapper.scss

:host {
  display: block;
}

.with-sidebar {
  .hy-main-content-wrapper {
    margin: 0 auto;
    // Layout Mobile 320-479px
    max-width: 22.5rem; // 328px
    padding: 0 1rem;
    position: relative;

    // Layout Tablet 480-959px
    @include breakpoint($narrow) {
      max-width: 48rem; // 704px
      padding: 0 2rem;
    }

    // Layout Small Desktop 960-1200px
    // Side navigation disappears to hamburger when width < 1200.
    @include breakpoint($wide) {
      max-width: 64rem; // 960px
    }

    // > 1200px
    @include breakpoint($extrawide) {
      max-width: 64rem; // 960px
    }

    // Large desktop Layout >1441px
    @include breakpoint($overwide) {
      max-width: 80rem; // 1216px + (32px + 32px side margins)
    }
  }
}

.without-sidebar {
  .hy-main-content-wrapper {
    margin: 0 auto;
    // Layout Mobile 320-479px
    max-width: 22.5rem; // 328px  + (16px + 16px side margins)
    padding: 0 1rem;
    position: relative;

    // Layout Tablet 480-959px
    @include breakpoint($narrow) {
      max-width: 48rem; // 704px  + (32px + 32px side margins)
      padding: 0 2rem;
    }

    // Layout Small Desktop 960-1200px
    @include breakpoint($wide) {
      max-width: 64rem; // 960px + (32px + 32px side margins)
    }

    // > 1200px
    @include breakpoint($extrawide) {
      max-width: 80rem; // 1216px + (32px + 32px side margins)
    }

    // Large desktop Layout >1441px
    @include breakpoint($overwide) {
      max-width: 94rem; // 1440px + (32px + 32px side margins)
    }
  }
}