// "Hero" header
.hero__wrapper {
  position: relative;
  height: 105px;
  width: 100%;
  overflow: hidden;

  border-bottom: 10px solid $color-secondary-1-2;
}

.hero__title {
  z-index: 2;
  position: absolute;
  left: 0;
  // right: 0;
  bottom: 10px;
  background-color: $color-secondary-1-4;

  margin-bottom: 0;

}

.hero__slope {
  position: absolute;
  top: 0;
  left: 0;

  z-index: 1;
  width: 150%;
  height: 200px;
  background-color: $color-secondary-1-4;

  transform-origin: left top;
  transform: rotate(3deg);

}

// "Hero" header
.hero__wrapper {
  position: relative;
  height: 105px;
  width: 100%;
  overflow: hidden;
}

.hero__title {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 10px;
  background-color: $color-secondary-1-4;

  margin-bottom: 0;

}

.hero__slope {
  position: absolute;
  top: 0;
  left: 0;

  z-index: 1;
  width: 150%;
  height: 200px;
  background-color: $color-secondary-1-4;

  transform-origin: left top;
  transform: rotate(3deg);

  border-top: 10px solid $color-secondary-1-2;
}

Move border on hero element from bottom to top
Move border on hero element from bottom to top
