<section class="supt-banner-image supt-parallax-full-image ">
<div class="supt-banner-image__image-wrapper supt-parallax-full-image__image">
<img src="/sites/gv/files/flmngr/superhuit/homepage/24-7-protection-section-desktop.jpg" alt="" class="progressive-image-loading supt-banner-image__image supt-banner-image__image-desktop">
<img src="/sites/gv/files/flmngr/superhuit/homepage/24-7-protection-section-tablet-big.jpg" alt="" class="progressive-image-loading supt-banner-image__image supt-banner-image__image-tablet-big">
<img src="/sites/gv/files/flmngr/superhuit/homepage/24-7-protection-section-tablet-small.jpg" alt="" class="progressive-image-loading supt-banner-image__image supt-banner-image__image-tablet-small">
<img src="/sites/gv/files/flmngr/superhuit/homepage/24-7-protection-section-mobile.jpg" alt="" class="progressive-image-loading supt-banner-image__image supt-banner-image__image-mobile">
</div>
<div class="container">
<div class="row justify-content-center justify-content-lg-end">
<div class="supt-banner-image__col col-12 col-lg-6">
<div class="supt-banner-image__inner supt-parallax-element">
<h2 class="supt-bright-text supt-banner-image__title supt-parallax-element__item">24/7 protection</h2>
<div class="supt-banner-image__text supt-parallax-element__children">
<p class="supt-banner-image__subtitle">With our award-winning alarm technology</p>
<p class="supt-banner-image__description">We are a technology-enabled human services company, and our people stand ready to respond in an instant to protect what matters most.</p>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-banner-image supt-parallax-full-image {{ modifiers|modifiersAttr }}">
<div class="supt-banner-image__image-wrapper supt-parallax-full-image__image">
{% if image %}
<img src="{{ image.src }}" alt="{{ image.alt }}" class="progressive-image-loading supt-banner-image__image">
{% else %}
<img src="/sites/gv/files/flmngr/superhuit/homepage/24-7-protection-section-desktop.jpg" alt="" class="progressive-image-loading supt-banner-image__image supt-banner-image__image-desktop">
<img src="/sites/gv/files/flmngr/superhuit/homepage/24-7-protection-section-tablet-big.jpg" alt="" class="progressive-image-loading supt-banner-image__image supt-banner-image__image-tablet-big">
<img src="/sites/gv/files/flmngr/superhuit/homepage/24-7-protection-section-tablet-small.jpg" alt="" class="progressive-image-loading supt-banner-image__image supt-banner-image__image-tablet-small">
<img src="/sites/gv/files/flmngr/superhuit/homepage/24-7-protection-section-mobile.jpg" alt="" class="progressive-image-loading supt-banner-image__image supt-banner-image__image-mobile">
{% endif %}
</div>
<div class="container">
<div class="row justify-content-center justify-content-lg-end">
<div class="supt-banner-image__col col-12 col-lg-6">
<div class="supt-banner-image__inner supt-parallax-element">
<h2 class="supt-bright-text supt-banner-image__title supt-parallax-element__item">{{ title }}</h2>
<div class="supt-banner-image__text supt-parallax-element__children">
<p class="supt-banner-image__subtitle">{{ subtitle }}</p>
<p class="supt-banner-image__description">{{ description }}</p>
{% if cta %}
<div
class="supt-banner-image__cta">
{# If cta is an array, display button-double, otherwise display button #}
{% if cta is array %}
{% include 'molecules/button-double/button-double.twig' with {
buttons: cta
} only %}
{% else %}
{% include 'atoms/buttons/button/button.twig' with cta only %}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</section>
{
"title": "24/7 protection",
"subtitle": "With our award-winning alarm technology",
"description": "We are a technology-enabled human services company, and our people stand ready to respond in an instant to protect what matters most."
}
.supt-banner-image {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
@media (min-width: $breakpoint-lg) {
aspect-ratio: 1680/700;
}
&__image-wrapper {
position: absolute;
inset: 0;
}
&__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
&__image-desktop {
display: none;
object-position: 30% 50%;
@media (min-width: $breakpoint-lg) {
display: block;
}
}
&__image-tablet-big {
display: none;
object-position: bottom;
@media (min-width: $breakpoint-md) {
display: block;
}
@media (min-width: $breakpoint-lg) {
display: none;
}
}
&__image-tablet-small {
display: none;
object-position: 50% 80%;
@media (min-width: $breakpoint-sm) {
display: block;
}
@media (min-width: $breakpoint-md) {
display: none;
}
}
&__image-mobile {
object-position: 50% 80%;
@media (min-width: $breakpoint-sm) {
display: none;
}
}
&__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
padding-top: 56px;
gap: 28px;
height: 700px;
color: $color-white;
text-align: center;
@media (min-width: $breakpoint-lg) {
padding-top: 0;
justify-content: center;
gap: 32px;
height: 100%;
min-height: 650px;
text-align: left;
}
}
&__title {
@extend %t-h1;
margin: 0;
text-shadow: $text-shadow-glow;
}
&__text {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
&__subtitle {
@extend %t-body-m-uppercase;
}
&__description {
@extend %t-body-m;
}
&__cta {
margin: $spacing-4 auto 0;
@media (min-width: $breakpoint-lg) {
margin: $spacing-8 0 0;
}
.supt-button__wrapper {
box-shadow:
8px 8px 16px 0px rgba(220, 221, 222, 0.3),
-8px -8px 16px 0px rgba(255, 255, 255, 0.3);
}
}
&.-custom-image {
.supt-banner-image__inner {
height: 500px;
@media (min-width: $breakpoint-lg) {
height: 100%;
}
}
.supt-banner-image__image-wrapper {
&::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 50%);
@media (min-width: $breakpoint-lg) {
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 50%);
}
}
}
}
}