styles.css

/*Featurebox layout*/

.featurecontainer {display:flex; flex-wrap: wrap; gap:20px;}
.featurecontainer > div  {font-size:1rem; padding:10px; position:relative; border-radius:8px; 
 box-shadow: 0px 5px 12px -3px rgba(0,0,0,0.1);}
.featurecontainer.col1 > div {flex-basis:100%;}
.featurecontainer.col2 > div {flex-basis:48.5%;}
.featurecontainer.col3  > div {flex-basis:31.5%;}
.featurecontainer.col4  > div {flex-basis:23%;}
.featurecontainer> div.double {flex-basis:66%;}

/*box styling */
.featurecontainer.frame > div {border: 1px solid #e7e7e7}
.featurecontainer.background > div {background:#fff; border:1px solid #e7e7e7}
.featurecontainer table {font-size:1em;}
.featurecontainer table td,.featurecontainer table th {font-size:1em; vertical-align:top; padding:4px}
.featurecontainer .mw-editsection, .featurecontainer .mw-editdrawio {display:none}

/*hover style */
.featurecontainer .featurebox:hover {outline:1px solid #b5b5b5!important; background:#f5f5f5; outline-offset:-1px}

/*feature image */
.feature-img {margin-bottom:15px;}
.feature-img img {border-radius:4px}

/*heading style*/
.featurecontainer > div .feature-hd {  border-bottom: none; padding:2px 6px; margin: 0; font-size:1rem; font-weight:bold}
.featurecontainer > div .feature-hd a { display:block}

/*content style*/
.featurecontainer > div .feature-content { margin: 0; padding:2px 6px;}
.featurecontainer > div .feature-content a { display:block;}

/*icons - if featurebox has additional class 'icon' */
.featurebox.icon   {padding:10px 10px 10px 50px!important;}
.featurebox.icon::before {font-family:'fontawesome', 'bootstrap-icons';position:absolute; left:10px; top: 54%; transform: translateY(-54%); font-size:2.2em; color:#979797;  }


/*List of icons*/
.i-envelope:before  {content:'\F32F';}
#bg-pagelinks:before  {content:'\f0c1';}
#bg-translation:before  {content:'\f0ac';}
#bg-bpmn:before  {content:'\f0e8';}
#bg-pdfexport:before  {content:'\f1c1';}
#bg-ai:before  {content:'\f6b1'; font-size:2.4em}
#bg-blog:before  {content:'\f075';}
#bg-collabpads:before  {content:'\f0c0';}

/*responsive */
@media  (max-width: 1200px) {
    .featurecontainer.col3 > div {flex-basis:48.5%;}
    .featurecontainer.col4 > div {flex-basis:48.5%;}
}

@media (max-width: 765px) {
    .featurecontainer.col2 > div, 
    .featurecontainer.col3 > div, 
    .featurecontainer.col4 > div {flex-basis:100%;}
}