/* ouac (ol ul add class):
-- .ouac-acol0
-- .ouac-acoln: .ouac-acol2, .ouac-acol3, ...
*/
.ouac-acoln+ol, .ouac-acoln+ul,
.ouac-acol0+ol, .ouac-acol0+ul {
background: #F8F8FF;
column-gap: 32px; /* "gap" to avoid column intersection (list item marker) */
margin-left: 0;
padding-left: 24px;
}
/* https://stackoverflow.com/questions/47601564/equal-width-columns-in-css-grid */
.ouac-acol0+ol, .ouac-acol0+ul {
display: inline-grid; /* "inline" to fit content */
grid-auto-flow: column; /* default order (X elements=columns in 1 row) */
grid-auto-columns: minmax(256px,1fr); /* same-width columns (min is 256px) */
}
.ouac-acoln+ol, .ouac-acoln+ul {display: inline-block;}
.ouac-acol2+ol, .ouac-acol2+ul {column-count: 2; min-width: 192px;} /* 2x96 */
.ouac-acol3+ol, .ouac-acol3+ul {column-count: 3; min-width: 288px;} /* 3x96 */
.ouac-acol4+ol, .ouac-acol4+ul {column-count: 4; min-width: 384px;} /* 4x96 */
.ouac-acol5+ol, .ouac-acol5+ul {column-count: 5; min-width: 480px;} /* 5x96 */
.ouac-acoln+ol > li > ol,
.ouac-acoln+ol > li > ul,
.ouac-acoln+ul > li > ul,
.ouac-acoln+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) {
.ouac-acol0+ol, .ouac-acol0+ul {background: initial; grid-auto-flow: row;}
.ouac-acoln+ol, .ouac-acoln+ul {background: initial; column-count: 1;}
}
/* 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() {
.ouac-acoln+ol > li,
.ouac-acoln+ul > li {
display: table;
position: relative;
}
.ouac-acoln+ul > li::before,
.ouac-acoln+ol > li::before {
content: "";
display: list-item;
position: absolute;
top: 0;
left: 0;
}
}
*/