Как сделать отзывчивый перекрывающийся div, который имеет наклон в нем

Question

Я пытаюсь создать 2 деления рядом с правым делением, которое наклонило левую границу, которая перекрывает изображение слева.

В настоящее время он отображается правильно на мобильном телефоне, и мне нужно сделать наложение, не портя мой мобильный дисплей. Вот так выглядит мой нынешний

HTML / JSX

     <header className="showcase">
          <div>
            <Image className="banner" src={banner} />
          </div>

          <div className="overlay">
            <div className="box1">
              <h4>
                Uniting the global
                <span className="overlay_text"> workforce</span> as one
              </h4>
            </div>
            <div className="box2">
              <div className="track_group mb-3 mt-3">
                <Image src={location} className="pr-3" />
                <input placeholder="Tracking ID" className="track_input" />
                <button className="track_button">Track</button>
              </div>
              <span className="track_links">
                <small className="pr-1 pl-1"> Create a marketplace </small> |
                <small className="pr-1 pl-1"> Become a Delivery Provider</small>
                | <small className="pr-1 pl-1"> Request a Rideshare</small> |
                <small className="pr-1 pl-1"> Get Help </small>
              </span>
            </div>
            <div className="box3">
              <div className="select_tab">
                <div className="selector">
                  <small>Serve For </small> <br /> <span>Businesses</span>
                </div>
                <div className="selector">
                  <small>Serve For </small> <br />
                  <span>Service Providers</span>
                </div>
                <div className="selector">
                  <small>Serve For </small> <br /> <span>Users</span>
                </div>
              </div>
            </div>
          </div>
        </header>

CSS / SASS

.showcase {
  @include desktop {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .banner {
    width: 100%;
    height: auto;
    opacity: 0.65;
    @include desktop {
      opacity: 0.8;
      // clip-path: polygon(0 0, 94% 0, 58% 100%, 0% 100%);
    }
  }
  .overlay {
    text-align: center;
    transform: translateY(-4.375em);
    @include desktop {
      transform: translateY(0);
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      .box1 {
        padding-top: 6.5em;
      }
      .box3 {
        padding-top: 2em;
      }
    }
    h4 {
      font-weight: bold;
      letter-spacing: 0.08em;
      @include desktop {
        font-weight: normal;
      }
    }
    .overlay_text {
      color: color(color-1);
    }
    .track_group {
      -webkit-appearance: none;
      textarea,
      input {
        outline: none;
        color: color(color-2);
      }
      .track_input {
        border: none;
        border: 0.1px solid color(border-line);
        padding: 0.5em;
        width: 20em;
        box-shadow: 0 10px 6px -6px color(border-line);
        @include desktop {
          width: 25em;
        }
      }
      .track_button {
        border: none;
        color: white;
        letter-spacing: 0.25em;
        padding: 0.5em 1em 0.5em 1em;
        background-color: color(color-1);
        transition-property: background-color;
        transition-duration: 500ms;
      }
      .track_button:focus {
        outline: none;
      }
      .track_button:hover {
        background: #48dbfb;
      }
    }
    .track_links {
      display: none;
      @include desktop {
        small {
          cursor: pointer;
          transition-property: color;
          transition-duration: 500ms;
        }
        small:hover {
          color: grey;
        }
        display: inline-block;
        font-family: font(font-1);
        color: #bbb8b8;
        font-size: 0.875em;
        letter-spacing: 0.03em;
      }
    }
  }
  .select_tab {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .selector {
      font-family: font-family(font-2);
      text-align: left;
      small {
        color: color(color-1);
      }
      span {
        line-height: 0.9em;
        font-weight: bolder;
      }
    }
  }
}

Я ожидаю, что правый div будет перекрывать изображение, чтобы я мог правильно создать разделы выбранной вкладки.

Это изображение моего ожидаемого результата