Выравнивание блоков новостей.

Приветствую! Сейчас использую шаблон modern, в нём заметил одну проблему — блоки новостей слишком ассиметричны:

Откровенно говоря — выглядит криво. Можно ли исправить? 
Как я понял, проблемы с классом .article

По идее htmlbook.ru/css/white-space и играться с шириной

demo.instantcms.ru/news нет виджета справа, смотрится ровнее.

смотрится ровнее.

Смотрится ровнее, но всё равно асимметрия остаётся… Пытался на сколько хватало моих знаний в flexbox поправить — тщетно. К сожалению новыми версиями бутстрапа не владею :( 

Вот тут нечто похожее.

.container, .container-sm, .container-md, .container-lg, .container-xl задать max-width: 1300px; — будет так :

И если у Вас сайт не по ритуальным услугам, то светлый тон имхо лучше .

И если у Вас сайт не по ритуальным услугам, то светлый тон имхо лучше .

Это «Dark Reader» перекрашивает :)
 Нифигаccе о-го-гошеньки, попытался сделать — результат такой же.

Нифигаccе о-го-гошеньки, попытался сделать — результат такой же.

Здравствуйте! А вот не верю чтобы г-н Нифигаccе о-го-гошеньки не справился с такой задачей! Скорей всего, просто не посчитал нужным тратить время

А вот не верю чтобы г-н Нифигаccе о-го-гошеньки не справился

Честно говоря, всякие флексы-шмексы и прочие бустрапы — это не мое, и даже вникать не собираюсь. Как этими самыми флексами прижать инфобар к низу так и не придумал. Вот метод на костылях, если устроит))

файл templates/modern/content/default_list_featured.tpl.php

Строку

$class = $index == 0 ? 'col-md-6 col-lg-12 mb-sm-4' : ($index <= 3 ? 'col-md-6 col-lg-4' : 'col-md-4 col-lg-3');

заменить на 

$class = $index == 0 ? 'col-md-6 col-lg-12' : ($index <= 3 ? 'col-md-6 col-lg-4 mt-sm-4' : 'col-md-4 col-lg-3 mt-sm-4');

и стили

.content_list.featured{
    display: flex;
    flex-wrap: wrap;
}
.tile.mt-sm-4{
    position:relative;
    padding-bottom:56px;
}
.tile.mt-sm-4.col-md-4{
    padding-bottom:40px;
}
.tile.mt-sm-4 .ft_image a{
    display:block;
    width:100%;
    height:130px;
    overflow:hidden;
}
.tile.mt-sm-4 .ft_image a img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.tile.mt-sm-4 .info_bar{
    position:absolute;
    left:15px;
    bottom:0;
    width:calc(100% - 30px);
    flex-direction: column;
}

Посмотреть

И ещё для адаптивности добавить стилей, чтоб всю эту хрень отменить на телефонах))

типа вот так как-то:

@media (max-width:767px) {
    .tile.mt-sm-4 .info_bar{
        position:relative;
        flex-direction: row;
    }
    .tile.mt-sm-4{
        padding-bottom:0!important;
    }
    .tile.mt-sm-4 .ft_image a{
        height:200px;
    }
}

 Нифигаccе о-го-гошеньки, благодарю, это именно то, что мне нужно было :)

 Нифигаccе о-го-гошеньки, можно и так сделать.

Если таки заморочиться немного со всякими «флексами-шмексами», то всё проще.

Чтобы культурно было, то там всё надо переверстать и изменить «коробочные» стили модерна.  А так, чтобы вообще не изменять файл и решить только стилем:

@media (min-width:768px) {
	.content_list.featured .tile {
		margin-bottom: 0 !important;
		padding-bottom: 2rem;
	}
	.content_list.featured .article {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.content_list.featured .article .info_bar {
		margin-top: auto !important; /* если у родителя display: flex и flex-direction: column, так можно любой флекс-элемент прижать к футеру (вместе со следующими после него)*/
	}
}
@media (min-width:992px) {
	.content_list.featured .tile:first-child .article {
		height: auto;
		display: block;
	}
	.content_list.featured .tile:first-child .article .info_bar {
		margin-top: 1rem !important;
	}
}

А остальное (высота блока с картинкой, вывод элементов в инфобаре) уже по вкусу.

 Олег Васильевич я вот у Вас хороший шаблончик лигхт-ньюс есть с изменением ширины и тд, может Вы планируете что-то на базе модерн?

 Олег Васильевич я вот у Вас хороший шаблончик лигхт-ньюс есть с изменением ширины и тд, может Вы планируете что-то на базе модерн ?

Планирую, но лучше, чем там)) Только это не имеет отношения к текущей теме (не стоит засорять)