profesor08

https://caniuse.com/?search=grid - 95.86%

Практически все, что можно сделать на флексах, можно сделать на гридах. Я такого не встречал. Но, многие вещи, которые легко решаются на гридах, на флексах ты упоришься делать, а делая адаптив упоришься на каждом брейкпоинте. Если бы во флексах была поддержка gap изначально, то флексы были бы офигенными. Но это свойство появилось недавно, и комфортно его использовать можно будет очень нескоро. Повторю, у гридов поддержка браузерами уже 95.86%.

Для элемента с display: flex используется align-items: flex-start, при этом все элементы будут сбиваться к верху своего контейнера.

Для элемента с display: grid используется align-items: start, тут элементы будут прибиваться к верху своей ячейки.

В текущем варианте никак. Тебе надо удалить tabs-wrapper, чтоб твои инпуты были над food-box.

Но лучше напиши пару строк на JS.

Это невозможно. Стили можно только переопределить, так они устроены. Браузер устанавливает стили по умолчанию, потом ты пишешь свои стили для них, потом можешь переопределить свои же стили. Переопределение стилей следует согласно приоритетам селекторов.

Из этого следует, что тебе надо будет посмотреть, какие стили определены для конкретного элемента, и переопределить их, указав значения по умолчанию.

На сервере проверяешь по какой ссылке был переход, и на ее основе выставляешь нужному инпуту атрибут `checked`

@mixin mobile {
  @media (max-width: 767.98px) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: 768px) and (max-width: 1139.98px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 1140px) {
    @content;
  }
}

h1 {
  @include desktop {
    font-size: 52px
  }

  @include tablet {
    font-size: 42px
  }

  @include mobile {
    font-size: 32px
  }
}

<div class="roadmap">
  <div class="map-item">
    <div class="item-text">
      <h3>What is Lorem Ipsum?</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <img class="item-image" src="https://picsum.photos/100">
  </div>
  <div class="map-item">
    <img class="item-image" src="https://picsum.photos/100">
    <div class="item-text">
      <h3>What is Lorem Ipsum?</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
  </div>
  <div class="map-item">
    <div class="item-text">
      <h3>What is Lorem Ipsum?</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <img class="item-image" src="https://picsum.photos/100">
  </div>
  <div class="map-item">
    <img class="item-image" src="https://picsum.photos/100">
    <div class="item-text">
      <h3>What is Lorem Ipsum?</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
  </div>
</div>

.roadmap {
  width: 70%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  
  .map-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "text-left image text-right";
    gap: 30px;
    align-items: center;
    
    &:nth-child(odd) {
      .item-text {
        grid-area: text-left;
        text-align: right;
      }
    }
    
    &:nth-child(even) {
      .item-text {
        grid-area: text-right;
      }
    }
    
    .item-image {
      grid-area: image;
    }
  }
}

Все у тебя верно описано, https://jsfiddle.net/a50yrgwj/

Смотри какие у тебя плагины для обработки css, можно что-то там сортирует, переставляет и тд.

Тебе надо центральную часть сделать как svg, боковые обычными блоками закрашенными. Потом поверх располагаешь элементы управления.

https://www.w3schools.com/cssref/css_selectors.asp