<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 - класс-модификатор, допустим, альтернативное оформление с незначительными изменениями.
function callback(event) {
// Provided by the core
var element = event.target; // DOM element, in this example .owl-carousel
var name = event.type; // Name of the event, in this example dragged
var namespace = event.namespace; // Namespace of the event, in this example owl.carousel
var items = event.item.count; // Number of items
var item = event.item.index; // Position of the current item
// Provided by the navigation plugin
var pages = event.page.count; // Number of pages
var page = event.page.index; // Position of the current page
var size = event.page.size; // Number of items per page
}<section class="about-project">
<div class="container">
<div class="row">
<div class="about-project__img col-md-2">
<img src="#" alt="О проекте">
</div>
<div class="about-project__descr col-md-10">
<h2 class="about-project__title">О проекте</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum maiores voluptates assumenda veritatis maxime nemo laborum, voluptatibus ea ipsa necessitatibus, architecto odio distinctio numquam ut, eaque consequatur quo! Debitis.. </p>
</div>
</div>
</div>
</section>
