:root {
  --margin-width: 10px;
  --img-width: max(400px, calc(50vw - calc(var(--margin-width))));
}

@media (orientation: portrait) {
  :root {
    --margin-width: 0px;
    --img-width: 100vw;
  }
}

body {
  margin: 0;
  font-family: Helvetica, Verdana, Arial, sans-serif;
}

.message {
  padding: 10px;
  font-size: 2rem;
}

.message h1 {
  font-size: 3rem;
  text-align: center;
}

.wrapper {
  width: calc(100vw);
  display: grid;
  grid-gap: var(--margin-width);
  grid-template-columns: repeat(auto-fill, minmax(var(--img-width), 1fr) ) ;
}

.picture, .picture img {
  width: var(--img-width);
  height: auto;
  aspect-ratio: 4 / 3;
}