.section--image-with-text {
  background-color: var(--background-fill-dark-1);
  .image-with-text {
    display: flex;
    gap: var(--global-col-gap-lg);
    align-items: center;

    @media screen and (max-width: 768px) {
      flex-wrap: wrap;
      gap: var(--global-item-gap);
    }
  }

  .image-with-text__text_first {
    flex-direction: row-reverse;
  }

  .image-with-text__full_height {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 100vh;

    .image-with-text__text-container {
      align-items: center;
      display: flex;
    }
  }

  .image-with-text__item {
    flex: 0 0 calc(50% - var(--global-col-gap-lg) / 2);
    max-width: calc(50% - var(--global-col-gap-lg) / 2);

    @media screen and (max-width: 768px) {
      flex: 0 0 100%;

      max-width: none;
    }
  }

  .image-with-text__content {
    display: flex;
    flex-direction: column;
    gap: var(--global-text-gap);
    align-items: flex-start;
    text-align: left;
    .section-content-header {
      text-align: left;
      align-items: flex-start;
      .section-content-title {
        color: var(--heading-fill-light);
      }
      .section-content-text {
        * {
          color: var(--body-fill-light);
          font-family: var(--global-body-lg-font-family);
          font-style: var(--global-body-lg-font-style);
          font-weight: var(--global-body-lg-font-weight);
          text-transform: var(--global-body-lg-text-transform);
          line-height: var(--global-body-lg-line-height);
          -webkit-font-smoothing: antialiased;
        }
        p,
        li,
        ul {
          letter-spacing: var(--global-body-lg-letter-spacing);
          font-size: var(--global-body-lg-font-size);
        }
      }
    }
    .n-o-button {
      --button-bg-fill-default: var(--brand-white);
      --button-text-fill-default: var(--brand-black);
      font-size: 20px;
    }
  }

  .image-with-text__heading,
  .image-with-text__heading strong {
    margin: 0;
  }

  .image-with-text__mobile-image_first {
    @media screen and (max-width: 768px) {
      flex-direction: column;
    }
  }

  .image-with-text__mobile-text_first {
    @media screen and (max-width: 768px) {
      flex-direction: column-reverse;
    }
  }

  .image-with-text__media {
    position: relative;

    @media screen and (max-width: 768px) {
      height: 0;
      height: 100%;
    }

    img {
      width: 100%;
      height: auto;
      margin: 0;
      display: block;

      @media screen and (max-width: 768px) {
        width: 100%;
      }

      .image-with-text__media--fill-block {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
  }
}