.c-hero-banner {
--hero-content-text-height: 55%;
position: relative;
overflow: hidden;
}
.c-hero-banner .c-hero-banner__inner {
height: 100%;
}
.c-hero-banner .c-hero-banner__image-wrapper {
position: relative;
overflow: hidden;
}
.c-hero-banner .c-hero-banner__image img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
min-height: 450px;
max-height: calc(85vh - var(--hero-content-text-height));
-o-object-position: top;
object-position: top;
border-radius: 0;
}
@media (min-width: 768px) {
.c-hero-banner .c-hero-banner__image img {
height: auto;
}
}
@media (max-height: 800px) and (min-width: 992px) {
.c-hero-banner .c-hero-banner__image img {
min-height: 350px;
}
}
@media (max-height: 800px) and (min-width: 1800px) {
.c-hero-banner .c-hero-banner__image img {
min-height: 450px;
}
}
.c-hero-banner .c-hero-banner__content {
width: 100%;
position: relative;
color: #fff;
overflow: hidden;
}
.c-hero-banner .c-hero-banner__content-text {
padding: 2rem 1rem 1rem 1rem;
z-index: 2;
background-color: var(--wp--preset--color--primary);
position: relative;
}
@media (max-width: 576px) {
.c-hero-banner .c-hero-banner__content-text {
order: 2;
}
}
@media (min-width: 400px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 2rem 1.5rem 1rem 1.5rem;
}
}
@media (min-width: 576px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 3rem 2rem 2rem 2rem;
}
}
@media (min-width: 768px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 3rem 2.25rem 2rem 2.25rem;
}
}
@media (min-width: 992px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 3rem 7%;
}
}
@media (min-width: 1200px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 3rem 7%;
}
}
@media (min-width: 1400px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 2.5rem 7% 2rem 4%;
}
}
@media (min-width: 1600px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 3rem 800px 2.5rem 5%;
}
}
@media (min-width: 1800px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 3rem 800px 2.5rem 7.2%;
}
}
@media (min-width: 2200px) {
.c-hero-banner .c-hero-banner__content-text {
padding: 5rem 800px 4.5rem 10%;
}
}
.c-hero-banner .c-hero-banner__title {
font-size: 1.5rem;
margin-bottom: 1rem; }
@media (min-width: 576px) {
.c-hero-banner .c-hero-banner__title {
font-size: 1.5rem;
}
}
@media (min-width: 700px) {
.c-hero-banner .c-hero-banner__title {
font-size: 2rem;
}
}
@media (min-width: 992px) {
.c-hero-banner .c-hero-banner__title {
font-size: calc(1.5rem + 1vw);
}
}
@media (min-width: 1200px) {
.c-hero-banner .c-hero-banner__title {
font-size: 2.25rem;
}
}
@media (min-width: 1400px) {
.c-hero-banner .c-hero-banner__title {
margin-bottom: 1rem;
}
}
@media (min-width: 1600px) {
.c-hero-banner .c-hero-banner__title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
}
@media (min-width: 1900px) {
.c-hero-banner .c-hero-banner__title {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
}
.c-hero-banner .c-hero-banner__subtitle {
font-size: 0.875;
max-width: 1000px;
}
@media (min-width: 768px) {
.c-hero-banner .c-hero-banner__subtitle {
font-size: 1.125rem;
}
}
@media (min-width: 1200px) {
.c-hero-banner .c-hero-banner__subtitle {
font-size: 1.25rem;
}
}
@media (min-width: 1600px) {
.c-hero-banner .c-hero-banner__subtitle {
font-size: 1.25rem;
}
}
.c-hero-banner .c-hero-banner__content-logos {
width: 100%;
height: auto;
padding: 2.5rem 1rem 2.5rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 1;
gap: 1rem;
align-items: center;
z-index: 1;
}
.c-hero-banner .c-hero-banner__content-logos:after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: var(--wp--preset--color--green-light);
z-index: -1;
}
@media (min-width: 576px) {
.c-hero-banner .c-hero-banner__content-logos {
padding: 2.5rem 1rem 2.5rem 1rem;
}
}
@media (min-width: 992px) {
.c-hero-banner .c-hero-banner__content-logos {
padding: 2.5rem 1.5rem;
}
}
@media (min-width: 1400px) {
.c-hero-banner .c-hero-banner__content-logos {
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
width: auto;
height: 100%;
z-index: 9;
border-radius: 0;
padding: 3.5rem 5.5rem 3.5rem 5rem;
}
.c-hero-banner .c-hero-banner__content-logos:after {
content: "";
position: absolute;
top: 30%;
transform: translateY(-50%);
left: 0;
width: 100%;
height: 700px;
background-color: var(--wp--preset--color--green-light);
z-index: -1;
border-top-left-radius: 100%;
border-top-right-radius: 0;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 0;
}
}
@media (min-width: 1400px) and (min-width: 2000px) {
.c-hero-banner .c-hero-banner__content-logos:after {
top: 30%;
height: 800px;
}
}
@media (min-width: 1400px) and (min-width: 2000px) {
.c-hero-banner .c-hero-banner__content-logos:after {
top: 30%;
height: 850px;
}
}
@media (min-width: 1600px) {
.c-hero-banner .c-hero-banner__content-logos {
right: -40px;
padding: 3.5rem 5.5rem 3.5rem 6rem;
}
}
@media (min-width: 1800px) {
.c-hero-banner .c-hero-banner__content-logos {
position: absolute;
right: -3%;
top: 50%;
transform: translateY(-50%);
width: auto;
height: 100%;
z-index: 9;
border-radius: 0;
padding: 3.5rem 7% 3.5rem 6%;
}
}
@media (min-width: 1800px) {
.c-hero-banner .c-hero-banner__content-logos {
padding: 3.5rem 10% 3.5rem 6%;
}
}
@media (min-width: 2400px) {
.c-hero-banner .c-hero-banner__content-logos {
padding: 3.5rem 10% 3.5rem 7%;
}
}
.c-hero-banner .c-hero-banner__content-logos-inner {
width: 100%;
display: flex;
flex-direction: row;
gap: 2rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
@media (min-width: 450x) {
.c-hero-banner .c-hero-banner__content-logos-inner {
gap: 1rem;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
}
}
@media (min-width: 576px) {
.c-hero-banner .c-hero-banner__content-logos-inner {
justify-content: center;
}
}
@media (min-width: 768px) {
.c-hero-banner .c-hero-banner__content-logos-inner {
gap: 5rem;
}
}
@media (min-width: 992px) {
.c-hero-banner .c-hero-banner__content-logos-inner {
gap: 7rem;
}
}
@media (min-width: 1400px) {
.c-hero-banner .c-hero-banner__content-logos-inner {
gap: 3rem;
}
}
@media (min-width: 1600px) {
.c-hero-banner .c-hero-banner__content-logos-inner {
gap: 3rem;
}
}
@media (min-width: 2400px) {
.c-hero-banner .c-hero-banner__content-logos-inner {
gap: 4rem;
}
}
.c-hero-banner .c-hero-banner__logo-wrapper {
display: flex;
justify-content: center;
}
.c-hero-banner .c-hero-banner__logo {
width: 100px;
height: 70px;
height: auto;
}
@media (min-width: 992px) {
.c-hero-banner .c-hero-banner__logo {
max-width: 200px;
}
}
@media (min-width: 1400px) {
.c-hero-banner .c-hero-banner__logo {
max-width: 250px;
}
}
.c-hero-banner .c-hero-banner__logo--1 {
width: 170px;
}
@media (min-width: 576px) {
.c-hero-banner .c-hero-banner__logo--1 {
width: 180px;
}
}
@media (min-width: 768px) {
.c-hero-banner .c-hero-banner__logo--1 {
width: 190px;
}
}
@media (min-width: 1400px) {
.c-hero-banner .c-hero-banner__logo--1 {
width: 200px;
}
}
@media (min-width: 1600px) {
.c-hero-banner .c-hero-banner__logo--1 {
width: 190px;
}
}
@media (min-width: 1800px) {
.c-hero-banner .c-hero-banner__logo--1 {
width: 210px;
}
}
@media (min-width: 2000px) {
.c-hero-banner .c-hero-banner__logo--1 {
width: 220px;
}
}
@media (min-width: 2200px) {
.c-hero-banner .c-hero-banner__logo--1 {
width: 230px;
}
}
@media (min-width: 2500px) {
.c-hero-banner .c-hero-banner__logo--1 {
width: 240px;
}
}
.c-hero-banner .c-hero-banner__logo--2 {
width: 170px;
margin-top: 9px;
}
@media (min-width: 576px) {
.c-hero-banner .c-hero-banner__logo--2 {
width: 150px;
}
}
@media (min-width: 768px) {
.c-hero-banner .c-hero-banner__logo--2 {
width: 160px;
}
}
@media (min-width: 1400px) {
.c-hero-banner .c-hero-banner__logo--2 {
width: 160px;
margin-top: 8px;
}
}
@media (min-width: 1600px) {
.c-hero-banner .c-hero-banner__logo--2 {
width: 160px;
}
}
@media (min-width: 1800px) {
.c-hero-banner .c-hero-banner__logo--2 {
width: 170px;
}
}
@media (min-width: 2000px) {
.c-hero-banner .c-hero-banner__logo--2 {
width: 170px;
}
}
@media (min-width: 2200px) {
.c-hero-banner .c-hero-banner__logo--2 {
width: 180px;
}
}
@media (min-width: 2500px) {
.c-hero-banner .c-hero-banner__logo--2 {
width: 190px;
}
}
.c-hero-banner .c-hero-banner__logo--3 {
width: 170px;
margin-top: -0.5rem;
}
@media (min-width: 576px) {
.c-hero-banner .c-hero-banner__logo--3 {
width: 180px;
margin-top: 0;
}
}
@media (min-width: 768px) {
.c-hero-banner .c-hero-banner__logo--3 {
width: 200px;
margin-top: -0.25rem;
}
}
@media (min-width: 1400px) {
.c-hero-banner .c-hero-banner__logo--3 {
width: 190px;
}
}
@media (min-width: 1600px) {
.c-hero-banner .c-hero-banner__logo--3 {
width: 180px;
}
}
@media (min-width: 1800px) {
.c-hero-banner .c-hero-banner__logo--3 {
width: 200px;
}
}
@media (min-width: 2000px) {
.c-hero-banner .c-hero-banner__logo--3 {
width: 210px;
}
}
@media (min-width: 2200px) {
.c-hero-banner .c-hero-banner__logo--3 {
width: 220px;
}
}
@media (min-width: 2500px) {
.c-hero-banner .c-hero-banner__logo--3 {
width: 230px;
}
}