.aeip-block-homepage-objectives {
width: min(100vw, var(--aeip-content-max-width));
margin-inline: calc(-1 * var(--aeip-content-padding));
padding-block: 40px;
color: white;
font-size: 1.25rem;
font-weight: bold;
--line-width: 8px;
--image-width: clamp(100px, 40%, 140px);
--line-radius: calc(1 / 2 * var(--line-width));
background-color: var(--aeip-color-green-lighter, #97c95c);
}
.aeip-block-homepage-objectives h2 {
margin-bottom: 40px;
}
.aeip-block-homepage-objectives .objective-container {
display: grid;
padding-inline: 40px;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
grid-template-columns: [image-start] var(--image-width) [image-end text-start] auto [text-end];
justify-content: center;
align-items: center;
margin-inline: auto;
}
.aeip-block-homepage-objectives .objective-image {
grid-column: image;
width: 100%;
aspect-ratio: 1/1;
height: auto;
background-color: var(--aeip-color-blue, #1c4791);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.aeip-block-homepage-objectives .objective-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-objectives .objective-text {
grid-column: text;
max-width: 15ch;
line-height: 1.2;
}
.aeip-block-homepage-objectives .lines {
grid-column: image;
justify-self: center;
}
.aeip-block-homepage-objectives .line {
background-color: white;
}
.aeip-block-homepage-objectives .line-1 {
width: var(--line-width);
height: clamp(50px, 10vh, 80px);
}
.aeip-block-homepage-objectives .line-4,
.aeip-block-homepage-objectives .line-5 {
display: none;
}
@media screen and (min-width: 768px) {
.aeip-block-homepage-objectives {
--line-height: clamp(22px, 5vh, 40px);
--image-width: clamp(100px, 40vw, 140px);
}
.aeip-block-homepage-objectives .objective-container {
grid-template-columns: var(--image-width) 1fr var(--image-width);
max-width: 65%;
grid-auto-flow: row dense;
}
.aeip-block-homepage-objectives #objective-image-1,
.aeip-block-homepage-objectives #objective-image-3,
.aeip-block-homepage-objectives #objective-image-5 {
grid-column: 1;
}
.aeip-block-homepage-objectives #objective-image-2,
.aeip-block-homepage-objectives #objective-image-4 {
grid-column: 3;
}
.aeip-block-homepage-objectives #objective-text-1,
.aeip-block-homepage-objectives #objective-text-3,
.aeip-block-homepage-objectives #objective-text-5 {
grid-column: 2/span 2;
}
.aeip-block-homepage-objectives #objective-text-2,
.aeip-block-homepage-objectives #objective-text-4 {
grid-column: 1/span 2;
text-align: right;
}
.aeip-block-homepage-objectives .objective-text {
max-width: 250px;
}
.aeip-block-homepage-objectives .lines {
grid-column: 1/-1;
justify-self: revert;
display: grid;
grid-template-columns: var(--line-width) 1fr var(--line-width);
width: calc(100% - var(--image-width));
height: calc(2 * var(--line-height) + var(--line-width));
justify-self: center;
}
.aeip-block-homepage-objectives .line-1 {
height: var(--line-height);
align-self: start;
}
.aeip-block-homepage-objectives .line-2 {
grid-column: 1/-1;
height: var(--line-width);
border-bottom-left-radius: var(--line-radius);
border-top-right-radius: var(--line-radius);
}
.aeip-block-homepage-objectives .line-3 {
grid-column: 3;
width: 100%;
align-self: end;
height: var(--line-height);
}
.aeip-block-homepage-objectives #lines-2 .line-1,
.aeip-block-homepage-objectives #lines-4 .line-1 {
grid-column: 3;
}
.aeip-block-homepage-objectives #lines-2 .line-2,
.aeip-block-homepage-objectives #lines-4 .line-2 {
border-radius: var(--line-radius) 0 var(--line-radius) 0;
}
.aeip-block-homepage-objectives #lines-2 .line-3,
.aeip-block-homepage-objectives #lines-4 .line-3 {
grid-column: 1;
}
}
@media screen and (min-width: 992px) {
.aeip-block-homepage-objectives {
--image-width: 140px;
}
.aeip-block-homepage-objectives .objective-container {
width: 100%;
max-width: 100%;
row-gap: 8px;
-moz-column-gap: 0;
column-gap: 0;
grid-template-columns: [reg1-start i1-start t1-start] var(--image-width) [t1-end i1-end] minmax(52px, 1fr) var(--line-width) 1fr [i2-start t2-start t3-start] auto [reg1-end reg2-start] auto [t3-end t2-end i2-end i3-start reg3-start] var(--image-width) [i3-end reg2-end] 1fr [i4-start t4-start reg4-start] var(--image-width) [t4-end i4-end i5-start reg3-end] var(--image-width) [i5-end t5-start reg4-end] auto [t5-end];
}
.aeip-block-homepage-objectives .objective-image {
width: var(--image-width);
position: relative;
z-index: 10;
}
.aeip-block-homepage-objectives #objective-image-1 {
grid-row: 1;
grid-column: i1;
}
.aeip-block-homepage-objectives #objective-text-1 {
grid-row: 2;
grid-column: t1;
text-align: center;
margin-bottom: 1em;
}
.aeip-block-homepage-objectives #objective-image-2 {
grid-row: 3;
grid-column: i2;
justify-self: center;
}
.aeip-block-homepage-objectives #objective-text-2 {
grid-row: 4;
grid-column: t2;
text-align: center;
justify-self: center;
}
.aeip-block-homepage-objectives #objective-image-3 {
grid-row: 1;
grid-column: i3;
}
.aeip-block-homepage-objectives #objective-text-3 {
grid-row: 1;
grid-column: t3;
text-align: right;
text-wrap: balance;
padding-inline: 24px;
}
.aeip-block-homepage-objectives #objective-image-4 {
grid-row: 3;
grid-column: i4;
}
.aeip-block-homepage-objectives #objective-text-4 {
grid-row: 4;
grid-column: t4;
text-align: center;
}
.aeip-block-homepage-objectives #objective-image-5 {
grid-row: 1;
grid-column: i5;
}
.aeip-block-homepage-objectives #objective-text-5 {
grid-row: 1;
grid-column: t5;
padding-left: 1em;
}
.aeip-block-homepage-objectives .lines {
width: auto;
height: auto;
justify-self: revert;
display: block;
align-self: stretch;
position: relative;
z-index: 1;
grid-row: 1/span 3;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: var(--image-width) auto var(--image-width);
}
.aeip-block-homepage-objectives #lines-1 {
grid-column: reg1;
}
.aeip-block-homepage-objectives #lines-1 .line-1 {
height: var(--line-width);
align-self: center;
grid-row: 1;
grid-column: 1/span 3;
width: calc(100% - 0.5 * var(--image-width));
margin-left: calc(0.5 * var(--image-width));
border-radius: 0 var(--line-radius) 0 0;
}
.aeip-block-homepage-objectives #lines-1 .line-2 {
grid-row: 1/-1;
grid-column: 3;
width: var(--line-width);
height: auto;
margin-block: calc(0.5 * var(--image-width) - 0.5 * var(--line-width));
justify-self: center;
border-radius: 0 var(--line-radius) 0 var(--line-radius);
}
.aeip-block-homepage-objectives #lines-1 .line-3 {
height: var(--line-width);
align-self: center;
grid-row: 3;
grid-column: 3/-1;
width: calc(100% - 0.5 * var(--image-width));
border-radius: 0 0 0 var(--line-radius);
}
.aeip-block-homepage-objectives #lines-2 {
grid-column: reg2;
}
.aeip-block-homepage-objectives #lines-2 .line-1 {
height: var(--line-width);
align-self: center;
grid-row: 3;
grid-column: 1/-1;
width: calc(100% - 0.5 * var(--image-width));
margin-right: calc(0.5 * var(--image-width));
}
.aeip-block-homepage-objectives #lines-2 .line-2 {
grid-row: 1/-1;
grid-column: 2;
width: var(--line-width);
height: auto;
margin-block: calc(0.5 * var(--image-width) - 0.5 * var(--line-width));
justify-self: center;
}
.aeip-block-homepage-objectives #lines-2 .line-3 {
display: none;
}
.aeip-block-homepage-objectives #lines-3 {
grid-column: reg3;
}
.aeip-block-homepage-objectives #lines-3 .line-1 {
height: var(--line-width);
align-self: center;
grid-row: 1;
grid-column: 1/-1;
width: calc(100% - 0.5 * var(--image-width));
margin-right: calc(0.5 * var(--image-width));
}
.aeip-block-homepage-objectives #lines-3 .line-2 {
grid-row: 1/-1;
grid-column: -1;
width: var(--line-width);
height: auto;
margin-block: calc(0.5 * var(--image-width) - 0.5 * var(--line-width));
justify-self: center;
}
.aeip-block-homepage-objectives #lines-3 .line-3 {
display: none;
}
.aeip-block-homepage-objectives #lines-4 {
grid-column: reg4;
}
.aeip-block-homepage-objectives #lines-4 .line-1 {
height: var(--line-width);
align-self: center;
grid-row: 3;
grid-column: 1/-1;
width: calc(100% - 0.5 * var(--image-width));
margin-right: calc(0.5 * var(--image-width));
}
.aeip-block-homepage-objectives #lines-4 .line-2 {
grid-row: 1/-1;
grid-column: -1;
width: var(--line-width);
height: auto;
margin-block: calc(0.5 * var(--image-width) - 0.5 * var(--line-width));
justify-self: center;
}
.aeip-block-homepage-objectives #lines-4 .line-3 {
display: none;
}
.aeip-block-homepage-objectives #lines-5 {
display: none;
}
}
@media screen and (min-width: 1200px) {
.aeip-block-homepage-objectives .objective-container {
grid-template-columns: [reg1-start i1-start] var(--image-width) [i1-end t1-start] 1fr [t2-start] auto [i2-start reg2-start] var(--image-width) [i2-end t1-end reg1-end] auto [t2-end] 1fr [i3-start reg3-start] var(--image-width) [i3-end reg2-end t3-start] 1fr [t4-start] 1fr [i4-start reg4-start] var(--image-width) [t3-end i4-end reg3-end] 1fr [t4-end i5-start] var(--image-width) [i5-end t5-start reg4-end] auto [t5-end];
}
.aeip-block-homepage-objectives .objective-text {
padding-inline: 16px;
}
.aeip-block-homepage-objectives #objective-text-1 {
grid-row: 1;
margin-bottom: 0;
text-align: left;
}
.aeip-block-homepage-objectives #objective-image-2 {
grid-row: 2;
}
.aeip-block-homepage-objectives #objective-text-2 {
grid-row: 3;
}
.aeip-block-homepage-objectives #objective-text-3 {
text-align: left;
padding-left: 16px;
}
.aeip-block-homepage-objectives #objective-image-4 {
align-self: center;
grid-row: 2;
}
.aeip-block-homepage-objectives #objective-text-4 {
grid-row: 3;
margin-inline: auto;
}
.aeip-block-homepage-objectives .lines {
grid-row: 1/span 2;
}
.aeip-block-homepage-objectives #lines-1 .line-1 {
grid-row: 3;
}
.aeip-block-homepage-objectives #lines-1 .line-2 {
grid-column: 1;
}
.aeip-block-homepage-objectives #lines-1 .line-3 {
display: none;
}
.aeip-block-homepage-objectives #lines-2 {
grid-template-columns: var(--image-width) 1fr var(--line-width) 1fr var(--line-width) 1fr var(--image-width);
grid-template-rows: var(--image-width) auto var(--line-width) auto var(--image-width);
}
.aeip-block-homepage-objectives #lines-2 .line-1 {
grid-row: 5;
grid-column: 2/span 4;
margin-right: revert;
align-self: center;
width: auto;
border-radius: 0 0 var(--line-radius) 0;
}
.aeip-block-homepage-objectives #lines-2 .line-2 {
grid-row: 3;
grid-column: 3/span 3;
width: auto;
margin-block: revert;
justify-self: revert;
border-radius: 0 var(--line-radius) 0 var(--line-radius);
}
.aeip-block-homepage-objectives #lines-2 .line-3 {
display: block;
grid-row: 1;
grid-column: 3/span 4;
height: var(--line-width);
width: auto;
align-self: center;
border-radius: var(--line-radius) 0 0 0;
}
.aeip-block-homepage-objectives #lines-2 .line-4 {
display: block;
grid-row: 1/span 3;
grid-column: 3;
margin-top: calc(0.5 * var(--image-width));
border-radius: 0 0 0 var(--line-radius);
}
.aeip-block-homepage-objectives #lines-2 .line-5 {
display: block;
grid-row: 3/span 3;
grid-column: 5;
margin-bottom: calc(0.5 * var(--image-width));
border-radius: 0 var(--line-radius) 0 0;
}
.aeip-block-homepage-objectives #lines-3 .line-1 {
grid-row: 3;
margin-left: calc(0.5 * var(--image-width));
}
.aeip-block-homepage-objectives #lines-3 .line-2 {
grid-column: 1;
}
}.aeip-block-homepage-target {
margin-inline: calc(-1 * var(--aeip-content-padding, 0));
padding-inline: var(--aeip-content-padding, 40px);
padding-block: 40px;
color: white;
font-size: 1.25rem;
font-weight: bold;
--line-width: 8px;
--image-width: 125px;
background-color: var(--aeip-color-blue-ultraLight, #1cb2f5);
}
.aeip-block-homepage-target h2 {
margin-bottom: 0;
}
.aeip-block-homepage-target .introduction {
font-weight: bold;
margin-top: 1.5em;
}
.aeip-block-homepage-target .target-container {
display: grid;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: clamp(40px, 6vh, 80px);
grid-template-columns: [header-start] auto [text-start] auto [text-end image-start] var(--image-width) [image-end] auto [header-end];
grid-template-rows: [header-start] auto [header-end lines-start i1-start] auto [i1-end i2-start] auto [i2-end i3-start] auto [i3-end i4-start] auto [i4-end i5-start] auto [i5-end i6-start] auto [i6-end lines-end];
grid-auto-flow: dense;
justify-content: center;
align-items: center;
margin-inline: auto;
}
.aeip-block-homepage-target header {
grid-row: header;
grid-column: header;
}
.aeip-block-homepage-target .target-image {
grid-column: image;
width: 100%;
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;
}
.aeip-block-homepage-target .target-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-target #target-image-1 {
grid-row: i1;
}
.aeip-block-homepage-target #target-image-2 {
grid-row: i2;
}
.aeip-block-homepage-target #target-image-3 {
grid-row: i3;
}
.aeip-block-homepage-target #target-image-4 {
grid-row: i4;
}
.aeip-block-homepage-target #target-image-5 {
grid-row: i5;
}
.aeip-block-homepage-target #target-image-6 {
grid-row: i6;
}
.aeip-block-homepage-target .target-text {
grid-column: text;
max-width: 15ch;
line-height: 1.2;
text-align: right;
}
.aeip-block-homepage-target .lines {
--line-width: 8px;
grid-column: image;
grid-row: lines;
background-color: white;
width: var(--line-width);
position: relative;
z-index: 1;
justify-self: center;
align-self: stretch;
margin-block: var(--image-width);
}
@media screen and (min-width: 992px) {
.aeip-block-homepage-target {
padding-block: var(--aeip-content-padding, 60px);
padding-inline: 20px;
}
.aeip-block-homepage-target .target-container {
max-width: 1080px;
grid-template-columns: [t6-start t5-start] auto [t6-end t5-end i5-start i6-start lines-start] var(--image-width) [i5-end i6-end header-start] 1fr [t1-start t4-start] auto [i1-start i4-start] var(--image-width) [i1-end i4-end] auto [t1-end t4-end] 1fr [i2-start i3-start header-end] var(--image-width) [i2-end i3-end t2-start t3-start lines-end] auto [t2-end t3-end];
grid-template-rows: [lines-start i1-start] var(--image-width) [i1-end t1-start i6-start i2-start] var(--image-width) [i6-end i2-end] auto [t1-end header-start] auto [header-end t4-start] auto [i5-start i3-start] var(--image-width) [i5-end i3-end t4-end i4-start] var(--image-width) [i4-end lines-end];
gap: 0;
}
.aeip-block-homepage-target #target-text-1 {
grid-column: t1;
grid-row: t1;
text-align: center;
align-self: start;
padding-top: 0.5em;
}
.aeip-block-homepage-target #target-text-2 {
grid-column: t2;
grid-row: i2;
text-align: left;
padding-left: 1em;
}
.aeip-block-homepage-target #target-text-3 {
grid-column: t3;
grid-row: i3;
text-align: left;
padding-left: 1em;
}
.aeip-block-homepage-target #target-text-4 {
grid-column: t4;
grid-row: t4;
text-align: center;
align-self: end;
padding-bottom: 1em;
}
.aeip-block-homepage-target #target-text-5 {
grid-column: t5;
grid-row: i5;
text-align: right;
padding-right: 1em;
}
.aeip-block-homepage-target #target-text-6 {
grid-column: t6;
grid-row: i6;
text-align: right;
padding-right: 0.5em;
}
.aeip-block-homepage-target #target-image-1 {
grid-row: i1;
grid-column: i1;
}
.aeip-block-homepage-target #target-image-2 {
grid-row: i2;
grid-column: i2;
}
.aeip-block-homepage-target #target-image-3 {
grid-row: i3;
grid-column: i3;
}
.aeip-block-homepage-target #target-image-4 {
grid-row: i4;
grid-column: i4;
}
.aeip-block-homepage-target #target-image-5 {
grid-row: i5;
grid-column: i5;
}
.aeip-block-homepage-target #target-image-6 {
grid-row: i6;
grid-column: i6;
}
.aeip-block-homepage-target .lines {
grid-row: lines;
grid-column: lines;
width: auto;
background: transparent;
border: var(--line-width) solid white;
margin: calc(0.2 * var(--image-width));
margin-bottom: calc(0.5 * var(--image-width));
border-radius: 50%;
justify-self: revert;
}
}