.image-with-text {
  box-sizing: content-box;
  max-width: 1226px;
  margin: 0 auto;
  padding: 64px 32px;
  gap: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &.image-with-text--media-position-left {
    flex-direction: row-reverse;
  }

  .image-with-text__media {
    max-width: 528px;
    height: 528px;
    flex-basis: 50%;
  }

  .image-with-text__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
  }

  .image-with-text__banner {
    display: inline-block;
    padding: 8px 16px;
    background: #00a8f8;
    background: linear-gradient(
    90deg,
    rgba(0, 168, 248, 1) 0%,
    rgba(179, 203, 196, 1) 100%
    );
    font-family: "General Sans";
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border-radius: 100px;
    margin-bottom: 24px;
  }

  .image-with-text__container {
    flex-basis: 50%;
  }

  .image-with-text__content {
    display: flex;
    flex-direction: column;
    gap: 16px;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      font-family: "General Sans", sans-serif;
      color: #00202F;
      font-weight: 600;
    }

    h1 {
      font-size: 40;
    }

    h2 {
      font-size: 32px;
    }

    h3 {
      font-size: 26px;
    }

    h4 {
      font-size: 20px;
    }

    h5 {
      font-size: 16px;
    }

    h6 {
      font-size: 12px;
    }

    p {
      font-family: "General Sans", sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: normal;
      color: #467387;
    }
  }
}

@media screen and (max-width: 768px) {
  .image-with-text {
    padding: 32px 16px;

    &,
    &.image-with-text--media-position-left {
      flex-direction: column-reverse;
    }

    .image-with-text__media {
      width: 100%;
      max-height: 420px;
    }

    .image-with-text__media > img {
      width: 100%;
      max-height: 420px;
    }

    .image-with-text__container {
      width: 100%;
    }

    .image-with-text__content {
      h1 {
        font-size: 36px;
      }

      h2 {
        font-size: 28px;
      }

      h3 {
        font-size: 22px;
      }

      h4 {
        font-size: 16px;
      }

      h5 {
        font-size: 12px;
      }

      h6 {
        font-size: 8px;
      }
    }
  }
}