.gl-banner {
  @include gl-border-1;
  @include gl-border-gray-100;
  @include gl-border-solid;
  @include gl-display-flex;
  @include gl-font-base;
  @include gl-px-8;
  @include gl-py-6;
  @include gl-rounded-base;
  @include gl-relative;

  p {
    @include gl-line-height-20;
  }
}

.gl-banner-illustration {
  @include gl-flex-shrink-0;
  @include gl-mr-6;

  img {
    width: $grid-size * 15;
  }

  @include media-breakpoint-down(sm) {
    display: none;
  }
}

.gl-banner-title {
  @include gl-font-base;
  @include gl-font-weight-bold;
  @include gl-mt-0;
  @include gl-mb-3;
  @include gl-line-height-20;
}

.gl-banner-close {
  @include gl-absolute;
  @include gl-top-4;
  @include gl-right-4;
}

// Introduction variant
.gl-banner-introduction {
  @include gl-bg-blue-50;
  @include gl-border-blue-300;

  .gl-banner-title {
    @include gl-font-size-h-display;
    @include gl-line-height-28;
  }
}