:doodle {
@grid: 5 / 65vmin;
background: #fff;
padding: 2vmin;
box-shadow: 0 .5em .5em rgba(125, 125, 125, .5);
}
background: @p(#ffecbaaa, #ff8d68aa, #a10054aa, #001f52aa);
transform: scale(.5) translate(-50%, -50%);
margin: 2vmin;
box-shadow:
4.2vmin 4.2vmin 0 8vmin
@pd(#bff4edaa, #280f34aa, #b30753aa, #f6c667aa);
:after, :before {
content: '';
position: absolute;
@size: 100%;
transform-origin: 0 0;
}
:after {
background: @p(#bff4ed, #280f34, #b30753, #f6c667);
transform: translateX(100%) skewY(45deg);
}
:before {
background: @p(#ffecba, #ff8d68, #a10054, #001f52);
transform: translateY(100%) skewX(45deg);
}