.root {
  --row-height: calc(100vh - 80px - 56px);
  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full;

  & > * {
    @apply row-span-1 lg:col-span-1 h-full bg-black box-border;
    height: 500px;

    @screen lg {
      height: auto;
    }
  }

  & > div:nth-child(6n + 1),
  & > div:nth-child(6n + 5) {
    @apply row-span-2 lg:col-span-2 bg-violet;

    @screen lg {
      min-height: var(--row-height);
    }
  }

  & > div:nth-child(6n + 5) {
    @apply bg-blue;
  }

  & > div:nth-child(6n + 3) {
    @apply bg-pink;
  }

  & > div:nth-child(6n + 6) {
    @apply bg-cyan;
  }
}