.aeip-block-homepage-approach {
margin-inline: calc(-1 * var(--aeip-content-padding, 0));
padding-inline: var(--aeip-content-padding, 40px);
padding-block: 40px;
background-color: #fafafa;
color: var(--aeip-color-blue);
--decorator-line-width: 18px;
--line-width: 12px;
--image-width: 135px;
--spacing: 1em;
--phase-1-color: var(--aeip-color-blue-light, #03a9f4);
--phase-2-color: var(--aeip-color-green-lighter, #97c95c);
--phase-3-color: var(--aeip-color-orange, #fabc0c);
--s: -0.57;
--border-width: 4px;
--font-size: 40px;
--padding: 4px;
--box-width: calc(var(--font-size) + 2 * var(--padding) + 2 * var(--border-width));
--image-margin-top: calc(-1 * var(--s) * var(--box-width) - var(--line-width));
--before-tag-shift: calc(var(--s) * var(--box-width));
}
.aeip-block-homepage-approach:not(:last-child) {
margin-bottom: var(--aeip-section-bottom-margin);
}
.aeip-block-homepage-approach .phase-container {
display: grid;
grid-template-columns: minmax(auto, min(80%, 450px));
justify-content: center;
justify-items: center;
}
.aeip-block-homepage-approach .wrapper {
display: contents;
}
.aeip-block-homepage-approach .phase-image {
width: var(--image-width);
aspect-ratio: 1/1;
height: auto;
background-color: var(--aeip-color-blue, #1c4791);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
margin-bottom: var(--spacing);
border: var(--line-width) solid var(--phase-color);
margin-top: var(--image-margin-top);
}
.aeip-block-homepage-approach .phase-image img {
width: 70%;
aspect-ratio: 1/1;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
}
.aeip-block-homepage-approach .phase-image:before {
content: attr(data-index);
position: absolute;
border: var(--border-width) solid var(--phase-color);
font-size: var(--font-size);
line-height: 1;
font-weight: bold;
display: flex;
justify-content: center;
padding: var(--padding);
width: var(--box-width);
aspect-ratio: 1/1;
background-color: var(--aeip-color-blue);
color: white;
top: 0;
left: 0;
border-radius: 50%;
translate: var(--before-tag-shift) var(--before-tag-shift);
}
.aeip-block-homepage-approach #phase-image-1 {
--phase-color: var(--phase-1-color);
}
.aeip-block-homepage-approach #phase-image-1 img {
width: 80%;
}
.aeip-block-homepage-approach #phase-image-2 {
--phase-color: var(--phase-2-color);
}
.aeip-block-homepage-approach #phase-image-2::before {
left: revert;
right: 0;
translate: calc(-1 * var(--before-tag-shift)) var(--before-tag-shift);
}
.aeip-block-homepage-approach #phase-image-3 {
--phase-color: var(--phase-3-color);
}
.aeip-block-homepage-approach .phase-title {
text-align: center;
font-weight: bold;
margin-bottom: var(--spacing);
}
.aeip-block-homepage-approach .phase-description {
text-align: center;
margin-bottom: var(--spacing);
}
.aeip-block-homepage-approach .lines .line {
display: none;
--tile-size: 60px;
}
.aeip-block-homepage-approach .lines .line-1 {
display: block;
height: clamp(100px, 15vh, 200px);
width: var(--decorator-line-width);
border-radius: var(--decorator-line-width);
}
.aeip-block-homepage-approach #lines-3 {
display: none;
}
@media screen and (min-width: 768px) {
.aeip-block-homepage-approach {
--image-width: 135px;
--image2-width: 180px;
padding-inline: 40px;
--text-padding: 1em;
}
.aeip-block-homepage-approach .phase-container {
grid-template-columns: [t1-start d1-start] auto [t1-end d1-end reg1-start i1-start t2-start t3-start d2-start d3-start] var(--image-width) [i1-end] auto [t2-end d2-end i2-start reg2-start] auto [i2-end reg1-end] auto [t3-end d3-end i3-start reg3-start] auto [i3-end reg2-end reg3-end];
grid-template-rows: [i2-start t2-start reg1-start reg2-start] auto [t2-end d2-start] 1fr [d2-end i2-end i1-start t1-start] auto [t1-end d1-start] 1fr [d1-end i1-end reg1-end t3-start i3-start reg3-start] auto [t3-end d3-start] auto [d3-end i3-end reg2-end reg3-end];
justify-content: revert;
}
.aeip-block-homepage-approach .phase-image {
margin-bottom: 0;
}
.aeip-block-homepage-approach #phase-image-1 {
grid-column: i1;
grid-row: i1;
}
.aeip-block-homepage-approach #phase-image-2 {
grid-column: i2;
grid-row: i2;
width: var(--image2-width);
}
.aeip-block-homepage-approach #phase-image-2::before {
left: 0;
right: revert;
translate: var(--before-tag-shift) var(--before-tag-shift);
}
.aeip-block-homepage-approach #phase-image-3 {
grid-column: i3;
grid-row: i3;
margin-right: var(--image-margin-top);
}
.aeip-block-homepage-approach #phase-image-3::before {
left: revert;
right: 0;
translate: calc(-1 * var(--before-tag-shift)) var(--before-tag-shift);
}
.aeip-block-homepage-approach .phase-title,
.aeip-block-homepage-approach .phase-description {
text-align: right;
justify-self: end;
max-width: min(50vw, 400px);
padding-right: var(--text-padding);
margin-bottom: 0;
line-height: 1.2;
}
.aeip-block-homepage-approach .phase-title {
align-self: end;
margin-bottom: 6px;
}
.aeip-block-homepage-approach .phase-description {
align-self: start;
}
.aeip-block-homepage-approach #phase-title-1 {
grid-row: t1;
grid-column: t1;
margin-top: calc(0.5em + var(--box-width));
}
.aeip-block-homepage-approach #phase-title-2 {
grid-row: t2;
grid-column: t2;
margin-top: var(--box-width);
}
.aeip-block-homepage-approach #phase-title-3 {
grid-row: t3;
grid-column: t3;
}
.aeip-block-homepage-approach #phase-description-1 {
grid-row: d1;
grid-column: d1;
}
.aeip-block-homepage-approach #phase-description-2 {
grid-row: d2;
grid-column: d2;
}
.aeip-block-homepage-approach #phase-description-3 {
grid-row: d3;
grid-column: d3;
}
.aeip-block-homepage-approach .lines {
align-self: stretch;
justify-self: stretch;
}
.aeip-block-homepage-approach .lines .line {
height: auto;
width: auto;
border-radius: 0;
}
.aeip-block-homepage-approach #lines-1 {
grid-column: reg1;
grid-row: reg1;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
.aeip-block-homepage-approach #lines-1 .line-1 {
grid-row: 3;
grid-column: 1/-1;
height: var(--decorator-line-width);
margin-top: calc(0.5 * var(--image-width) + var(--image-margin-top) - 0.5 * var(--decorator-line-width));
margin-left: calc(0.5 * var(--image-width));
margin-right: calc(0.5 * var(--image2-width));
}
.aeip-block-homepage-approach #lines-1 .line-2 {
display: block;
grid-row: 1/span 2;
grid-column: -1;
width: var(--decorator-line-width);
align-self: stretch;
justify-self: center;
margin-top: calc(0.5 * var(--image2-width));
margin-bottom: calc(-0.5 * var(--image-width) - var(--image-margin-top) - 0.5 * var(--decorator-line-width));
border-bottom-right-radius: calc(0.5 * var(--decorator-line-width));
}
.aeip-block-homepage-approach #lines-2 {
grid-column: reg2;
grid-row: reg2;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
--r: 0.2;
}
.aeip-block-homepage-approach #lines-2 .line-1 {
grid-row: 1/span 2;
grid-column: 1/span 3;
height: var(--decorator-line-width);
align-self: end;
margin-bottom: calc(var(--r) * var(--image2-width));
margin-left: calc(0.5 * var(--image2-width));
border-radius: 0 calc(0.5 * var(--decorator-line-width)) 0 0;
}
.aeip-block-homepage-approach #lines-2 .line-2 {
display: block;
grid-row: 2;
grid-column: 3;
height: calc(var(--r) * var(--image2-width));
width: var(--decorator-line-width);
align-self: end;
justify-self: end;
}
.aeip-block-homepage-approach #lines-2 .line-3 {
display: block;
grid-row: 3;
grid-column: 3;
width: calc(0.5 * var(--image-width) + var(--image-margin-top) - 0.5 * var(--decorator-line-width));
height: var(--decorator-line-width);
align-self: start;
justify-self: end;
border-bottom-right-radius: calc(0.5 * var(--decorator-line-width));
}
.aeip-block-homepage-approach #lines-2 .line-4 {
display: block;
grid-row: 3/span 3;
grid-column: 3;
width: var(--decorator-line-width);
align-self: stretch;
justify-self: center;
border-top-left-radius: calc(0.5 * var(--decorator-line-width));
margin-right: var(--image-margin-top);
}
.aeip-block-homepage-approach #lines-3 {
grid-column: reg3;
grid-row: reg3;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
.aeip-block-homepage-approach #lines-3 .line-1 {
grid-column: 1;
grid-row: 1/-1;
justify-self: center;
margin-top: calc(var(--image-width) + var(--image-margin-top) - 0.5 * var(--decorator-line-width));
width: var(--decorator-line-width);
height: 100px;
border-radius: 0 0 var(--decorator-line-width) var(--decorator-line-width);
margin-right: var(--image-margin-top);
}
}
@media screen and (min-width: 1200px) {
.aeip-block-homepage-approach {
--shift: clamp(20px, calc(0.02 * min(var(--aeip-content-max-width, 1440px), 100vw)), 50px);
}
.aeip-block-homepage-approach .phase-container {
width: 100%;
max-width: 1250px;
margin-inline: auto;
grid-template-columns: [t1-start d1-start t2-start d2-start] auto [t1-end d1-end reg1-start i1-start] var(--image-width) [i1-end] 1fr [t2-end d2-end i2-start reg2-start] auto [i2-end reg1-end] 1fr [i3-start reg3-start] calc(var(--image-width) + var(--image-margin-top)) [i3-end reg2-end wrapper3-start] auto [wrapper3-end reg3-end];
grid-template-rows: [i2-start t2-start reg1-start reg2-start] auto [wrapper3-start] auto [t2-end d2-start d3-start] 1fr [d2-end i2-end i1-start t1-start i3-start reg3-start] calc(var(--image-width) + var(--image-margin-top)) [t1-end d1-start wrapper3-end reg1-end reg3-end reg2-end] auto [d1-end i1-end i3-end];
}
.aeip-block-homepage-approach .phase-title,
.aeip-block-homepage-approach .phase-description {
max-width: 300px;
}
.aeip-block-homepage-approach #phase-title-3,
.aeip-block-homepage-approach #phase-description-3 {
padding-right: 0;
padding-left: var(--text-padding);
text-align: left;
justify-self: start;
align-self: start;
}
.aeip-block-homepage-approach #phase-title-3 {
margin-top: auto;
}
.aeip-block-homepage-approach #phase-description-3 {
margin-bottom: calc(0.5 * var(--image-width) + 2rem);
}
.aeip-block-homepage-approach #wrapper-3 {
display: flex;
flex-direction: column;
grid-column: wrapper3;
grid-row: wrapper3;
}
.aeip-block-homepage-approach #lines-1 .line-1 {
grid-row: -1;
}
.aeip-block-homepage-approach #lines-1 .line-2 {
grid-row: 1/-1;
margin-bottom: calc(0.5 * var(--image-width) - 0.5 * var(--decorator-line-width));
}
.aeip-block-homepage-approach #lines-2 .line-1 {
grid-column: 1/-2;
margin-bottom: 0;
grid-row: 1;
position: relative;
top: calc(var(--image-margin-top) + 0.75 * var(--image2-width));
margin-right: var(--shift);
}
.aeip-block-homepage-approach #lines-2 .line-2 {
grid-column: 2;
grid-row: 3;
align-self: end;
height: calc(0.25 * var(--image2-width));
border-radius: 0 calc(0.5 * var(--decorator-line-width)) 0 0;
margin-right: var(--shift);
margin-left: 20px;
}
.aeip-block-homepage-approach #lines-2 .line-3 {
grid-row: 4;
grid-column: 2;
justify-self: stretch;
width: auto;
margin-right: var(--shift);
border-radius: calc(0.5 * var(--decorator-line-width)) 0 calc(0.5 * var(--decorator-line-width)) 0;
}
.aeip-block-homepage-approach #lines-2 .line-4 {
grid-row: -1;
grid-column: 2;
align-self: stretch;
justify-self: start;
border-radius: calc(0.5 * var(--decorator-line-width)) 0 0 calc(0.5 * var(--decorator-line-width));
margin-bottom: calc(0.5 * var(--image-width));
}
.aeip-block-homepage-approach #lines-2 .line-5 {
display: block;
grid-row: -1;
grid-column: 2/-1;
align-self: end;
margin-bottom: calc(0.5 * var(--image-width) - 0.5 * var(--decorator-line-width));
margin-right: calc(0.5 * var(--image-width));
border-radius: 0 0 0 calc(0.5 * var(--decorator-line-width));
height: var(--decorator-line-width);
}
.aeip-block-homepage-approach #lines-3 .line-1 {
grid-row: 1;
grid-column: 1/-1;
justify-self: revert;
align-self: end;
margin-top: revert;
margin-bottom: calc(0.5 * var(--image-width) - 0.5 * var(--decorator-line-width));
width: auto;
height: var(--decorator-line-width);
border-radius: 0 calc(0.5 * var(--decorator-line-width)) calc(0.5 * var(--decorator-line-width)) 0;
margin-left: calc(0.5 * var(--image-width));
margin-right: 3rem;
}
}.aeip-block-homepage-sustainability {
margin-inline: calc(-1 * var(--aeip-content-padding));
padding-inline: var(--aeip-content-padding);
padding-block: 40px;
color: var(--aeip-color-green);
--image-width: 125px;
--line-width: 18px;
--checkmark-size: 40px;
--shift: 0.2;
--shift-size: calc(var(--checkmark-size) * var(--shift));
}
.aeip-block-homepage-sustainability:not(:last-child) {
margin-bottom: var(--aeip-section-bottom-margin);
}
.aeip-block-homepage-sustainability h2.title {
max-width: min(65%, 500px);
margin-inline: auto;
}
.aeip-block-homepage-sustainability .introduction {
max-width: min(85%, 800px);
margin-inline: auto;
margin-bottom: 1em;
}
.aeip-block-homepage-sustainability .text-1 {
color: var(--aeip-color-blue);
text-align: center;
margin-bottom: 1.5em;
max-width: min(85%, 800px);
margin-inline: auto;
}
.aeip-block-homepage-sustainability .text-2 {
max-width: min(85%, 800px);
margin-inline: auto;
}
.aeip-block-homepage-sustainability .actions {
margin-bottom: 32px;
display: grid;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: clamp(80px, 12vh, 160px);
grid-template-columns: [image-start] calc(var(--image-width) + 2 * var(--shift-size)) [image-end text-start] auto [text-end];
grid-template-rows: [i1-start] auto [i1-end i2-start] auto [i2-end i3-start] auto [i3-end];
grid-auto-flow: dense;
justify-content: center;
align-items: center;
margin-inline: auto;
}
.aeip-block-homepage-sustainability .action-image {
grid-column: image;
aspect-ratio: 1/1;
height: auto;
background-color: var(--aeip-color-green, #006239);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
margin-inline: var(--shift-size);
margin-top: var(--shift-size);
width: var(--image-width);
}
.aeip-block-homepage-sustainability .action-image img {
width: 60%;
aspect-ratio: 1/1;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
}
.aeip-block-homepage-sustainability .action-image .checkmark {
width: 40px;
aspect-ratio: 1/1;
height: auto;
background-image: url('data:image/svg+xml;utf8,<svg width="42" height="41" viewBox="0 0 42 41" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.278 1c7.43 0 13.9 4.165 17.195 10.29l.309.599c1.286 2.592 1.996 5.514 1.996 8.617 0 2.684-.545 5.258-1.526 7.59-2.422 5.699-7.466 10.013-13.63 11.418l-.601.126h-.005c-1.193.24-2.458.36-3.738.36-4.6 0-8.817-1.587-12.14-4.244l-.32-.26h-.001l-.399-.342c-4.071-3.576-6.64-8.816-6.64-14.648C1.778 9.738 10.508 1 21.278 1Z" fill="%231C4791" stroke="%23FABC0C" stroke-width="2"/><path d="m14.778 20 6.5 8 7.5-16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
background-size: contain;
background-position: center;
background-repeat: repeat;
position: absolute;
top: 0;
left: 0;
margin-left: calc(-1 * var(--shift-size));
margin-top: calc(-1 * var(--shift-size));
}
.aeip-block-homepage-sustainability #action-image-1 {
grid-row: i1;
}
.aeip-block-homepage-sustainability #action-image-2 {
grid-row: i2;
}
.aeip-block-homepage-sustainability #action-image-3 {
grid-row: i3;
}
.aeip-block-homepage-sustainability #action-image-3 img {
width: 80%;
}
.aeip-block-homepage-sustainability .action-text {
grid-column: text;
max-width: 200px;
line-height: 1.2;
text-align: left;
font-weight: bold;
}
.aeip-block-homepage-sustainability .lines {
--tile-size: 50px;
background-position: 25px;
grid-column: image;
grid-row: 1/-1;
width: var(--line-width);
position: relative;
z-index: 1;
justify-self: center;
align-self: stretch;
margin-block: calc(0.5 * var(--image-width));
}
@media screen and (min-width: 768px) {
.aeip-block-homepage-sustainability .actions {
max-width: 800px;
margin-inline: auto;
grid-template-columns: repeat(3, minmax(calc(var(--image-width) + 2 * var(--shift-size)), 225px));
grid-template-rows: auto 1fr;
row-gap: 16px;
justify-content: space-between;
}
.aeip-block-homepage-sustainability .action-image {
justify-self: center;
}
.aeip-block-homepage-sustainability #action-image-1 {
grid-column: 1;
grid-row: 1;
}
.aeip-block-homepage-sustainability #action-image-2 {
grid-column: 2;
grid-row: 1;
}
.aeip-block-homepage-sustainability #action-image-3 {
grid-column: 3;
grid-row: 1;
}
.aeip-block-homepage-sustainability .action-text {
text-align: center;
align-self: start;
}
.aeip-block-homepage-sustainability #action-text-1 {
grid-column: 1;
grid-row: 2;
}
.aeip-block-homepage-sustainability #action-text-2 {
grid-column: 2;
grid-row: 2;
}
.aeip-block-homepage-sustainability #action-text-3 {
grid-column: 3;
grid-row: 2;
}
.aeip-block-homepage-sustainability .lines {
grid-column: 1/-1;
grid-row: 1;
margin-block: 0;
margin-inline: calc(0.5 * var(--image-width));
height: var(--line-width);
width: auto;
justify-self: stretch;
align-self: center;
}
}
@media screen and (min-width: 1200px) {
.aeip-block-homepage-sustainability .content-wrapper {
display: grid;
grid-template-columns: 4fr 6fr;
-moz-column-gap: 40px;
column-gap: 40px;
align-items: center;
}
.aeip-block-homepage-sustainability .title,
.aeip-block-homepage-sustainability .introduction {
grid-column: 1/-1;
}
.aeip-block-homepage-sustainability .text-1 {
justify-self: end;
margin-inline: 0;
}
.aeip-block-homepage-sustainability .introduction {
margin-bottom: 40px;
}
.aeip-block-homepage-sustainability .text-2 {
grid-column: 2;
max-width: 100%;
}
}