section {
position: relative;
margin: calc(var(--size) * 1.1) auto 0;
width: calc(var(--size) * calc(var(--Nhexa) - 1));
display: grid;
grid-template-columns: repeat(var(--Nhexa), 1fr);
grid-gap: var(--gap);
margin-bottom: 50px;
}
article {
position: relative;
background: #e0ce04;
width: var(--size);
height: calc(var(--size) / 1.222222);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
margin-right: calc(var(--size) / 2);
overflow: hidden;
}
.orange {
background: #dba428;
}
.style__block {
@extend %center;
}
.image {
background: url(../img/block__image.png) no-repeat center;
background-size: cover;
}
.image1 {
background: url(../img/block__image1.png) no-repeat center;
background-size: cover;
}
.image2 {
background: url(../img/block__image2.png) no-repeat center;
background-size: cover;
}
.image3 {
background: url(../img/block__image3.png) no-repeat center;
background-size: cover;
}
.figure__style {
margin-right: 25px;
}
.block__img {
@extend %center;
margin-right: 0px;
margin-bottom: 20px;
}
.block__sublogo-text {
font-size: 18px;
font-family: "Montserrat", sans-serif;
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1;
}
.block__subtext {
font-size: 14px;
font-family: "Montserrat", sans-serif;
color: rgb(0, 0, 0);
line-height: 1.333;
}
article:nth-child(2n) {
margin: calc(var(--size) * -0.45) calc(var(--size) * -0.35) 0 calc(var(--size) * -0.74);
}
article:nth-child(11) {
margin: calc(var(--size) * -1.8) calc(var(--size) * -0.35) 0 calc(var(--size) * 0);
}
article:nth-child(13) {
margin: calc(var(--size) * -2.85) calc(var(--size) * -0.35) 0 calc(var(--size) * 0.3);
--size: calc(calc(65vw / var(--Nhexa)) - var(--gap));
}
article:nth-child(12) {
margin: calc(var(--size) * -0.8) calc(var(--size) * -0.35) 0 calc(var(--size) * -1.2);
--size: calc(calc(50vw / var(--Nhexa)) - var(--gap));
}
article:nth-child(7) {
--size: calc(calc(35vw / var(--Nhexa)) - var(--gap));
margin: calc(var(--size) * 0) calc(var(--size) * -0.35) 0 calc(var(--size) * 1.45);
}
article:nth-child(9) {
margin: calc(var(--size) * -1.8) calc(var(--size) * 0) 0 calc(var(--size) * 0);
}
article:nth-child(14) {
margin: calc(var(--size) * 4) calc(var(--size) * -0.35) 0 calc(var(--size) * -1.2);
--size: calc(calc(50vw / var(--Nhexa)) - var(--gap));
}
.adaptiviti {
--size: calc(calc(40vw / var(--Nhexa)) - var(--gap));
position: absolute;
top: 145px;
right: -80px;
}
article::before {
content: "";
float: left;
width: 25%;
height: 100%;
clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
}
<section>
<article class="orange style__block">
<figure class="figure__style">
<div class="block__info">
<div class="block__img">
<p class="block__sublogo-text">01.</p>
<img src="img/heat.png" alt="heat__logo">
</div>
<div class="block__text">
<span class="block__subtext">2 режима работы    на
обогрев</span>
</div>
</div>
</figure>
</article>
<article class="style__block">
<figure class="figure__style">
<div class="block__info">
<div class="block__img">
<p class="block__sublogo-text">02.</p>
<img src="img/shield.png" alt="heat__logo">
</div>
<div class="block__text">
<span class="block__subtext">  Защита<br> от
перегрева  </span>
</div>
</div>
</figure>
</article>
<article class="style__block">
<figure class="figure__style">
<div class="block__info">
<div class="block__img">
<p class="block__sublogo-text">03.</p>
<img src="img/compact-disk.png" alt="heat__logo">
</div>
<div class="block__text">
<span class="block__subtext">   Компактный
     размер</span>
</div>
</div>
</figure>
</article>
<article class="style__block">
<figure class="figure__style">
<div class="block__info">
<div class="block__img">
<p class="block__sublogo-text">04.</p>
<img src="img/idea.png" alt="heat__logo">
</div>
<div class="block__text">
<span class="block__subtext">   Необычный
     дизайн</span>
</div>
</div>
</figure>
</article>
<article class="orange style__block">
<figure class="figure__style">
<div class="block__info">
<div class="block__img">
<p class="block__sublogo-text">05.</p>
<img src="img/temperature.png" alt="heat__logo">
</div>
<div class="block__text">
<span class="block__subtext">Режим холодного
     обдува</span>
</div>
</div>
</figure>
</article>
<article class="orange style__block">
<figure class="figure__style">
<div class="block__info">
<div class="block__img">
<p class="block__sublogo-text">06.</p>
<img src="img/fair.png" alt="heat__logo">
</div>
<div class="block__text">
<span class="block__subtext">Керамический
    нагрев</span>
</div>
</div>
</figure>
</article>
<article>
<figure>
</figure>
</article>
<article class="image1">
<figure>
<h2></h2>
</figure>
</article>
<article class="image">
<figure>
<h2></h2>
</figure>
</article>
<article class="image3">
<figure>
<h2></h2>
</figure>
</article>
<article class="image2">
<figure>
<h2></h2>
</figure>
</article>
<article>
<figure>
</figure>
</article>
<article class="orange">
<figure>
</figure>
</article>
<article class="none">
<figure>
</figure>
</article>
<article class="adaptiviti orange">
<figure>
</figure>
</article>
</section>