Испытание: сложные палитры

Курсы §35. Флексбокс, часть 1
1

Все на 100%, но я учусь и поэтому хочу знать если вдруг я что-то сделал не так, оцените код, пожалуйста. Долго я боролся с редактором в создании темы, но так и не понял как нормально вставить код, поэтому только так:

.palette-box:nth-child(1) .palette-small {
display: flex;
flex-direction: column;
justify-content: center;
}

.palette-box:nth-child(1) .palette-small div:nth-child(1) {
order: 3;
}

.palette-box:nth-child(1) .palette-small div:nth-child(2) {
order: 1;
align-self: center;
}

.palette-box:nth-child(1) .palette-small div:nth-child(3) {
order: 4;
align-self: center;
}

.palette-box:nth-child(1) .palette-small div:nth-child(4) {
order: 2;
}

.palette-box:nth-child(2) .palette-small {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}

.palette-box:nth-child(2) .palette-small div:nth-child(1) {
align-self: flex-end;
}

.palette-box:nth-child(2) .palette-small div:nth-child(2) {
align-self: flex-end;
}

.palette-box:nth-child(2) .palette-small div:nth-child(3) {
align-self: flex-start;
}

.palette-box:nth-child(2) .palette-small div:nth-child(4) {
align-self: flex-start;
}

.palette-box:nth-child(3) .palette-small {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(3) .palette-small .part:first-child{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
}

.palette-box:nth-child(3) .palette-small .part:last-child{
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small .part:first-child {
display: flex;
}

.palette-box:nth-child(4) .palette-small .part:last-child {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}

2

с обращениями намудрил, ну и можно сократить немного код.
чтобы вставить: копипастишь, выделяешь, жмешь кнопку </>

.palette-small, .part {
  display: flex;   
  }


.palette-box:first-child .palette-small {
  flex-direction: column-reverse;
  justify-content: center;
  }
  
.palette-box:first-child .color-3 {
  order: 1;
  align-self: center;
  }
  
.palette-box:first-child .color-4 {
  order: -1;
  align-self: center;
  }
  
  
  
.palette-box:nth-child(2) .palette-small {
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-start;
  }

.palette-box:nth-child(2) .color-2,
.palette-box:nth-child(2) .color-6 {
  align-self: flex-end;
  }
  
  
  
.palette-box:nth-child(3) .palette-small {
  justify-content: space-between;
  }

.palette-box:nth-child(3) .part {
  flex-direction: column;
  justify-content: space-between;
  }

  
  
.palette-box:nth-child(4) .palette-small {
  justify-content: space-between;
  }
  
.palette-box:nth-child(4) .part:last-child {
  flex-direction: column-reverse;
  justify-content: space-between;
  }