html, body { 
  height: 100%; 
  margin: 0; 
  background: #000; 
  display: grid; 
  place-items: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: flex;
  --s: 30vw;
}

li {
  background: #110d15;
  width: var(--s); height: var(--s);
  max-height: 400px; max-width: 400px; 
  margin: .5vmin;
}

@media screen and (max-width: 400px) {
  ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    --s: 30vh;
  }
}