html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: var(--body-background);
}

.abc {
  position: relative;
  width: 100vw;
  margin-left: 0;
  transition: width 360ms ease, margin-left 360ms ease;

  &.side-bar--active {
    width: calc(100vw - var(--side-bar-width));
    margin-left: var(--side-bar-width);
    
    @include mq-480 {
      width: 100%;
      margin: 0;
    }
  }

}
#back-to-top {
  position: relative;
}

.header,
.main,
.footer {
  position: relative;
  width: 100%;
  transition: background-color 360ms ease;
  background: var(--background-color);
  color: var(--text-color);
}

.main {
  min-height: var(--main-height);
  padding-top: var(--main-spacing);
}
.hasHeader .main {
  padding-top: 0;
}
.active--search {
  filter: blur(var(--blur));
}

.content--1 {
  padding: 0 var(--spacing-4);
}
.content--2 {
  padding: 0 var(--spacing-2);
}

$layers: (
  'below': -1, 'base': 1, '100': 100, '200': 200, '300': 300, '400': 400, '500': 500, '600': 600, '700': 700, '800': 800, '900': 900, '1000': 1000
);

@each $layerClass, $layer in $layers {
  .layer--#{$layerClass} {
    z-index: $layer;
  }
}


.article__row:first-of-type {
  padding-top: var(--spacing-5);
}

.article {
  position: relative;
  width: 100%;

  &__row {
    margin-bottom: var(--spacing-5);
  }
}

.article--row {
  padding: var(--spacing-4) 0;
  border-bottom: var(--border-width-1) solid var(--inverted-border-color);

  &:last-of-type:not(:first-of-type) {
    padding-bottom: 0;
    border-bottom: var(--border-none);
  }
}

.aside {
  width: 100%;
  font-size: var(--font-size-14);

  .block {
    margin-bottom: var(--spacing-6);
  }
}

.page-layout {
  width: 100%;
  align-items: stretch;
  flex-flow: row wrap;
  display: flex;
  
  &--1 {
    &__left-main-right {
      .column__left {
        width: var(--page-layout-1-lmr-l-width);
        padding-right: var(--page-layout-1-lmr-l-padding-right);
      }
      .column__main {
        width: var(--page-layout-1-lmr-m-width);
      }
      .column__right {
        width: var(--page-layout-1-lmr-r-width);
        padding-left: var(--page-layout-1-lmr-r-padding-left);
      }
    }
  
    &__left-main {
      .column__left {
        width: var(--page-layout-1-lm-l-width);
        padding-right: var(--page-layout-1-lm-l-padding-right);
      }
      .column__main {
        width: var(--page-layout-1-lm-m-width);
      }
    }
  
    &__main-right {
      .column__main {
        width: var(--page-layout-1-mr-m-width);
      }
      .column__right {
        width: var(--page-layout-1-mr-r-width);
        padding-left: var(--page-layout-1-mr-m-padding-left);
      }
    }
  }
  
  &--2 {
    &__left-main-right {
      .column__left {
        width: var(--page-layout-2-lmr-l-width);
        margin-top: var(--page-layout-2-lmr-l-margin-top);
        padding-right: var(--page-layout-2-lmr-l-padding-right);
      }
      .column__main {
        width: var(--page-layout-2-lmr-m-width);
        margin-top: var(--page-layout-2-lmr-m-margin-top);
        padding-right: var(--page-layout-2-lmr-m-padding-right);
      }
      .column__right {
        width: var(--page-layout-2-lmr-r-width);
        margin-top: var(--page-layout-2-lmr-r-margin-top);
      }
    }
  
    &__left-main {
      .column__left {
        width: var(--page-layout-2-lm-l-width);
        margin-top: var(--page-layout-2-lm-l-margin-top);
        padding-right: var(--page-layout-2-lm-l-padding-right);
      }
      .column__main {
        width: var(--page-layout-2-lm-m-width);
        margin-top: var(--page-layout-2-lm-m-margin-top);
      }
    }
  
    &__main-right {
      .column__main {
        width: var(--page-layout-2-mr-m-width);
        margin-top: var(--page-layout-2-mr-m-margin-top);
        padding-right: var(--page-layout-2-mr-m-padding-right);
      }
      .column__right {
        width: var(--page-layout-2-mr-r-width);
        margin-top: var(--page-layout-2-mr-r-margin-top);
      }
    }
  }

  &--3 {
    &__left-main-right {
      .column__left {
        width: var(--page-layout-3-lmr-l-width);
        padding-right: var(--page-layout-3-lmr-l-padding-right);
      }
      .column__main {
        width: var(--page-layout-3-lmr-m-width);
      }
      .column__right {
        width: var(--page-layout-3-lmr-r-width);
        padding-left: var(--page-layout-3-lmr-r-padding-left);
      }
    }
  
    &__left-main {
      .column__left {
        width: var(--page-layout-3-lm-l-width);
        padding-right: var(--page-layout-3-lm-l-padding-right);
      }
      .column__main {
        width: var(--page-layout-3-lm-m-width);
      }
    }
  
    &__main-right {
      .column__main {
        width: var(--page-layout-3-mr-m-width);
        padding-right: var(--page-layout-3-mr-m-padding-right);
      }
      .column__right {
        width: var(--page-layout-3-mr-r-width);
      }
    }
  }
}
  
@include mq-1024 {
  .page-layout {
    .column__right {
      margin-top: var(--spacing-5);
    }
  
    &--2 {
      &__left-main-right {
        .column__main {
          width: calc(100% - 13.18%);
        }
        .column__right {
          width: 100%;
          padding: 0 13.18%;
        }
        }
    }
  }
  aside.grid--se-10-13 {
    order: 1;
  }
}
@include mq-768 {
  .page-layout {
    width: 100%;
    
    div[class*='column__'] {
      width: 100%;
      padding: 0 !important;
    }
    
    .column__left,
    .column__main,
    .column__right {
      width: 100%;
      padding: 0;
    }
    .column__left,
    .column__right {
      margin: 0;
    }
    
    &--1 {
      &__left-main-right {
        .column__left,
        .column__right {
          margin-top: 0;
        }
      }
    }
    &--2 {
      &__left-main-right {
        .column__right {
          padding: 0;
        }
      }
    }
    &--3 {
      &__left-main-right {
        .column__left {
          width: 200px;
        }
        .column__main {
          width: calc(100% - 350px);
        }
        .column__right {
          width: 150px;
        }
      }
    
      &__left-main {
        .column__left {
          width: 200px;
        }
        .column__main {
          width: calc(100% - 200px);
        }
      }
    
      &__main-right {
        .column__main {
          width: calc(100% - 1500px);
        }
        .column__right {
          width: 150px;
          padding-right: 24px;
        }
      }
    }
  }
  .section--full {
    height: auto;
    max-height: initial;
    min-height: initial;
  }
}

@include mq-480 {	
	.page-layout--2__left-main {
		.column__left {
			display: none;
		}
		.column__main {
			width: 100%;
		}
	}
	
	.page-layout--2__left-main-right {
		.column__left,
		.column__main,
		.column__right {
			width: 100%;
			margin: 0;
		}
		.column__left {
			margin-bottom: var(--spacing-4);
		}
		.column__main {
			margin-bottom: var(--spacing-4);
			padding: 0;
		}
		.column__right {
			margin-bottom: var(--spacing-4);
		}
	}
	
}	
@include print {
  .main {
    padding: 0;
  }
  .page-layout {
    .column__left,
		.column__right {
      display: none;
    }
    .column__main {
      width: 100%;
      margin: 0;
      padding: 0;

      h1,
      .heading--1 {
        width: 100%;
      }

      .grid__wrapper {
        @include no-print;
      }
    }
  }
}