: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) {
      max-width: 80rem; // 1216px + (32px + 32px side margins)
    }
  }
}

.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: 94rem; // 1440px + (32px + 32px side margins)
    }
  }
}