.four_boxes {
    margin: calc(var(--gutter_big)) 0;
}

:is(.section,.add_header) > .wrapper > .four_boxes:first-child { margin-top: 0; }
:is(.section,.add_header) > .wrapper > .four_boxes:last-child { margin-bottom: 0; }


.image_and_text figure { }
.image_and_text figure picture { }
.image_and_text figure picture { }


.image_and_text figure img{ width: 100%; height: auto; display: block;
    position: static; transform: none; }


.boxes { display: flex; flex-wrap: wrap; width: calc(var(--gutter) + 100%);
    position: relative; right:calc(var(--gutter) / 2);  margin-top: var(--gutter);  }

.boxes>div { background-color: var(--green); margin:calc(var(--gutter) / 2);
    width: calc(50% - var(--gutter)); border-radius: var(--radius); padding: var(--padding);
    display: flex; flex-direction: column;
    position: relative;
}

.boxes>div h3 { font-size: 20px;  font-family:"IBM Plex Sans"; line-height: 1.2; margin-bottom:0.5em; font-weight:700;}
.boxes>div p { font-size: 16px; line-height: 1.5; margin-bottom:0; font-weight:400;}
.boxes>div .icon { order: -1;  font-family: var(--headingfont);  font-size: 80px; line-height: 0.8; margin-bottom:var(--padding); font-weight: 700;}
.boxes>div .icon:has(img) { height: 64px; }
.boxes>div .icon img { height: 64px; display: block; }

.boxes>div:has(picture) { padding: 0; overflow: hidden}
.boxes>div picture { width: var(--overflow);  height: var(--overflow); left: 50%; top: 50%; transform: translate(-50%,-50%); }

@media all and (max-width: 599.98px) {
    .boxes>div {
        width: calc(100% - var(--gutter));
    }
}

@media all and (min-width:1200px) {
    .four_boxes {


        display: flex; justify-content: space-between; align-items: flex-start;
    }

    .four_boxes div.textcontent {
        max-width: 999px;
        margin: 0 auto 0 0;
    }

    .four_boxes > div

    {
        width: calc(50% - (var(--gutter_big) / 2));

    }

    .boxes {  margin-top: 0;  }

}