<div class="container">
  <div class="thumbnails">
    <img class="thumbnails__aside" src="https://placeimg.com/400/300/animals" alt="A randomly selected animal photo" />
    <img class="thumbnails__aside--top right" src="https://placeimg.com/400/300/nature" alt="A randomly selected nature photo" />
    <img class="thumbnails__aside--bottom right" src="https://placeimg.com/400/300/arch" alt="A randomly selected archirecture photo" />
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0px;
  padding: 10px;
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #112211;

  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  overflow: hidden;
  resize: horizontal;
  min-width: 50vw;
}

:root {
  --margin: 20px;
  --aspect-width: 4;
  --aspect-height: 3;
  --constant: calc(
    var(--margin) * var(--aspect-width) / (var(--aspect-height) * 3)
  );
}

.thumbnails {
  width: 50%;
  margin: 0 auto;
  padding: var(--margin);
  border: 2px solid #fefefe;
  border-radius: 5px;
  overflow: hidden;
}

.thumbnails__aside {
  display: block;
  float: left;
  margin-right: var(--margin);
  width: calc(2 / 3 * (100% - var(--margin)) + var(--constant));
}

.right {
  display: block;
  float: right;
  width: calc(1 / 3 * (100% - var(--margin)) - var(--constant));
}

.thumbnails__aside--bottom {
  margin-top: var(--margin);
}