.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;
  }
}/*# sourceMappingURL=homepage-approach.css.map */