Template:Area infobox/style.css

.tempest-infobox {
  max-width: 300px;
  float: right;
  margin-left: 16px;
  display: grid;
  grid-template-columns: fit-content(40%) 1fr;
  border: solid 1px var(--border-color-base,#a2a9b1);
  padding-bottom: 12px;
}

.tempest-infobox > img.infobox-header-img,
.tempest-infobox > figure:first-child {
  max-width: 100%;
  grid-column: 1 / 3;
}

.tempest-infobox > p.infobox-title {
  text-align: center;
  grid-column: 1 / 3;
  font-size: 1.1em;
  font-weight: 600;
  position: relative;
  margin: 0;
  padding: 8px 0;
  margin-bottom: 12px;
}

.tempest-infobox > p.infobox-title::after {
  content: ' ';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: .15;
}

.tempest-infobox dl {
  display: contents;
}

.tempest-infobox dt {
  grid-column: 1 / 2;
  border-right: solid 1px var(--border-color-base,#a2a9b1);
  margin-bottom: -1px;
  justify-self: end;
  padding: 0 12px;
  text-align: right;
}

.tempest-infobox dd {
  grid-column: 2 / 3;
  margin-left: 0;
  padding: 0 12px;
}

.tempest-infobox_next-prev {
  display:grid;
  max-width:100%;
  grid-column:1/3;
  grid-template-columns:50%50%;
  margin-top:16px;
  padding-top:12px;
  position:relative;
  margin-bottom:-12px;
  padding-bottom:12px;
  background:var(--background-color-body)
}
.tempest-infobox_next-prev>span{
  justify-self:stretch;
  padding: 0 8px;
  text-align: center;
  position: relative;
}
  
.tempest-infobox_next-prev>span.prev {
  grid-column:1/2;
  border-right:solid 1px var(--border-color-base,#a2a9b1);
  padding-left: 16px;
}
.tempest-infobox_next-prev>span.next {
  grid-column:2/3;
  border-left: solid 1px var(--border-color-base,#a2a9b1);
  margin-left: -1px;
  padding-right: 16px;
}


.tempest-infobox_next-prev .prev::before {
  content:"←";
  position: absolute;
  left: 12px;
  color:var(--color-base);
  text-decoration:none!important
}
.tempest-infobox_next-prev .next::after {
  content:"→";
  position: absolute;
  right: 12px;
  color:var(--color-base);
  text-decoration:none!important
}