:root {
  --image-list-gap: 12px;
}

@media (min-width: 800px) {
  :root {
    --image-list-gap: 24vh;
  }
}

html, body {
  font-family: sans-serif;
}

body {
  background-color: black;
  margin: 0
}

* {
  box-sizing: border-box;
}

.image-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--image-list-gap) * 2);
  padding: calc(var(--image-list-gap) * 2) calc(var(--image-list-gap) / 2);
}

@media (min-width: 800px) {
  .image-list {
    gap: var(--image-list-gap);
    padding: var(--image-list-gap);
  }
}

.image-list img {
  width: 100%;
}