.palette {
    display: flex;
}

.palette div {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 5px;
    margin: 1em;
    padding: 0;
}

.palette-purple div.item-1 {
    background-color: var(--purple-1);
}

.palette-purple div.item-2 {
    background-color: var(--purple-2);
}

.palette-purple div.item-3 {
    background-color: var(--purple-3);
}

.palette-purple div.item-4 {
    background-color: var(--purple-4);
}

.palette-purple div.item-5 {
    background-color: var(--purple-5);
}

.palette-blue div.item-1 {
    background-color: var(--blue-1);
}

.palette-blue div.item-2 {
    background-color: var(--blue-2);
}

.palette-blue div.item-3 {
    background-color: var(--blue-3);
}

.palette-blue div.item-4 {
    background-color: var(--blue-4);
}

.palette-blue div.item-5 {
    background-color: var(--blue-5);
}

.palette-grey div.item-1 {
    background-color: var(--grey-1);
}

.palette-grey div.item-2 {
    background-color: var(--grey-2);
}

.palette-grey div.item-3 {
    background-color: var(--grey-3);
}

.palette-grey div.item-4 {
    background-color: var(--grey-4);
}

.palette-grey div.item-5 {
    background-color: var(--grey-5);
}

.design_horizontal {
    display: flex;
    flex-flow: row;
}