<div class="supt-card-text">
<div class="supt-card-text__head supt-parallax-image">
<div class="supt-card-text__head__inner supt-parallax-image__image">
<img src="/sites/gv/files/flmngr/card-text.webp" alt="Proud to serve with excellence">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>Proud to serve with excellence</h3>
</div>
<p>We are the leading provider of monitored security solutions in Europe and Latin America, because we take our customers' trust and security seriously. We believe everyone has the right to feel sale and secure, and we pursue this goal every day.</p>
</div>
</div>
No notes defined.
<div class="supt-card-text{% if link %} -has-link{% endif %}">
<div class="supt-card-text__head{% if not noParallax %} supt-parallax-image{% endif %}">
<div class="supt-card-text__head__inner{% if not noParallax %} supt-parallax-image__image{% endif %}">
<img src="{{ path(image.src) }}" alt="{{ image.alt }}">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>{{ title }}</h3>
{% if subtitle %}
<p class="supt-card-text__subtitle">{{ subtitle }}</p>
{% endif %}
</div>
<p>{{ description }}</p>
</div>
{% if link %}
<div class="supt-card-text__foot">
{% include "atoms/buttons/button-link/button-link.twig" with link only %}
</div>
{% endif %}
</div>
{
"title": "Proud to serve with excellence",
"description": "We are the leading provider of monitored security solutions in Europe and Latin America, because we take our customers' trust and security seriously. We believe everyone has the right to feel sale and secure, and we pursue this goal every day.",
"image": {
"src": "/sites/gv/files/flmngr/card-text.webp",
"alt": "Proud to serve with excellence"
}
}
.supt-card-text {
@extend %expand-link;
display: flex;
flex-direction: column;
gap: $spacing-4;
@media (min-width: $breakpoint-md) {
gap: $spacing-6;
}
&__head {
aspect-ratio: 4 / 3;
overflow: hidden;
&__inner {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
&__body {
display: flex;
flex-direction: column;
gap: $spacing-1-5;
padding-right: $spacing-6;
@media (min-width: $breakpoint-md) {
gap: $spacing-3;
}
h2,
h3,
h4 {
@extend %t-h4;
margin-bottom: 0;
}
p {
@extend %t-body-s;
color: $color-grey-5;
&.supt-card-text__subtitle {
@extend %t-body-sm;
color: $color-black;
}
}
}
&.-has-link {
@mixin card-hover .supt-card-text;
}
}