.content-and-media-50-50 {
    position: relative;
  }

  .content-and-media-50-50__inner {
    position: relative;
    z-index: 1;
  }
  .content-and-media-50-50__layout {
    display: flex;
  }
  .content-and-media-50-50__media {
    border-radius: var(--border-radius);
    display: flex;
    margin: 0;
    min-width: 0;
    overflow: hidden;
  }
  .content-and-media-50-50__picture,
  .content-and-media-50-50__image,
  .content-and-media-50-50__video,
  .content-and-media-50-50__video iframe,
  .content-and-media-50-50__video video {
    display: block;
    height: 100%;
    width: 100%;
  }



  .content-and-media-50-50__video {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .content-and-media-50-50__video iframe {
    border: 0;
  }

  .content-and-media-50-50__content {
    align-self: center;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

  .content-and-media-50-50__divider {
    margin: 0 0 var(--spacing-md);
    max-width: 50%;
    width: 50%;
  }

  .content-and-media-50-50__headings :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
  }

  .content-and-media-50-50__description {
    margin-top: var(--spacing-sm);
  }

  .content-and-media-50-50__description > :last-child {
    margin-bottom: 0;
  }

  .content-and-media-50-50__cta {
    margin-top: var(--spacing-md);
  }

  .content-and-media-50-50__cta .cta-wrapper {
    {% if module.styles.text_color.text_alignment == "center" %}
    justify-content: center;
    {% elif module.styles.text_color.text_alignment == "right" %}
    justify-content: flex-end;
    {% else %}
    justify-content: flex-start;
    {% endif %}
  }
  .content-and-media-50-50__headings {
    margin-bottom: 24px;
  }

  @media (min-width: 768px) {
    .content-and-media-50-50__media {
      aspect-ratio: 16 / 9;
    }
    .content-and-media-50-50__layout--reverse {
      flex-direction: row-reverse;
    }
    .content-and-media-50-50__media,
    .content-and-media-50-50__content {
      flex: 1 1 50%;
      width: 50%;
    }

  }
  @media (min-width: 1025px) {
    .content-and-media-50-50__layout {
      align-items: stretch;
    }

  }
  @media (max-width: 767px) {
    .content-and-media-50-50__layout {
      flex-direction: column;
    }
    .content-and-media-50-50__layout--reverse-mobile {
      flex-direction: column-reverse;
    }
    .content-and-media-50-50__media, 
    .content-and-media-50-50__content {
      flex: 1 1 100%;
      width: 100%;
    }
    .content-and-media-50-50__media {
      aspect-ratio: 4 / 3;
    }
  }