User:Izno/Sandbox/Infobox/template/styles.css

 /*
  * An investigation of a div-based infobox, with support for low resolution
  */
 .infobox-div{
 font-size:88%;
 line-height:1.5em;
 }

 div:not(.infobox-div-subbox)>.infobox-div-inner{
 border:1pxsolidvar(--border-color-base,#a2a9b1);
 background-color:var(--background-color-neutral-subtle,#f8f9fa);
 padding:0.4em;
 }

 .infobox-div-subbox{
 display:contents;
 }

 @media(min-width:300px){
 .infobox-div-inner{
 display:grid;
 }

 .infobox-div-inner>div{
 grid-column:1/3;
 }

 div.infobox-div-label{
 grid-column:1/2;
 }

 div.infobox-div-data{
 grid-column:2/3;
 }

 /* subgrid doesn't validate RIP
 	 * can't do this yet
 	.infobox-div-subbox > .infobox-div-inner {
 		grid-template-columns: subgrid;
 	}
 	*/
 }

 @media(min-width:720px){
 .infobox-div{
 /* @noflip */
 margin:0.5em00.5em1em;
 /* @noflip */
 float:right;
 /* @noflip */
 clear:right;
 width:22em;
 }
 }

 /*
  * not strictly certain .infobox-div-subbox styles are necessary since the modules
  * now exclusively output infobox-div-subbox or infobox, not both
  * just replicating the module faithfully
  */
 /*
 .infobox-div-subbox {
 	margin: -3px;
 }
 */


 .infobox-div-above,
 .infobox-div-title{
 font-size:125%;
 font-weight:bold;
 text-align:center;
 }

 .infobox-div-title{
 padding:0.2em;
 }

 .infobox-div-header,
 .infobox-div-subheader,
 .infobox-div-image,
 .infobox-div-full-data,
 .infobox-div-below{
 text-align:center;
 }

 /* must be declared after .infobox-full-data */
 .infobox-div-label,
 .infobox-div-data{
 /* @noflip */
 text-align:left;
 }

 .infobox-div-label{
 font-weight:bold;
 }

 .infobox-div-navbar{
 /* @noflip */
 text-align:right;
 }

 .infobox-div.navbar{
 font-size:100%;
 }

 .infobox-div-3cols-child{
 margin:auto;
 }