.hero-banner–border {

display: block;
height: 3px;
margin: 0 auto;
max-width: 1090px;
width: 100%;

.hero-banner--border-contain {
  background: rgba($slate, 0.1);
  display: block;
  height: 3px;
  margin-left: 20px;
  margin-right: 20px;

  @media screen and (min-width: $mq-wide) {
    margin: 0;
  }
}

}

.hero-banner.default {

@include contain-1090;
padding-top: 40px;

@media screen and (min-width: $mq-medium) {
  padding-top: 60px;
}

h1 {
  @include display-1;
  margin-top: 0;
  color: $black;
  margin-bottom: 20px;

  @media screen and (min-width: $mq-medium) {
    margin-left: -5px;
  }
}

.lead-paragraph {
  @include big-description;
  color: $black;
  margin-bottom: 0;
}

.path-frontpage & {
  h1 {
    @include h1;
    margin-bottom: 27px;
  }
}

}

.form-header-meta {

position: relative;
h2 {
  font-size: 1rem;
  font-weight: $fw-regular;
  margin-bottom: 0.25rem;
  @media screen and (min-width: $mq-medium) {
    width: 70%;
  }
}

}

// Progress

.form-progress {

position: relative;
height: 1.5rem;
margin: 0.25rem 0;
@media screen and (min-width: $mq-medium) {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

}

.form-progress-bubble {

background: $purple-1;
padding: 0.25rem 1rem;
border-radius: 1.5rem;
display: inline-block;
position: absolute;
top: 0;
white-space: nowrap;
font-size: 1rem;
line-height: 1;
@media screen and (min-width: $mq-medium) {
  top: -0.25rem;
  right: 0;
  margin: 0;
}

}

.form-progress-bar {

font-size: 0;
color: transparent;
background: $purple-1;
height: 0.75rem;
display: inline-block;
width: 100%;
position: absolute;
top: 0.25rem;
border-radius: 0.375rem;
&::before {
  content: '';
  background: #6b8292;
  height: 0.75rem;
  border-radius: 0.375rem 0 0 0.375rem;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: $mq-medium) {
  top: 0;
  right: 0;
  height: 0.75rem;
  width: 10rem;
  &::before {
    height: 0.75rem;
  }
}

}

@for $i from 1 to 90 {

.form-progress-bar-#{$i}::before {
  width: $i * 1%;
}

}

@for $i from 91 to 99 {

.form-progress-bar-#{$i} {
  background: #6b8292;
  &::before {
    background: $purple-1;
    left: auto;
    right: 0;
    border-radius: 0 0.375rem 0.375rem 0;
    width: (100% - ($i * 1%));
  }
}

}