Как можно сверстать данную секцию?

Question

[Thomas Faber]

Answer 1

[Odisseya]

Comments

[Sanjar0]

Можете объяснить свой css код? Многое для меня осталось непонятным в частности
1) Что означает $img-r: 50px; ?
2)

li {
  width: calc(50% + #{$img-r});
  outline: 4px solid rgba(255, 0, 0, 0.2);
  outline-offset: -2px;
  display: flex;
  text-align: right;
  
  &:nth-child(odd) {
    margin-left: auto;
    
    & .item__txt {
      order: 2;
      text-align: left;
    }
  }
}

Здесь вы вставили правила внутри других правил? Зачем это было нужно? Что означает этот & символ?
Что означают эти части кода
width: calc(50% + #{$img-r});

&:nth-child(odd) {

[YellowFellow]

Sanjar0, это препроцессор)

Answer 2

[arzamas-nick]

В процентах если:

колонку делайте 40,20,40% и все. Поищите тут в тостере таких вопросов много было тут.