* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-margin-top: 2rem;
}

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
  padding: 20vh 0;
  background-color: hsl(0, 0%, 100%);
}




ul {
  grid-auto-flow: dense;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 90vmin;
  list-style-type: none;
  gap: 1rem;
}

li {
  grid-column: span var(--span-x, 1);
  grid-row: span var(--span-y, 1);
}

@-webkit-keyframes enter {
  from {
    translate: 0 100%;
    scale: 0.25;
    opacity: 0.5;
  }
}

@keyframes enter {
  from {
    translate: 0 100%;
    scale: 0.25;
    opacity: 0.5;
  }
}

@-webkit-keyframes exit {
  to {
    translate: 0 -15vh;
    opacity: 0.5;
  }
}

@keyframes exit {
  to {
    translate: 0 -15vh;
    opacity: 0.5;
  }
}

button {
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  border: 0;
  -webkit-animation: enter both ease-in-out;
          animation: enter both ease-in-out;
  animation-timeline: view();
  animation-range: entry;
  border-radius: 1rem;
}

img {
  border-radius: 1rem;
  max-width: 100%;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

li:nth-of-type(1n) {
  --span-x: 1;
  --span-y: 2;
}

li:nth-of-type(2n) {
  --span-x: 2;
  --span-y: 2;
}

li:nth-of-type(3n) {
  --span-x: 1;
  --span-y: 3;
}

li:nth-of-type(2n + 1) {
  --span-x: 1;
  --span-y: 1;
}

li.full {
  --span-x: 4;
  --span-y: 4;
}