.hv2-hero { padding: 90px 15px 0;
}
.hv2-hero__bloco {
display: flex; align-items: center;
min-height: 400px;
padding: 64px 0;
border-radius: 16px;
overflow: hidden;
background-color: #0a142d;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image:
linear-gradient(90deg, rgba(10, 20, 45, .88) 0%, rgba(10, 20, 45, .62) 48%, rgba(10, 20, 45, .20) 100%),
var(--hv2-hero-jpg);
background-image:
linear-gradient(90deg, rgba(10, 20, 45, .88) 0%, rgba(10, 20, 45, .62) 48%, rgba(10, 20, 45, .20) 100%),
image-set(var(--hv2-hero-webp) type("image/webp"), var(--hv2-hero-jpg) type("image/jpeg"));
}
.hv2-hero__bloco > .container {
width: 100%;
}
.hv2-hero__texto {
max-width: 640px;
}
.hv2-hero__texto h1 {
font-size: 46px;
line-height: 1.15;
margin: 0 0 16px;
color: #fff;
} .hv2-hero__texto .span-green {
color: #17c79a;
} .hv2-hero__texto p {
font-size: 18px;
line-height: 1.6;
margin: 0;
max-width: 46ch;
color: rgba(255, 255, 255, .88);
text-wrap: pretty;
} .hv2-solucoes-secao {
padding: 72px 0 96px;
}
.hv2-solucoes__topo {
margin-bottom: 40px;
max-width: 62ch;
}
.hv2-solucoes__topo h2 {
margin: 0 0 12px;
}
.hv2-solucoes__topo p {
margin: 0;
font-size: 17px;
line-height: 1.6;
text-wrap: pretty;
}
.hv2-solucoes {
display: grid;
gap: 24px;
}
.hv2-solucao {
display: flex;
text-decoration: none;
color: inherit;
border-radius: 16px;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease;
}
.hv2-solucao:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(41, 69, 142, .12);
color: inherit;
text-decoration: none;
}
.hv2-solucao__midia {
position: relative;
overflow: hidden;
background: #f6f6f6;
flex-shrink: 0;
}
.hv2-solucao__midia img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.hv2-solucao:hover .hv2-solucao__midia img {
transform: scale(1.06);
}
.hv2-solucao__texto h3 {
font-size: 22px;
line-height: 1.25;
margin: 0 0 8px;
color: #29458E;
}
.hv2-solucao__texto p {
font-size: 15px;
line-height: 1.55;
margin: 0 0 12px;
text-wrap: pretty;
}
.hv2-solucao__link {
display: inline-block;
font-weight: 500;
color: #009E75;
}
.hv2-solucao:hover .hv2-solucao__link {
text-decoration: underline;
} .hv2-solucoes--grade {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.hv2-solucoes--grade .hv2-solucao {
flex-direction: column;
}
.hv2-solucoes--grade .hv2-solucao__midia {
aspect-ratio: 16 / 9;
}
.hv2-solucoes--grade .hv2-solucao__texto {
padding: 24px 26px 28px;
} .hv2-cards--fundo .hv2-solucao {
background: #f4f5f8;
}
.hv2-cards--fundo .hv2-solucao:hover {
background: #eef0f5;
} .hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao {
position: relative;
}
.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__midia {
aspect-ratio: 3 / 2;
}
.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__midia::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 20, 45, 0) 30%, rgba(10, 20, 45, .55) 58%, rgba(10, 20, 45, .92) 100%);
}
.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__texto {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 24px 26px 26px;
}
.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__texto h3 {
color: #fff;
}
.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__texto p {
color: rgba(255, 255, 255, .85);
} .hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__link {
color: #17c79a;
} .hv2-solucoes--lista {
grid-template-columns: 1fr;
gap: 16px;
}
.hv2-solucoes--lista .hv2-solucao {
flex-direction: row;
align-items: stretch;
border: 1px solid #ececf1;
}
.hv2-solucoes--lista .hv2-solucao__midia {
flex: 0 0 300px;
aspect-ratio: 16 / 10;
}
.hv2-solucoes--lista .hv2-solucao__texto {
padding: 24px 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hv2-solucoes--lista .hv2-solucao__texto p {
max-width: 68ch;
} @media (max-width: 1199px) {
.hv2-hero__texto h1 {
font-size: 40px;
}
.hv2-solucao__texto h3 {
font-size: 20px;
}
} @media (max-width: 991px) { .hv2-hero__bloco {
min-height: 460px;
padding: 48px 0;
background-image:
linear-gradient(180deg, rgba(10, 20, 45, .82) 0%, rgba(10, 20, 45, .72) 100%),
var(--hv2-hero-jpg);
background-image:
linear-gradient(180deg, rgba(10, 20, 45, .82) 0%, rgba(10, 20, 45, .72) 100%),
image-set(var(--hv2-hero-webp) type("image/webp"), var(--hv2-hero-jpg) type("image/jpeg"));
}
.hv2-hero__texto h1 {
font-size: 34px;
}
.hv2-hero__texto p {
font-size: 17px;
max-width: none;
}
.hv2-solucoes-secao {
padding: 56px 0 64px;
}
.hv2-solucoes--grade {
gap: 20px;
}
.hv2-solucoes--lista .hv2-solucao__midia {
flex-basis: 220px;
}
.hv2-solucoes--lista .hv2-solucao__texto {
padding: 20px 22px;
}
} @media (max-width: 575px) {
.hv2-hero__bloco {
min-height: 380px;
}
.hv2-hero__texto h1 {
font-size: 28px;
} .hv2-solucoes--grade {
grid-template-columns: 1fr;
} .hv2-solucoes--lista .hv2-solucao {
flex-direction: column;
}
.hv2-solucoes--lista .hv2-solucao__midia {
flex-basis: auto;
aspect-ratio: 16 / 9;
}
}