presidential-innovation-fellows/hack-the-paygap

.usa-alert {
  background-color: $color-gray-lightest;  
  background-position: 1rem 2rem;
  background-repeat: no-repeat;
  background-size: 4rem;
  margin-top: 1.5em;
  padding: 1em;

  @include media($medium-screen) {
    background-size: 5.2rem;
  }

  ul {
    margin-bottom: 0;
    margin-top: 1em;
  }
}

.usa-alert-icon {
  display: table-cell;
  padding-right: 1rem;
}

.usa-alert-body {
  display: table-cell;
  padding-left: 3.5rem;
  vertical-align: top;

  @include media($medium-screen) {
    padding-left: 5rem;
  }
}

.usa-alert-heading {
  margin-bottom: .3rem;
  margin-top: 0;
  
  @include media($medium-screen) {
    margin-top: .3rem;
  }
}

.usa-alert-text {
  font-family: $font-sans;
  margin-bottom: 0;
  margin-top: 0;
}

.usa-alert-success {
  background-color: $color-green-lightest;
  background-image: url('../img/alerts/success.png');  
  background-image: url('../img/alerts/success.svg');  
}

.usa-alert-warning {
  background-color: $color-gold-lightest;
  background-image: url('../img/alerts/warning.png');  
  background-image: url('../img/alerts/warning.svg');   
}

.usa-alert-error {
  background-color: $color-secondary-lightest;
  background-image: url('../img/alerts/error.png');  
  background-image: url('../img/alerts/error.svg');   
}

.usa-alert-info {
  background-color: $color-primary-alt-lightest;
  background-image: url('../img/alerts/info.png');  
  background-image: url('../img/alerts/info.svg');   
}

.usa-alert-no_icon {
 background-image: none; 
}