main {
display: flex;
flex-direction: column;
} .hero-container {
display: flex;
gap: 24px;
justify-content: start;
align-items: stretch;
flex: 1;
.hero-card {
width: 100%;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
border-radius: 15px;
padding: var(--spacer-60);
.content {
width: 100%;
min-height: 192px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
}
&.left {
min-width: 55.55%;
width: 100%;
flex-grow: 1;
background: linear-gradient(180deg, #3C3B3B 0%, #1B1B1B 100%);
color: var(--text-white);
.content {
margin-top: 8px;
}
}
&.right {
width: 100%;
flex-grow: 1;
border: var(--border-light-blue);
background: var(--section-gradient);
color: var(--text-black-secondary);
.content {
margin-top: 8px;
a {
.cta-secondary__text {
color: var(--text-black-primary);
}
}
}
.cta-primary-container {
background: transparent;
}
}
}
@media screen and (max-width: 1024px) {
& {
gap: 20px;
.hero-card {
border-radius: 12px;
padding: 24px;
.content {
min-height: auto;
gap: 24px;
}
}
}
}
} .latest-insights {
position: relative;
height: auto;
padding: 60px 100px;
display: flex;
justify-content: space-between;
align-items: start;
gap: 50px;
border: var(--border-light-blue);
border-radius: 20px;
background: var(--section-gradient);
margin-bottom: var(--spacer-120);
.triangle_graphic {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.left-content {
max-width: 390px;
width: 100%;
height: auto;
.para-primary {
margin-top: 8px;
}
}
.right-content {
max-width: 625px;
width: 100%;
height: auto;
}
@media screen and (max-width: 1024px) {
& {
flex-direction: column;
gap: 32px;
padding: 40px 20px;
margin-block: var(--spacer-60);
}
}
}