forked from crowetic/commerce
35 lines
596 B
CSS
35 lines
596 B
CSS
.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;
|
|
}
|
|
}
|