:container {
position: relative;
}
:doodle {
@grid: 12 / 25em;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 4px;
background: white;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
background-blend-mode: lighten;
margin: 0px;
@row(even) {
@col(even) {
background:
var(--rg-bl-red),
var(--rg-tr-cyan),
var(--rg-tr-yellow);
}
@col(odd) {
background:
var(--rg-br-red),
var(--rg-tl-cyan),
var(--rg-tl-yellow);
}
}
@row(odd) {
@col(even) {
background:
var(--rg-tl-red),
var(--rg-br-cyan),
var(--rg-br-yellow);
}
@col(odd) {
background:
var(--rg-tr-red),
var(--rg-bl-cyan),
var(--rg-bl-yellow);
}
}
@row(8n - 4) {
@col(6n + 4) {
background: none;
background:
var(--rg-bl-red),
var(--rg-bl-orange),
var(--rg-tr-yellow);
}
}
@row(8n -3) {
@col(6n - 3) {
background: none;
background:
var(--rg-tr-red),
var(--rg-tr-blue),
var(--rg-bl-yellow),
var(--rg-bl-cyan);
}
}
@row(8n - 8) {
@col(6n - 5) {
background: none;
background:
var(--rg-tl-cyan),
var(--rg-tl-green),
var(--rg-br-yellow),
var(--rg-br-red),
var(--rg-tl-yellow);
}
}