.tp-image-with-features {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  .tp-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(3.2rem, 2.0114rem + 3.0476vw, 6.4rem);

    @media screen and (min-width: 1024px) {
      flex-direction: row;
    }

    .tp-media {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      @media screen and (max-width: 1023px) {
        margin-inline: calc(-1 * var(--page-gutter, 16px));
        width: calc(100% + 2 * var(--page-gutter, 16px));
        min-height: 420px;
      }

      @media screen and (min-width: 1024px) {
        width: 50%;
        align-self: flex-start;
      }

      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

      .tp-media__mobile {
        display: none;
      }

      @media screen and (max-width: 749px) {
        .tp-media__desktop {
          display: none;
        }

        .tp-media__mobile {
          display: block;
        }
      }
    }

    .tp-text-wrapper {
      display: flex;
      flex-direction: column;
      gap: 32px;
      width: 100%;
      justify-content: center;

      @media screen and (min-width: 1024px) {
        width: 50%;
      }
    }

    .tp-title-section * {
      display: inline;
    }

    .tp-title-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      overflow: hidden;
      vertical-align: middle;
      margin-left: 32px;
      position: relative;
      top: -2px;
    }

    .tp-title-badge img {
      width: 34px;
      height: auto;
    }

    .tp-features-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .tp-feature-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .tp-feature-icon {
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tp-feature-icon img {
      width: 44px;
      height: 44px;
      object-fit: contain;
    }

    .tp-feature-text {
      font-weight: 600;
      line-height: 1.3;

      @media screen and (min-width: 751px) {
        font-size: 18px;
      }
    }

    .tp-button-wrapper {
      margin-top: 0;
    }

    .tp-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 59px;
      border-radius: 999px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.4;
      text-decoration: none;
      transition:
        background-color 0.25s ease,
        color 0.25s ease;

      @media screen and (max-width: 749px) {
        width: 100%;
        padding: 9px 40px;
        font-size: 16px;
      }
    }

    .tp-button:hover {
      opacity: 0.85;
    }
  }

  .tp-wrapper--image-right {
    @media screen and (min-width: 1024px) {
      flex-direction: row-reverse;
    }
  }

  .tp-wrapper--image-left {
    @media screen and (min-width: 1024px) {
      flex-direction: row;
    }
  }

  .tp-wrapper--image-up {
    @media screen and (max-width: 1023px) {
      flex-direction: column;
    }
  }

  .tp-wrapper--image-down {
    @media screen and (max-width: 1023px) {
      flex-direction: column-reverse;
    }
  }

  .tp-wrapper--no-padding-mobile {
    @media screen and (max-width: 1023px) {
      padding-inline: 0;
    }

    .tp-text-wrapper {
      @media screen and (max-width: 1023px) {
        padding-inline: 32px;
      }

      @media screen and (max-width: 767px) {
        padding-inline: 16px;
      }
    }
  }

  .tp-wrapper--no-padding-desktop {
    max-width: 100%;

    @media screen and (min-width: 768px) {
      padding-inline: 0;
    }

    .tp-text-wrapper {
      @media screen and (min-width: 1024px) {
        padding-inline: 64px;
      }
    }
  }

  .tp-wrapper--no-padding-desktop.tp-wrapper--image-left .tp-text-wrapper {
    @media screen and (min-width: 1024px) {
      padding-left: 64px;
      padding-right: max(5rem, calc((100% - var(--page-width)) / 2 + 5rem));
    }
  }

  .tp-wrapper--no-padding-desktop.tp-wrapper--image-right .tp-text-wrapper {
    @media screen and (min-width: 1024px) {
      padding-right: 64px;
      padding-left: max(5rem, calc((100% - var(--page-width)) / 2 + 5rem));
    }
  }

}