.section {
  padding: 3.5rem 0;

  @include media-breakpoint-down(md) {
    padding: 2rem 0;
  }

  &--profile {
    padding: 0 0 6rem;
  }

  &--lightblue {
    background: rgba(215, 224, 244, 0.35);
  }

  &--gray {
    background-color: #F7F7FC;
  }

  &--slider {
    position: relative;
    min-height: 40rem;
    @include media-breakpoint-down(md) {
      margin-bottom: 5rem;
    }
  }

  &--contacts {
    padding-top: 3rem;

    background: url("/shop/images/contacts-bg.jpg") right center no-repeat;
    background-size: auto 100%;

    @include media-breakpoint-down(lg) {
      background: none;
    }
  }
  &--home{
    padding-top: 3rem;
  }
}

.section__header {
  margin-bottom: 4.5rem;

  @include media-breakpoint-down(md) {
    margin-bottom: 3rem;
  }
}

.section__header-list-wrapper {
  position: relative;

  &::after {
    content: "";
    display: block;
    width: 7rem;
    height: 100%;

    pointer-events: none;

    background: linear-gradient(270deg, #FFFFFF 45.15%, rgba(255, 255, 255, 0) 85.45%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }
}

.section__header-list {
  display: flex;
  align-items: center;
  overflow: auto;
  padding-bottom: 1rem;
  padding-right: 7rem;

  list-style: none;
  font-size: 1.6rem;
  color: $primary;

  li {
    margin-right: 1.6rem;
    white-space: nowrap;

    &:last-child {
      margin-right: 0;
      // margin-left: 4rem;

      @include media-breakpoint-down(sm) {
        margin-left: 2rem;
      }
    }
  }

  a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    &.active {
      font-weight: 500;
    }
  }

  &::-webkit-scrollbar {
    height: 3px;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: $primary;
  }
}

.section__header-icon {
  width: fit-content;
  margin: 6rem auto;

  text-align: center;

  @include media-breakpoint-down(lg) {
    margin: 4rem auto;
  }
}

.section__title {
  margin-bottom: 1rem;

  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.3;
  color: $dark;

  @include media-breakpoint-down(sm) {
    font-size: 2rem;
  }

  &--sm {
    font-size: 1.8rem;

    @include media-breakpoint-down(sm) {
      font-size: 1.6rem;
    }
  }

  &--lg {
    font-size: 3.2rem;

    @include media-breakpoint-down(sm) {
      font-size: 2.8rem;
    }
  }
}

.section__title-icon {
  margin-right: 1rem;

  @include media-breakpoint-down(sm) {
    display: block;
    margin-right: 0;
    margin-bottom: 1.4rem;
  }
}

.section__text {
  margin-bottom: 1rem;

  font-size: 16px;
  line-height: 1.5;
  color: #606060;

  &--indent {
    margin-left: 5.3rem;

    @include media-breakpoint-down(md) {
      margin-left: 0;
    }
  }
}


.section__preview {
  justify-content: flex-end;
  height: 100%;
  padding: 3rem;
  color: $dark;

  .link {
    color: $primary;
  }

  @include media-breakpoint-down(lg) {
    margin-bottom: 3rem;
    height: auto;

    background: none;
    padding: 0;
    color: $dark;

    .link {
      color: $primary;
    }
  }
}

.section__preview-title {
  margin-bottom: 8px;

  font-size: 2.4rem;
  font-weight: 600;
}

.section__preview-text {
  font-size: 1.6rem;

  @include media-breakpoint-down(lg) {
    color: #606060;
  }
}