.text-image--image-left,
.text-image--image-right {
  margin-left: calc((976px / 12 * 1) - 24px);
  display: block;

  @media (--screenMD) {
    display: flex;
  }
  & .text-image__image {
    flex: 0 0 100%;
    margin: auto;
    width: 50%;
    @media (--maxScreenSM) {
      transform: scale(0.8);
    }
  }

  & .text-image__content {
    flex: 1 1 auto;
    order: 1;

    @media (--screenMD) {
      padding: 0 24px;
    }
  }
}

/* Left (default) */
.text-image--image-left {
  flex-wrap: wrap;

  @media (--screensMedium) {
    flex-wrap: nowrap;
  }

  & .text-image__content {
    @media (--screensMedium) {
      padding-left: var(--spacingLarge);
    }
  }
}

/* Right */
.text-image--image-right {
  flex-wrap: wrap;
  margin-left: auto;

  @media (--screenMD) {
    flex-wrap: nowrap;
  }

  @media (--screenLG) {
    margin-left: calc((976px / 12 * 1) - 24px);
  }

  @media (--screenXL) {
    margin-left: calc((1232px / 12 * 1) - 24px);
  }

  @media (--screenXXL) {
    margin-left: calc((1632px / 12 * 1) - 24px);
  }

  & .text-image__image {
    order: 1;
    @media (--screenMD) {
      order: 2;
    }
  }
}

/* Bottom */
.text-image--image-bottom {
  display: flex;
  flex-wrap: wrap;

  & .text-image__content {
    width: 100%;
    order: 1;
    margin-bottom: var(--spacingLarge);
  }

  & .text-image__image {
    width: 100%;
    order: 2;
  }
}

/* Content alignment */
.text-image--content-left {
  text-align: left;
}

.text-image--content-center {
  text-align: center;
}

.text-image--content-center .text-image__image {
  margin: 0 auto;
}

.text-image__wrap {
}

.text-image__text {
  text-align: justify;
}

.text-image__content {
  position: relative;
}

.text-image__content p:first-of-type {
  margin-top: 0;

  @media (--screenMD) {
    margin-top: 45px;
  }
}
.text-image__wrap::before,
.text-image__content::before {
  position: absolute;
  bottom: 100%;
  left: -3px;
  content: '\201C';
  text-align: right;
  font: Bold 60px Helvetica;
  color: #142046;
  opacity: 1;
  display: none;
  height: 40px;

  @media (--screenMD) {
    top: 0;
    font: Bold 80px Helvetica;
  }
}

.text-image__wrap::before {
  @media (--screenLG) {
    display: block;
  }
}

.text-image__content::before {
  @media (--maxScreenMD) {
    display: block;
  }
}