<div class="osnovanie">
  <div class="maseguna">
  <div class="kadeka-1"></div>
  <div class="kadeka-2"></div>
  </div>
</div>

.maseguna {
  position: relative;
  aspect-ratio: 2.4 / 1;
}

.kadeka-1, .kadeka-2 {
  position: absolute;
  inset: 0;
  background-size: cover;
}

.kadeka-1 {
  background-image: url(https://rataku.com/images/2023/10/20/sw-simple-scene-1.jpg);
}

.kadeka-2 {
  background-image: url(https://rataku.com/images/2023/10/20/sw-simple-scene-2.jpg);
  -webkit-mask-image: linear-gradient(to right, transparent 33%, #fff 67%);
}

/* everything else */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  background-color: #111;
}

.osnovanie {
  width: min(1000px, 100%);
}