hy-main-content-wrapper.scss

:host {
  display: block;
}

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

    // Layout Tablet 480-959px
    // Side navigation disappears to hamburger when width < 1200.
    @include breakpoint($narrow) {
      // the rule is applied to screens >=480px: width 100% - side margins (32px)
      padding: 0 2rem;
    }

    // Large desktop Layout >1441px
    @include breakpoint($overwide) {
      border: 1px solid red;
      max-width: 1216px;
      padding: 0;
    }
  }
}

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

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

    // Large desktop Layout >1441px
    @include breakpoint($overwide) {
      max-width: 1440px;
      padding: 0;
    }
  }
}