.image-banner-with-text {
  &:has(.image-only) {
    padding: 0;
  }
  .image-banner--wrapper {
    position: relative;
    .image-banner--image {
      &.image-only {
        width: 100%;
        height: auto;
        img {
          width: 100%;
          height: auto;
        }
      }
      &:not(.image-only) {
        position: absolute;
        z-index: 0;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          border-radius: 16px;
        }
      }
      &.overlay-light,
      &.overlay-dark {
        &::after {
          opacity: 80%;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 16px;
        }
      }
      &.overlay-light {
        &::after {
          background: var(--brand-white);
        }
      }
      &.overlay-dark {
        &::after {
          background: var(--brand-black);
        }
      }
    }
    .image-banner--text {
      padding: var(--card-pad-lg);
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--grid-gap-lg);
      @media (max-width: 1020px) {
        display: flex;
        flex-direction: column;
      }
      .image-banner--heading {
        grid-column: 1;
        grid-row: 1;
      }
      .image-banner--text-content {
        grid-column: 2;
        grid-row: 1 / 3;
      }
      .n-o-button {
        margin-top: auto;
        grid-column: 1;
        grid-row: 2;
      }
    }
    &:has(.overlay-light) {
      .image-banner--text,
      .image-banner--heading {
        color: var(--brand-black);
      }
    }
    &:has(.overlay-dark) {
      .image-banner--text,
      .image-banner--heading {
        color: var(--brand-white);
      }
    }
  }
}