Как сверстать данный заголовок?

Question

[pozhiloy_pauk]

Всем привет, собственно вопрос: как сверстать заголовок, как в макете, с помощью smart-grid или другого способа?
Помогите, пожалуйста.

<section class="promo">
    <div class="container">
    <h1 class="promo__title promo-title">
        <span class="promo-title_light">Modern</span>>
        <span class="promo-title_small">And</span>
        <span class="promo-title_third">Unique</span>       
      </h1>
    </div>
</section>

.promo {
    min-height: 607px;
    background-color: #000000;
    padding: 164px 0 151px 0;
    .row {
        @include row-flex();
    }
    &-title {
        color: #ffffff;
        font-family: "Raleway";
        font-size: 120px;
        font-weight: 700;
        text-transform: uppercase;
        &_light {
            line-height: 90px;
            color: #fdce16;
            @include col();
            @include shift-left(2);
            @include size(6);
        }
        &_small {
            font-size: 60px;
            line-height: 50px;
            @include col();
            @include shift-left(6);
            @include size(2);
        }
        &_third {
            line-height: 90px;
            @include col();
            @include shift-left(5);
            @include size(6);
        }
    }
}

Comments

[WapSter]

<section class="promo">
    <div class="container">
    <h1 class="promo__title

Это типо бэм?)

[pozhiloy_pauk]

WapSter, тип да, если есть замечания по нему, то говори

[WapSter]

pozhiloy_pauk, блок и его элементы не могут разрываться какими-либо обертками.

[pozhiloy_pauk]

WapSter, нужно поменять местами container и promo__title?

Answer 1

[WapSter]

Comments

[pozhiloy_pauk]

Спасибо