.c-banner-text-img {
  background-color: var(--banner-text-image);
  container-type: inline-size;
}

.c-banner-text-img__inner {
  display: flex;
  gap: 3rem 8rem;

  @container (min-width: 1024px) {
    align-items: center;
  }

  @container (max-width: 1023px) {
    flex-direction: column;
  }
}

.c-banner-text-img__inner--right {
  @container (min-width: 1024px) {
    flex-direction: row-reverse;
  }
}

.c-banner-text-img__picture {
  -webkit-clip-path: polygon(0% 0%, 0 69%, 28% 100%, 100% 100%, 100% 55%, 53% 0);
  clip-path: polygon(0% 0%, 0 69%, 28% 100%, 100% 100%, 100% 55%, 53% 0);

  @container (min-width: 1024px) {
    flex: 0 0 43%;
    height: 47vw;
    align-self: flex-start;
  }

  .c-banner-text-img__inner--right & {
    -webkit-clip-path: polygon(42% 0, 0 45%, 0 100%, 70% 100%, 100% 70%, 100% 0);
    clip-path: polygon(42% 0, 0 45%, 0 100%, 70% 100%, 100% 70%, 100% 0)
  }
}

.c-banner-text-img__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.c-banner-text-img__text {
  --paragraph-mb: 2rem;

  flex-grow: 1;

  @container (min-width: 1200px) {
    padding: 3.2rem 21rem 3.2rem 0;

    .c-banner-text-img__inner--right & {
      padding: 3.2rem 0 3.2rem 21rem;
    }
  }

  @container (min-width: 1024px) and (max-width: 1199px) {
    padding: 3.2rem 8rem 3.2rem 0;

    .c-banner-text-img__inner--right & {
      padding: 3.2rem 0 3.2rem 8rem;
    }
  }

  @container (max-width: 1023px) {
    padding: 0 var(--page-gutter) 4rem;
  }
}

.c-banner-text-img__title {
  margin-bottom: 4rem;
}

.c-banner-text-img__subtitle {
  margin-bottom: 2rem;
}

.c-banner-text-img__rich-text {
  margin-bottom: 3.2rem;

  a {
    color: var(--banner-text-image-link);
  }
}