.flx-insights-block {
--insights-black: #000000;
--insights-white: #FFFFFF;
--insights-text: #17130F;
background: var(--insights-black);
color: var(--insights-white);
margin: 0;
overflow: hidden;
padding: 120px 0;
}
.flx-insights-block * {
box-sizing: border-box;
}
.flx-insights-block__title {
color: var(--insights-white);
font-family: "Libre Franklin", sans-serif;
font-size: 34px;
font-style: italic;
font-weight: 800;
line-height: 1;
margin: 0 0 76px 10px;
text-transform: uppercase;
}
.flx-insights-block__grid {
align-items: start;
display: grid;
gap: 54px 24px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flx-insights-block__card {
margin: 0;
position: relative;
}
.flx-insights-block__card--text {
align-items: center;
aspect-ratio: 1 / 1.34;
background: var(--insights-white);
color: var(--insights-text);
display: flex;
flex-direction: column;
justify-content: center;
padding: 28px 30px;
text-align: center;
}
.flx-insights-block__date,
.flx-insights-block__header {
color: var(--insights-text);
font-family: "Libre Franklin", sans-serif;
font-weight: 800;
line-height: 1.08;
margin: 0;
text-transform: uppercase;
}
.flx-insights-block__date {
font-size: 16px;
}
.flx-insights-block__header {
font-size: 24px;
margin-bottom: 16px;
}
.flx-insights-block__text,
.flx-insights-block__text p,
.flx-insights-block__text li {
color: var(--insights-text);
font-family: "Libre Franklin", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.38;
}
.flx-insights-block__text p {
margin: 0 0 10px;
}
.flx-insights-block__text p:last-child,
.flx-insights-block__text ul:last-child,
.flx-insights-block__text ol:last-child {
margin-bottom: 0;
}
.flx-insights-block__card--image {
aspect-ratio: 1 / 1.34;
overflow: hidden;
}
.flx-insights-block__image {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.flx-insights-block__image-label {
color: var(--insights-black);
font-family: "Libre Franklin", sans-serif;
font-size: 24px;
font-weight: 800;
left: 50%;
line-height: 1;
max-width: calc(100% - 36px);
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
transform: translate(-50%, -50%);
width: max-content;
}
.flx-insights-block__card:nth-child(4n + 2),
.flx-insights-block__card:nth-child(4n + 4) {
margin-top: 98px;
}
@media (min-width: 769px) {
.flx-insights-block .container{
padding: 0 77px;
}
.flx-insights-block__title {
font-size: 35px;
}
}
@media (min-width: 1280px) {
.flx-insights-block__title {
font-size: 48px;
}
}
@media (min-width: 1460px) {
.flx-insights-block__grid {
gap: 54px 36px;
}
}
@media (max-width: 999px) {
.flx-insights-block {
padding: 0 0 58px;
}
.flx-insights-block > .container {
max-width: none;
padding-left: 19px;
padding-right: 19px;
width: 100%;
}
.flx-insights-block__title {
font-size: 21px;
margin: 0 0 18px;
}
.flx-insights-block__grid {
gap: 0 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flx-insights-block__card,
.flx-insights-block__card:nth-child(4n + 2),
.flx-insights-block__card:nth-child(4n + 4) {
margin-top: 0;
}
.flx-insights-block__card:nth-child(even) {
margin-top: 54px;
}
.flx-insights-block__card:nth-child(n + 3) {
margin-top: 16px;
}
.flx-insights-block__card:nth-child(2n + 4) {
margin-top: 70px;
}
.flx-insights-block__card--text,
.flx-insights-block__card--image {
aspect-ratio: 0.82 / 1.08;
}
.flx-insights-block__card--text {
padding: 18px 17px;
}
.flx-insights-block__date {
font-size: 12px;
}
.flx-insights-block__header {
font-size: 16px;
margin-bottom: 10px;
}
.flx-insights-block__text,
.flx-insights-block__text p,
.flx-insights-block__text li {
font-size: 9px;
line-height: 1.3;
}
.flx-insights-block__image-label {
font-size: 18px;
max-width: calc(100% - 24px);
}
}