diff --git a/src/features/online-board/components/details-panels/panels.scss b/src/features/online-board/components/details-panels/panels.scss index 61884149..414662c2 100644 --- a/src/features/online-board/components/details-panels/panels.scss +++ b/src/features/online-board/components/details-panels/panels.scss @@ -53,18 +53,28 @@ // Aircraft properties laid out horizontally (Название | Количество мест | // Эконом | Комфорт | Бизнес | Предыдущий рейс), matching Angular's -// flight-details-airplane row. Wraps on narrow widths. +// flight-props grid: desktop 5 equal columns, tablet 4, mobile 2 (3fr 2fr). +// Column/row gaps are $space-l (15px). .aircraft-panel { - display: flex; - flex-wrap: wrap; - gap: 28px 32px; + display: grid; + grid-template-columns: repeat(5, 1fr); + column-gap: 15px; + row-gap: 15px; padding: 4px 0; + @media (max-width: 1050px) and (min-width: 769px) { + grid-template-columns: repeat(4, 1fr); + } + + @media (max-width: 640px) { + grid-template-columns: 3fr 2fr; + } + &__prop { display: flex; flex-direction: column; - gap: 4px; - min-width: 90px; + gap: 2px; + min-width: 0; } &__label {