@import "../../../src/scss/init";

:root {
  --banner-content-text-alignment: left;
}

.d-p-banner {
  --heading-text-transform: none;
  --media-width: 100%;
  --media-height: 100%;
  --cta-links-alignment: var(--banner-content-text-alignment);

  position: relative;
  display: flex;
  align-items: center;

  &--left-side-content {
    --heading-text-transform: none;
    --banner-content-text-alignment: left;
  }

  &__background {
    @include filling-absolute;
  }

  &__background-media {
    @include covering-media;
  }

  &__background-overlay {
    @include filling-absolute;
  }

  &__content {
    z-index: 1;
  }

  &__content-overlay {
    @include filling-absolute;

    @include media-breakpoint-up(lg) {
      --overlay-width: 50%;
    }

    z-index: -1;
  }

  &__content-column {
    --body-text-color: var(--banner-body-text-color);

    text-align: var(--banner-content-text-alignment);

    @include media-breakpoint-up(lg) {
      &.col-12 {
        max-width: 768px;
        padding: 0;
      }
    }

    .divider {
      display: block;
    }

    .media-icon {
      --media-width: auto;
      --media-height: auto;
    }

    .heading {
      margin-top: var(--content-spacer-s);
    }

    .subtitle {
      margin-top: var(--content-spacer-xs);
    }

    .cta-links {
      margin-top: var(--content-spacer-xl);
    }
  }
}
