* {
  box-sizing: border-box;
}

body {
  background-color: #23262d;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  max-width: 400px;
  height: 400px;
  gap: 20px;
  margin: 80px auto;
  animation: resize 3000ms ease infinite both;
}

.item {
  --color2: 36;
  --color2: 76;
  --delay: 0ms;
  background-color: hsl(var(--color1), 100%, 60%);
  animation: colorChange 3000ms ease var(--delay) infinite both;
  
  &:nth-child(4n - 2) {
    --delay: 1000ms;
  }
  
  &:nth-child(4n) {
    --delay: 2000ms;
  }
}

@keyframes colorChange {
  0% {
    background-color: hsl(36, 100%, 64%);
  }
  
  25% {
    background-color: hsl(76, 100%, 64%);
  }
    
  50% {
    background-color: hsl(206, 100%, 64%);
  }
  
  75% {
    background-color: hsl(305, 100%, 64%);
  }
  
  100% {
    background-color: hsl(36, 100%, 64%);
  }
}

@keyframes resize {
  0% {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  
  25% {
    grid-template-columns: 1fr 2fr 3fr;
    grid-template-rows: 1fr 2fr 3fr;
  }
  
  50% {
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr 5fr 1fr;
  }
  
  75% {
    grid-template-columns: 3fr 2fr 1fr;
    grid-template-rows: 3fr 2fr 1fr;
  }
  
  100% {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
}