.section::after, .section::before {
  display: none;
}


.transition-after, .transition-before {
  position: relative;
}


.transition-after::after, .transition-before::before {
  display: block !important;
  position: absolute;
  width: 100%;
  pointer-events: none;
  transform-origin: top center;
}


.transition-before::before {
  transform: translateY(1px) scale(-1, -2);
  @include media-breakpoint-up(md) {
    transform: translateY(1px) scale(-1, -1);
  }
}


.transition-after::after {
  transform: translateY(-1px) scale(1, 2);

  @include media-breakpoint-up(md) {
    transform: translateY(-1px) scale(1, 1);
  }
  z-index: 1;
}


.transition-after + {
  .section, .content-wrapper, .content-wrapper ~ .sidebar-wrapper {
    padding-top: 3vw;
  }
}


// generate all 5 transition possiblities in every available color

@for $i from 1 through 5 {
  @each $color, $value in $colors {
    @include transition-variant('.bg-#{$color}.transition-type-#{$i}', transition_content-#{$i}--#{$color});
  }
}


// define available hero transitions and loop through them

$hero-transitions: (
        "transition_hero-1" : 58%,
        "transition_hero-2" : 67%,
        "transition_hero-3" : 58%,
        "transition_hero-4" : 53%,
        "transition_hero-5" : 64%,
        "transition_hero-1-inverse" : 58%,
        "transition_hero-2-inverse" : 67%,
        "transition_hero-3-inverse" : 58%,
        "transition_hero-4-inverse" : 53%,
        "transition_hero-5-inverse" : 64%
);

 .section-hero.transition-after {
   &::after {
     position: absolute;
     transform-origin: center -15%;
   }
   //+ .section {
   //  padding-top: inherit;
   //}
 }

@each $type, $value in $hero-transitions {
  $i: index(map_keys($hero-transitions), #{$type});
  @include transition-variant('.section-hero.transition-type-#{$i}', $type, $value);
}
