.gra-alert {
  display: inline-block;
  min-width: 100%;
  height: calc(#{$el-height-s} - 1px);
  background-color: $color-alert;
  border-radius: $border-radius;
  color: $color-alert-font;
  font-size: 1.4rem;
  line-height: $el-height-s;
  padding-inline: $content-padding-inline;
  @include moder($modes) {
    background-color: mode("colorAlert");
    color: mode("colorAlertFont");
  }
  @include min-width($breakpoint-xs) {
    width: 42rem;
    min-width: 42rem;
  }

  &.green {
    background-color: $color-green;
  }

  &.yellow {
    background-color: $color-yellow;
  }

  &.blue {
    background-color: $color-blue;
  }

  &.red {
    background-color: $color-red;
  }
}