@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";

.sidebar {
  width: 100%;
  &__inner {
    padding: 25px 20px 0;
    position: relative;
  }
}

@include breakpoint-sm {
  .sidebar {
    lost-column: 5/12;
    &__inner {
      padding: 30px 20px 0;
      &:after {
        background: $color-gray-border;
        background: linear-gradient(
          to bottom,
          $color-gray-border 0%,
          $color-gray-border 48%,
          $color-white 100%
        );
        bottom: 0;
        content: "";
        height: 540px;
        position: absolute;
        right: -10px;
        top: 30px;
        width: 1px;
      }
    }
  }
}

@include breakpoint-md {
  .sidebar {
    lost-column: 1/3;
    &__inner {
      padding: 40px;
    }
  }
}