Template:Area infobox/Sandbox/styles.css

:root {
  --infobox--border: 1px solid #0004;
}
.infobox-TWO { /* this class will eventually be changed to just .infobox */
  max-width: 300px;
  float: right;
  margin-left: 1rem;
  
  background: #F8F5F0;
  border-radius: var(--border-radius-subtle);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px #0002,
    inset 0 1px 4px -1px #0004;
}

/* Title and icon */
.infobox__title {
/*   background: pink; */
  text-align: center;
  margin: 0 0 0.5rem !important;
  padding: 0.5rem 0 !important;
  line-height: 1 !important;
  border-bottom: var(--infobox--border);
}
.infobox__icon {
  position: absolute;
  right: 0;
}

/* Banners */
.infobox__banner {
  text-align: center;
}

/* Definitions */
.infobox__definitions dl {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0;
  position: relative;
}
.infobox__definitions dt {
  grid-column: 1;
  margin: 0;
  text-align: right;
  border-right: var(--infobox--border);
  padding-inline: 0.5rem;
}
.infobox__definitions dd {
  grid-column: 2;
  margin: 0;
  padding-inline: 0.5rem;
}

/* Figures */
.infobox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.infobox__figcaption {
  font-style: italic;
  font-size: smaller;
}