<section class="supt-section-cta">
<div class="container">
<div class="row">
<div class="supt-section-cta__head col-12 col-md-5 offset-md-1">
<h2>How our services make a difference</h2>
</div>
<div class="supt-section-cta__body col-12 col-md-5">
<p>Behind the numbers, <b>there are human stories</b>. They are the best testimonials to the energy, <i>heart</i> and innovation we put in our work. They are the reasons we keep moving forward. </p>
<span class="supt-button ">
<a class="supt-button__link" href=#>
<span class="supt-button__title">
Success stories
</span>
</a>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Success stories
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</span>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-section-cta">
<div class="container">
<div class="row">
<div class="supt-section-cta__head col-12 col-md-5 offset-md-1">
<h2>{{ title }}</h2>
</div>
<div class="supt-section-cta__body col-12 col-md-5">
<p>{{ description }}</p>
{% include "atoms/buttons/button/button.twig" with button only %}
</div>
</div>
</div>
</section>
{
"title": "How our services make a difference",
"description": "Behind the numbers, <b>there are human stories</b>. They are the best testimonials to the energy, <i>heart</i> and innovation we put in our work. They are the reasons we keep moving forward. ",
"button": {
"title": "Success stories",
"href": "#"
}
}
.supt-section-cta {
@mixin clamp padding-block, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
background: $color-grey-background;
.row {
@mixin clamp padding-block, $spacing-12, $spacing-20, $breakpoint-xs, $breakpoint-xl;
background: $color-grey-background;
box-shadow:
8px 8px 16px 0px $color-grey-1,
-8px -8px 16px 0px $color-white;
row-gap: $spacing-3;
@media (max-width: calc($breakpoint-sm - 1px)) {
margin: 0;
}
}
&__head,
&__body {
@media (max-width: calc($breakpoint-md - 1px)) {
padding-inline: $spacing-10;
}
}
&__head {
h2,
h3,
h4 {
@extend %t-h2;
margin-bottom: 0;
}
}
&__body {
@mixin clamp gap, $spacing-6, $spacing-8, $breakpoint-xs, $breakpoint-xl;
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
> p {
@extend %t-body-sm;
}
}
}