2 images side by side, clip-path messes up when responsive

I been stuck on this for a while but I cant figure out how to do this correctly.

My wanted result is to have two images side by side and a gap between them.

My problem is that when the browser resize it wont keep the gap and the images "merge" or extending the browser the gap gets bigger.

code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.hs-media {
  --hs-media-overlap: 7.5rem;
  --hs-media-col-size: calc(var(--hs-media-overlap) / 2);
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: [one] auto [two-begins] minmax(0, var(--hs-media-col-size)) minmax(0, var(--hs-media-col-size)) [one-ends] auto [two];
}

[class*="hs-media__col-"] {
  grid-row: 1;
  position: relative;
  display: flex;
  min-block-size: 100%;
}

.hs-media__col-1 {
  grid-column: one/one-ends;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.hs-media__col-1::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 100%;
  inline-size: 100%;
  background: rgba(51, 153, 68, 0.79);
  mix-blend-mode: multiply;
}

.hs-media__line {
  grid-column: one/line;
  grid-row: 1;
  block-size: 100%;
  background-color: white;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.hs-media__col-2 {
  grid-column: two-begins/two;
  clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
}

.hs-media__image {
  inline-size: 100%;
  object-fit: cover;
}

<!-- language: lang-html -->

<ul class="hs-media">
  <li class="hs-media__col-1">
    <img src="https://source.unsplash.com/Ul-Cp7f_CGQ/1440x546" class="hs-media__image" />
  </li>

  <li class="hs-media__col-2">
    <img src="https://source.unsplash.com/t8QeaJkxp4M/1800x546" class="hs-media__image" />
  </li>
</ul>

<!-- end snippet -->

To me it looks like you are complicating it too much, is this ok for you ?

diagonal slash will always take 1% of total width

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  overflow: hidden;
}

.container img {
  width: 55%;
  object-fit: cover;
}

.container img:nth-child(1) {
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
  transform: translateX(7%)
}

.container img:nth-child(2) {
  clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
  transform: translateX(-7%)
}

<!-- language: lang-html -->

<div class="container">
  <img src="https://source.unsplash.com/Ul-Cp7f_CGQ/1440x546" class="hs-media__image" />
  <img src="https://source.unsplash.com/t8QeaJkxp4M/1800x546" class="hs-media__image" />
</div>

<!-- end snippet -->

I have a detailed article about such layouts where you can also have hover effect: https://css-tricks.com/css-grid-and-custom-shapes-part-2/

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.gallery {
  --s: 70px; /* control the slanted part */
  
  display: flex;
  height: 280px; /* the height of the images*/
  gap: 8px; /* control the gap */
}
.gallery > img {
  flex: 1;
  min-width: 0;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  flex: 1.8; 
}
.gallery > img:first-child {
  margin-right: calc(-.5*var(--s));
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  margin-left: calc(-.5*var(--s));
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}


body {
  background: #ECD078;
}

<!-- language: lang-html -->

<div class="gallery">
  <img src="https://picsum.photos/id/433/600/400" alt="A Bear">
  <img src="https://picsum.photos/id/593/600/400" alt="A Tiger">
</div>

<!-- end snippet -->