@font-face {
  font-family: 'CaraqueVF_Trial_WghtMelt';
  src: url('fonts/CaraqueVF_Trial_WghtMelt.woff2') format('woff2');
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(10, 10%);
  grid-template-rows: repeat(9, 240px);
  text-align: center;
  font-family: 'CaraqueVF_Trial_WghtMelt';
  animation: vars 6s infinite linear;
  color: red;
  align-items: center;
  justify-items: center;
}

.square {
  display: flex;
  align-items: center;
  justify-content: center;
}

section {
  width: 25px;
  height: 25px;
  background-color: red;
  transform: rotate(45deg) translateY(0rem) translateX(0rem) scale(1.4);
  align-items: center;
  justify-items: center;
  border-radius: 4px;
  animation: quadrat 6s infinite linear;
}

@keyframes quadrat {
  0%, 100% {
    width: 4px; height: 4px;
  }
  50% {
    width: 140px; height: 140px;
    border-radius: 16px;
  }
}

@keyframes vars {
  0%, 100% {
    font-variation-settings: 'wght' 400, 'MELT' 1;
    font-size: 7rem;
  }
  50% {
    font-variation-settings: 'wght' 1000, 'MELT' 100;
    font-size: 1px;
  }
}