Design break issue in the Five for the Future page

[patelhitesh]

Please check the below URL:
​https://wordpress.org/five-for-the-future/

When we inspect the page and set the width to 768px then the content formatting not looks good and has margin and padding issues. For more details, please check the attached screenshot.

[patelhitesh]

Design break issue in the Five for the Future page

[patelhitesh]

To overcome the design break issue in Five for the Future page, please find the below CSS:
.wp-block-columns {

align-items: normal!important;
box-sizing: border-box;
display: flex;
width: 500px;
flex-wrap: wrap!important;
margin-bottom: 1.75em;

}
@media screen and (min-width: 768px)
.is-style-wporg-parallelogram .wp-block-column:first-child {

position: relative;
top: 60px;
left: 175px;
z-index: 2;
padding-right: 60px;

}
@media screen and (min-width: 768px)
.is-style-wporg-parallelogram .wp-block-column:last-child {

position: relative;
z-index: 1;
right: -35px;
padding-left: 60px;

}