/* lists reset */ .tpl-sisproj ul li, .tpl-sisproj ul { margin: 0; padding: 0; list-style: none; } /* lists layout */ .tpl-sisproj ul + ul { margin-top: 1em; } .tpl-sisproj ul { display: flex; gap: 1em; flex-wrap: wrap; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; max-width: 100em; } /* item width for ~grid-ish look */ @media screen and (min-width: 23em) { .tpl-sisproj-12 li {min-width: 12em} .tpl-sisproj-13 li {min-width: 13em} .tpl-sisproj-14 li {min-width: 14em} .tpl-sisproj-15 li {min-width: 15em} } @media screen and (min-width: 30em) { .tpl-sisproj-16 li {min-width: 16em} .tpl-sisproj-18 li {min-width: 18em} .tpl-sisproj-20 li {min-width: 20em} .tpl-sisproj-22 li {min-width: 22em} } /* items layout */ .tpl-sisproj li { display: flex; gap: .8em; align-items: center; } .tpl-sisproj .sub { font-size:85%; color:#444; white-space: nowrap; } /* thin screen, especially for wide sub-description */ @media screen and (max-width: 470px) { .tpl-sisproj .sub { white-space: normal; } .tpl-sisproj ul { display:grid; } }