MediaWiki:SB Infobox.css

.SB-Infobox {
  outline:2px solid #3a808063;
  width:22vw;
  max-width:40em;
  float:right;
  clear:right;
  margin: 0 0.8em 0.8em 0.8em;
  background:#141e22; /* IE fallback. Do people still use IE? */
  background:rgba(49, 68, 77, 0.15);
  border-radius:0.25em; /* May not keep this, but giving it a go */
  cursor: default;
}
.SB-Infobox-Header {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(transparent, #3a808045);
}
.SB-Infobox-Header img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}
.SB-Infobox-Faction-Logo img {
  max-width: 15%;
  width:auto;
  height:auto;
  position: absolute;
  bottom: 0.25em;
  right: 0.25em;
  opacity: 0.8;
  outline:none;
  background:none;
}
.SB-Infobox-Image-Wrap {
  position: relative;
  padding: 1em;
  width:100%;
  max-height: 20em;
}
.SB-Infobox-Image-Wrap img {
  outline: 2px solid #305e60;
}
.SB-Infobox-Header-Caption {
  display: block;
  font-style: italic;
  line-height: 1.5em;
  margin: auto;
}
.SB-Infobox-Name {
  font-family: KenneyFuture;
  font-size:1.8em;
  color:#edcd50;
  text-align: center;
  background: #3a808063;
}
.SB-Infobox-Name .selflink {
	font-weight: normal;
}
.SB-Infobox-Data-Section-Header::before {
  content: " ";
  display: block;
  position: relative;
  top: -1em;
  border-top: 1px solid #394442;
  width:90%;
  margin:auto;
}
.SB-Infobox-Construction-Section ~ .SB-Infobox-Data-Section-Header::before {
  border-top:none;
}
.SB-Infobox-Data-Section-Header {
  width: 100%;
  text-align: center;
  margin: auto;
  background: #2b42488c;
  font-family: kenneyfuture;
  font-size: 1.2em;
  margin-top: 1em;
}
.SB-Infobox-Data-Section {
  text-align: center;
}
.SB-Infobox-Data-Cell {
  display:flex;
  text-align:left;
  padding:0 0.4em;
  background: transparent;
  transition: background .125s ease-in-out;
/*  font-size:1.25em */
}
.SB-Infobox-Data-Cell:hover {
  background:#3a80802b;
}
.SB-Infobox-Cell-Header {
  font-weight:bold;
  flex:48%;
  min-width:min-content;
  margin-right:4%;
  text-align: right;
  white-space: pre;
}
.SB-Infobox-Cell-Body {
  flex:50%;
  margin: auto;
}
.SB-Infobox-Cell-Body ul {
  margin:0 0 .2em 1em!important;
  border-bottom: 1px solid #394442;
}
.SB-Infobox-Construction-Section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));/*Mediawiki is dumb, this is a valid property */
  column-gap: 1em;
  padding: 0 0.4em;
}
.SB-Infobox-Construction-Cell-Header {
    flex: 50%;
    text-align: left;
    display: inline-block;
}
.SB-Infobox-Construction-Cell {
    display: flex;
    border-bottom: 1px solid #394442;
}

/* Portrait orientation. Also, low-res viewports */
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (   min--moz-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (orientation: portrait),
only screen and (        min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (                min-resolution: 192dpi) and (orientation: portrait),
only screen and (                min-resolution: 2dppx) and (orientation: portrait),
only screen and (max-width: 800px) and (orientation: portrait) { 
  .SB-Infobox {
    width:auto!important;
    float:none;
    clear:none;
    font-size:1.5em;
  }

}

 
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (   min--moz-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (orientation: landscape),
only screen and (        min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (                min-resolution: 192dpi) and (orientation: landscape),
only screen and (                min-resolution: 2dppx) and (orientation: landscape) {
  .SB-Infobox {
    width:40%!important;
    font-size:0.9em;
  }
}