/* * Сетка блока «Специальные предложения на путевки» на главной. * * Базовый .special__list — flex без переноса и без ширины у .special-item: * это работало, пока карточек было ровно 4 (захардкоженных). Восемь * динамических влезали в один ряд и сплющивались до ~130px. Здесь — перенос * и фиксированные 4 карточки в ряд, то есть два ряда по четыре. * * Подключается в index.blade.php (вне зоны Vue). */ .special__list_grid { flex-wrap: wrap; justify-content: center; } .special__list_grid .special-item { width: calc(25% - 14px); box-sizing: border-box; display: flex; flex-direction: column; } /* Названия и адреса разной длины сдвигали фото по вертикали — фиксируем высоту текстовой шапки в строках, хвост режем многоточием. */ .special__list_grid .special-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } .special__list_grid .special-item__location { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; margin-bottom: 0; } /* Кнопка прижата к низу — иначе карточки с коротким адресом «висят» */ .special__list_grid .special-item__bottom { margin-top: auto; } @media only screen and (max-width: 992px) { .special__list_grid .special-item { width: calc(50% - 14px); } } @media only screen and (max-width: 480px) { .special__list_grid .special-item { width: 100%; max-width: 480px; } }