Блок преимуществ

Приверы блоков преимуществ

Вот предоставлен пример верстки блока преимуществ для примера на первом рисунке

Посмотреть код html

<div class="el_advantagesBlock_xxxxxx clearfix">
	<div class="el_advantagesList_xxxxxx row">
		<div class="el_advantagesItem_xxxxxx col">
			<div>
				<p class="title">Уникальная цена</p>
				<div class="infoBlock row">
					<div class="image col">
						<p class="image-flex">
							<span class="el"><img src="advantages1.png" alt=""></span>
						</p>
					</div>
					<div class="text col">Наши цены гораздо ниже рыночных, покупайте, у нас очень выгодно!</div>
				</div>
			</div>
		</div>
		<div class="el_advantagesItem_xxxxxx col">
			<div>
				<p class="title">Доставка по всей стране</p>
				<div class="infoBlock row">
					<div class="image col">
						<p class="image-flex"><span class="el"><img src="advantages2.png" alt=""></span></p>
					</div>
					<div class="text col">Мы работаем с ведущими транспортынми компаниями, а это скорость и надежность</div>
				</div>
			</div>
		</div>
		<div class="el_advantagesItem_xxxxxx col">
			<div>
				<p class="title">Широкий ассортимент</p>
				<div class="infoBlock row">
					<div class="image col">
						<p class="image-flex"><span class="el"><img src="advantages3.png" alt=""></span></p>
					</div>
					<div class="text col">Широкий ассортимент климатической техники, электрооборудования и многое другое</div>
				</div>
			</div>
		</div>
		<div class="el_advantagesItem_xxxxxx col">
			<div>
				<p class="title">Полный пакет документов</p>
				<div class="infoBlock row">
					<div class="image col">
						<p class="image-flex"><span class="el"><img src="advantages4.png" alt=""></span></p>
					</div>
					<div class="text col">Гарантия на продукцию, сертификация качества на всю предоставляемую продукцию</div>
				</div>
			</div>
		</div>
	</div>
</div>

Посмотреть код css

.el_advantagesBlock_xxxxxx
{
}
.el_advantagesBlock_xxxxxx .el_advantagesList_xxxxxx
{
}
.el_advantagesBlock_xxxxxx .el_advantagesList_xxxxxx .el_advantagesItem_xxxxxx
{
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
 
	margin-bottom: 30px;
}
 
@media (max-width: 1060px)
{
	.el_advantagesBlock_xxxxxx .el_advantagesList_xxxxxx .el_advantagesItem_xxxxxx
	{
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 520px)
{
	.el_advantagesBlock_xxxxxx .el_advantagesList_xxxxxx .el_advantagesItem_xxxxxx
	{
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
 
		margin-bottom: 30px;
	}
}
 
.el_advantagesItem_xxxxxx
{
}
.el_advantagesItem_xxxxxx > div
{
	border: 1px solid #e1e1e1;
	border-radius: 5px;
	height: 100%;
}
.el_advantagesItem_xxxxxx .title
{
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	padding: 6px;
	margin: -1px;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
}
.el_advantagesItem_xxxxxx:nth-child(1) .title
{
	background: #4fad25;
}
.el_advantagesItem_xxxxxx:nth-child(2) .title
{
	background: #2091c9;
}
.el_advantagesItem_xxxxxx:nth-child(3) .title
{
	background: #23b6ec;
}
.el_advantagesItem_xxxxxx:nth-child(4) .title
{
	background: #5bcc28;
}
 
.el_advantagesItem_xxxxxx .infoBlock
{
	padding: 10px 10px;
}
.el_advantagesItem_xxxxxx .infoBlock .image
{
	-ms-flex: 0 0 70px;
	flex: 0 0 70px;
	max-width: 70px;
}
.el_advantagesItem_xxxxxx .infoBlock .text
{
	line-height: 1.3;
	font-size: 1.2rem;
}