MeUgen
1
.palette-box .palette-small{
display:flex
}
.palette-box:nth-child(1) .palette-small{
flex-direction:column;
justify-content:center
}
.palette-box:nth-child(1) .palette-small .color-4,
.palette-box:nth-child(1) .palette-small .color-3{
align-self:center
}
.palette-box:nth-child(1) .palette-small .color-2{
order:2;
}
.palette-box:nth-child(1) .palette-small .color-3{
order:0;
}
.palette-box:nth-child(1) .palette-small .color-4{
order:3;
}
.palette-box:nth-child(1) .palette-small .color-5{
order:1;
}
.palette-box:nth-child(2) .palette-small{
flex-direction:column-reverse ;
align-items:flex-start;
justify-content:space-between
}
.palette-box:nth-child(2) .palette-small .color-2,
.palette-box:nth-child(2) .palette-small .color-6{
align-self:flex-end
}
.palette-box:nth-child(3) .palette-small{
justify-content:space-between;
}
.palette-box:nth-child(3) .palette-small div{
display:flex;
flex-direction:column;
justify-content:space-between;
}
.palette-box:nth-child(4) .palette-small{
justify-content:space-between;
}
.palette-box:nth-child(4) .palette-small div:first-child{
display:flex
}
.palette-box:nth-child(4) .palette-small div:last-child{
display:flex;
flex-direction:column-reverse;
justify-content:space-between
}