Aspect ratio of polygon-clip path

Question

I have a polygon shape inside the container but the problem is shape has the static width and height of both div . I want to make it responsive and it should take the 80% of the given space with some margin around but I am not getting how I can make polygon responsive by maintaining its aspect ratio if the width changes their width.

This is how I am doing and so far successful with the static one not with the dynamic . how I can achive it ? any help would be really appreciated!

Code:

export const Container = styled.div`
    width: 468px;
    height: 522px;
    background: red;
    margin: 40px auto;
    border-radius: 16px;
`;

export const PreviewContainerWrapper = styled.div`
  position: relative;
  left: 86px;
  padding: 24px;
  background: white;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 16px;
  width: 400px;
  height: 647px;
  transform: rotate(-20deg);
  clip-path: polygon(100% 0%, 100% 0%, 99% 47.99%, 95.68% 53.6%, 93.58% 57.07%, 91.84% 60.09%, 90.86% 61.75%, 89.81% 63.55%, 88.58% 65.86%, 86.94% 68.53%, 85.36% 71.11%, 84.47% 72.59%, 83.42% 74.41%, 82.08% 76.69%, 81.21% 78.3%, 80.6% 79.35%, 79.82% 80.68%, 79.3% 81.65%, 78.52% 82.99%, 77.68% 84.25%, 77.05% 85.15%, 76.85% 85.58%, 76.41% 86.29%, 75.51% 87.05%, 74.62% 87.37%, 73.1% 87.36%, 71.54% 87.1%, 69.35% 86.63%, 66.88% 86.16%, 64.09% 85.54%, 61.55% 85.02%, 58.68% 84.4%, 53.03% 83.15%, 40.8% 80.37%, 31.59% 78.34%, -312% -1%);
`;

UI Result:

attached screenshot

I want to make it responsive with the same polygon shape and by maintaining its aspect ratio.