Click here to add your own text Click here to
Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text
Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text
/* === color-section with these 3 columns (only - no other elements are in ) === */
/* === use a custom-class on that color-section - i used here flex-1-1-2 === */
#top .avia-section.flex-1-1-2 .entry-content-wrapper {
display: flex;
flex-flow: row wrap;
gap: 20px;
justify-content: center;
align-items: stretch; /* === stretches the items (columns) to have equal height on each row === */
}
#top .avia-section.flex-1-1-2 .entry-content-wrapper:before,
#top .avia-section.flex-1-1-2 .entry-content-wrapper:after {
display: none;
}
#top .avia-section.flex-1-1-2 .entry-content-wrapper .flex_column {
flex: 0 1 calc((100% - 40px) / 3); /* === 2 gaps and 3 items === */
width: unset !important;
margin: 0 !important;
}
@media only screen and (max-width: 989px) {
#top .avia-section.flex-1-1-2 .entry-content-wrapper .flex_column {
flex: 0 1 calc((100% - 20px) / 2); /* === 1 gaps and 2 items - not allowed to grow === */
}
}
@media only screen and (max-width: 767px) {
#top .avia-section.flex-1-1-2 .entry-content-wrapper .flex_column {
flex: 1 1 100%; /* === full-width, items are allowed to grow === */
}
}/* === or with a more modern way to style the flex-box === */
#top .flex-1-1-2 {
--flex-gap: 20px;
--flex-count: 3;
}
#top .avia-section.flex-1-1-2 .entry-content-wrapper {
display: flex;
flex-flow: row wrap;
gap: var(--flex-gap);
justify-content: center;
align-items: stretch; /* === stretches the items (columns) to have equal height on each row === */
}
#top .avia-section.flex-1-1-2 .entry-content-wrapper:before,
#top .avia-section.flex-1-1-2 .entry-content-wrapper:after {
flex: 0 0 0 !important;
margin: 0 !important;
padding: 0 !important;
position: absolute; /* Takes it out of the (document) flow */
}
#top .avia-section.flex-1-1-2 .entry-content-wrapper .flex_column {
box-sizing: border-box !important;
/* flex: 0 0 calc((100% - 40px) / 3); */
flex: 0 0 calc((100% - (var(--flex-count) - 1) * var(--flex-gap)) / var(--flex-count));
width: unset !important;
margin: 0 !important;
padding: 30px; /* you can change here padding of the columns at once */
}
/* Media Queries: Nur die Variable überschreiben */
@media only screen and (max-width: 989px) {
#top .flex-1-1-2 {
--flex-count: 2;
}
}
@media only screen and (max-width: 767px) {
#top .flex-1-1-2 {
--flex-count: 1;
}
}