hr {
  margin-top: 21px;
  margin-bottom: 21px;
  border: 0;
  border-top: none;
  background-color: transparent;
  background-size: contain;
  
  &.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  
  &.solid {
    border-top: 3px solid #444;
    
    &.light {
      border-top: 3px solid #FFF;
    }
  }
  
  &.dashed {
    border-top: 3px dashed #444;
    
    &.light {
      border-top: 3px dashed #FFF;
    }
  }
  
  &.flourish-01 {
    background-image: url(images/base/horizontal-rule/flourish-01.svg);
    background-repeat: no-repeat;
    background-position: left center;
    height: 14vw;
    
    &.light {
      background-image: url(images/base/horizontal-rule/flourish-01-light.svg);
    }
  }
  
  &.flourish-02 {
    background-image: url(images/base/horizontal-rule/flourish-02.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 12vw;
    
    &.light {
      background-image: url(images/base/horizontal-rule/flourish-02-light.svg);
    }
  }
  
  &.needle {
    background-image: url(images/base/horizontal-rule/needle.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 4vw;
    
    &.light {
      background-image: url(images/base/horizontal-rule/needle-light.svg);
    }
  }
  
  &.sign {
    background-image: url(images/base/horizontal-rule/sign.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 10vw;
    
    &.light {
      background-image: url(images/base/horizontal-rule/sign-light.svg);
    }
  }
  
  &.splash {
    background-image: url(images/base/horizontal-rule/splash.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 9vw;
    
    &.light {
      background-image: url(images/base/horizontal-rule/splash-light.svg);
    }
  }
  
  &.tribal {
    background-image: url(images/base/horizontal-rule/tribal.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 7vw;
    
    &.light {
      background-image: url(images/base/horizontal-rule/tribal-light.svg);
    }
  }
  
  &.tribe {
    background-image: url(images/base/horizontal-rule/tribe.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 10vw;
    
    &.light {
      background-image: url(images/base/horizontal-rule/tribe-light.svg);
    }
  }
  
}