@import '../../styles/main';

.LayoutWrapper {
  $_r: &;

  &--dark {
    background-color: $c_catskill_white;
  }

  &--gradient {
    #{$_r}__container {
      padding: 0;
    }
  }

  &__container {
    @extend %container;

    padding-bottom: 60px;
  }

  @media #{$screen-sm} {
    &--gradient {
      background-image: linear-gradient(90deg, $c_catskill_white 50%, $c_white 0);

      #{$_r}__container {
        display: flex;
        padding: 0 32px;
      }
    }
  }

  @media #{$screen-md} {
    &--dark {
      background-image:
        url('../../assets/background/roles-main-left-up.png'),
        url('../../assets/background/roles-main-left-down.png'),
        url('../../assets/background/roles-main-right-up.png'),
        url('../../assets/background/roles-main-right-down.png');
      background-position: center left, bottom left, center right, bottom right;
      background-repeat: no-repeat;
    }

    &__container {
      padding-bottom: 130px;
    }
  }
}
