Template:hcol/styles.css

.ac-hcoln+*,  .ac-hcoln+*  {display: inline-block; column-gap: 32px;}
.ac-hcoln+ol, .ac-hcoln+ul {background: #F8F8FF; margin-left: 0; padding-left: 24px; padding-right: 24px;}

.ac-hcol2+* {column-count: 2;}
.ac-hcol3+* {column-count: 3;}
.ac-hcol4+* {column-count: 4;}
.ac-hcol5+* {column-count: 5;}

.ac-hcoln+ol > li > ol,
.ac-hcoln+ol > li > ul,
.ac-hcoln+ul > li > ul,
.ac-hcoln+ul > li > ol {
  break-inside: avoid;
}

/* https://www.w3schools.com/cssref/css3_pr_mediaquery.asp */
/* https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile */
@media only screen and (max-width: 640px) {
  .ac-hcoln+* {column-count: 1;}
  .ac-hcoln+ol, .ac-hcoln+ul {background: initial;}
}


/* https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css */
/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */

/* wiki-unwritable
@-moz-document url-prefix() {
	.ac-hcoln+ol > li,
	.ac-hcoln+ul > li {
		display: table;
		position: relative;
	}
	
	.ac-hcoln+ul > li::before,
	.ac-hcoln+ol > li::before {
		content: "";
		display: list-item;
		position: absolute;
		top: 0;
		left: 0;
	}
}
*/