.hy-main {
  display: flex;
  margin: 0 auto;
  max-width: $fullhd;
  padding: 0;
  width: 100%;

  .layout-content {
    padding: 0;
    width: 100%;
  }

  .layout-user-login-page {
    padding: 0 var(--gutter-medium);
    width: 100%;

    div[id^='block-breadcrumbs'] {
      display: none;
    }
  }

  &__common {
    position: relative;
    .layout-content {
      @include breakpoint($narrow) {
        margin: 0 auto;
        width: 100%;
      }
      @include breakpoint($extrawide) {
        order: 2;
        width: 80%;
      }
      @include breakpoint($xlarge) {
        padding: 0 2rem;
      }
    }

    .layout-sidebar-first {
      display: none;

      @include breakpoint($extrawide) {
        background: linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%);
        display: block;
        max-width: 320px;
        order: 1;
        padding: var(--gutter-extrawide) 13px;
        width: 20%;
        height: auto;

        &.menu-is-open {
          background: var(--grayscale-white);
          min-height: 100vh;
          overflow: auto;
        }
      }
    }
  }

  &__large {
    .layout-content {
      padding: 0;
      width: 100%;
      @include breakpoint($extrawide) {
        padding: 0 2rem;
      }
    }
  }
}