- var i = 1;
.grid
  while i <= 20
    .box(class="random-"+i)= i++

@for $i from 1 through 20 {
  .random-#{$i} {
    background: rgb(random(255), random(255), random(255));
  }
}

@keyframes size {
  0%, 2% {
    max-width: 100vw;
  }
  80%, 100% {
    max-width: 300px;
  }
}

body {
  animation: size 5s infinite alternate;
  animation-delay: 3s;
  background: black;
  font-family: sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.box {
  display: grid;
  place-items: center;
  color: white;
  font-size: 3rem;
  text-shadow: 1px 1px 2px black; 
  padding: 2rem;
}