hy-main.scss

.hy-main {
  display: flex;
  margin: var(--gutter-mobile) auto;
  max-width: $fullhd;
  padding: 0 var(--gutter-mobile) var(--gutter-mobile);

  @include breakpoint($medium) {
    padding: var(--gutter-mobile) 0;
  }

  &.with-sidebar {
    .layout-content {
      @include breakpoint($medium) {
        order: 2;
        padding: var(--gutter-mobile) var(--gutter-medium);
        width: 80%;
      }
      @include breakpoint($wide) {
        padding: var(--gutter-wide);
      }
      @include breakpoint($extrawide) {
        padding: var(--gutter-extrawide);
      }
    }

    .layout-sidebar-first {
      @include breakpoint($medium) {
        border-right: 2px dotted var(--grayscale-medium);
        max-width: 320px;
        order: 1;
        padding: var(--gutter-medium);
        width: 20%;
      }
      @include breakpoint($wide) {
        padding: var(--gutter-wide);
      }
      @include breakpoint($extrawide) {
        padding: var(--gutter-extrawide);
      }
    }
  }

  &.without-sidebar {
    .layout-content {
      width: 100%;
    }
  }
}