.banner-callout {
  display: flex;
  position: relative;
  align-items: start;

  .banner-close {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 1;

    .dismiss-icon {
      color: $gl-text-color;
      font-size: $gl-font-size;
    }
  }

  .banner-graphic {
    margin: 0 $gl-padding $gl-padding 0;
  }

  &.banner-non-empty-state {
    border-bottom: 1px solid $border-color;
  }

  @include media-breakpoint-down(xs) {
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .banner-title,
    .banner-buttons {
      text-align: center;
    }

    .banner-graphic {
      margin-left: $gl-padding;
    }
  }
}