@mixin ncfBanner() {
  &__trial-banner {
    font-family: var(--o3-type-body-base-font-family);
    font-size: var(--o3-type-body-base-font-size);
    font-weight: var(--o3-type-body-base-font-weight);
    line-height: var(--o3-type-body-base-line-height);

    background-color: #262a33;
    color: white;
    text-align: center;
    line-height: 40px;

    &-img {
      vertical-align: middle;
      margin: 0 0 0 30px;

      @include oGridRespondTo($until: S) {
        display: none;
      }
    }

    &-content {
      margin: 0;
    }
  }

  &__app-banner {
    background: var(--o3-color-palette-wheat);
    border-top: 1px solid var(--o3-color-palette-black-10);
    border-bottom: 1px solid var(--o3-color-palette-black-10);

    &-inner {
      display: grid;
      grid-template-columns: 100px 1fr;
      grid-template-rows: 1fr 1fr;
      column-gap: 14px;
      overflow: hidden;
      max-width: 700px;
      align-items: center;
      margin: 0 auto;
      padding: 10px;

      @include oGridRespondTo($from: M) {
        grid-template-columns: 100px 1fr 240px;
        grid-template-rows: 140px;
      }
    }

    &-image {
      img {
        width: 100px;
      }

      @include oGridRespondTo($until: M) {
        grid-row: span 2;
      }
    }

    &-strong {
      font-weight: var(--o3-font-weight-semibold);
    }

    &-header {
      font-family: var(--o3-type-body-highlight-font-family);
      font-size: var(--o3-type-body-highlight-font-size);
      font-weight: var(--o3-type-body-highlight-font-weight);
      line-height: var(--o3-type-body-highlight-line-height);
      margin: 0 0 4px;
    }

    &-action {
      display: inline-block;

      a {
        border: 0;
      }
    }
  }
}