.aeip-block-homepage-approach:not(:last-child) {
margin-bottom: var(--aeip-section-bottom-margin);
}
.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);
}
.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 {
--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 .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;
}
.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 {
--text-padding: 1em;
}
.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 .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 {
--shift: clamp(20px, calc(0.02 * min(var(--aeip-content-max-width, 1440px), 100vw)), 50px);
}
.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;
}
}