Offset rotated border with Tailwind and SCSS

Question

I would like to put a frame behind a section, which has a slight rotation. this should then also automatically take the same size of the section and go responsive. unfortunately, I can not think of the right solution here :( Thanks for your help!

My HTML:

<div class="">


<div class="max-w-7xl mx-auto px-8">
    <div
      class="grid grid-cols-2 md:grid-cols-2 shadow-xl rounded-xl bg-white call-to-action"
    >
      <div
        class="rounded-l-xl"
        style="
          background-image: url(https://images.unsplash.com/photo-1644229041683-f5334a27363f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
          background-position: center;
          background-size: cover;
          clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
        "
      ></div>
      <div class="py-16 px-8 space-y-4 bg-white rounded-r-xl">
        <p class="text-3xl text-slate-700 leading-tight">Lorem Ipsum</p>
        <p class="text-slate-600 text-base">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam
          veritatis explicabo corporis odio perspiciatis, error cum ut illum
          iste atque, fugit unde voluptates sapiente delectus vitae quidem
          cupiditate rem? Nostrum!
        </p>
        <div class="">
          <a class="bg-blue-500 px-3 py-3 rounded-sm text-white" href=""
            >Go To Link</a
          >
        </div>
      </div>
    </div>
  </div>
</div>

And some SCSS:

.call-to-action {
  height: 20rem;
  &:before {
    content: "";
    position: absolute;
    margin-left: -30px;
    width: 80rem;
    height: 20rem;
    background-clip: padding-box;
    transform: rotate(2deg);
    z-index: -1;
    border: 10px solid #fff018;
    border-radius: 20px;
  }
}

Have an absolute nice day ;)