.about{
&__item{
@extend .col-md-3;
@extend .col-sm-2;
@extend .col-xs-6;
}
}Следовательно макеты нужно делать для 320px, 768px, 992px, 1200px. Верно понимаю?
И сразу вопрос про отступы между колонками: какими они должны быть?
хотелось бы просто поставить полифилл, настроить и спокойно использовать возможности HTML5, CSS3 и ES5/ES6.
<div class="container">
<h2>
<span>О нас</span>
</h2>
</div>.container {
width: 700px;
margin: auto;
}
h2 {
text-align: center;
position: relative;
}
h2:before {
content: '';
display: block;
width: 75%;
height: 1px;
background: linear-gradient(90deg, red 70%, blue 70%);
position: absolute;
top: 7px;
left: 0;
}
h2:after {
content: '';
display: block;
width: 75%;
height: 1px;
position: absolute;
background: linear-gradient(90deg, blue 30%, red 30%);
right: 0;
bottom: 7px;
}
h2 span {
padding: 5px 40px;
background: #fff;
position: relative;
z-index: 1;
}<div class="catalog">
<div class="gallery gallery--alt catalog__gallery">
...
</div>
</div>gallery задаёт общее оформление галереи.catalog__gallery задаёт размеры и позицию относительно нужной секции.gallery--alt - класс-модификатор, допустим, альтернативное оформление с незначительными изменениями.