.ballad-banners {
  padding: 5px;
  background-color: #f5f5f5;
}

.ballad-banners .close {
  float: right;
}

.ballad-banners__message,
.ballad-banners .field--name-message {
  /* Prevent the message from pushing down the close icon. */
  display: inline-block;
}

/* Add red asterisk '*' for required Web and BHA message fields.
 * This is triggered by the 'mark-required' class added in
 * ballad_banners_form_alter().
 */
.mark-required .form-item__label::after {
  content: "*";
  color: var(--gin-color-danger);
  line-height: 1;
  margin-inline: .15em;
  vertical-align: text-top;
  background: none;
}

/* Hide desktop message on mobile */
@media screen and (max-width: 767px) {
  .banner-desktop-only {
    display: none !important;
  }
}

/* Hide mobile message on desktop */
@media screen and (min-width: 768px) {
  .banner-mobile-only {
    display: none !important;
  }
}