/* Illustrations and editable examples for the September language articles. */
.language-terms-article .language-figure {
  margin: 24px 0;
  padding: 20px 0;
  border-block: 1px solid #d4d9d6;
}
.language-figure figcaption { font-weight: 700; margin-bottom: 16px; }
.salary-breakdown { list-style: none; margin: 0; padding: 0; }
.salary-breakdown li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 4px 12px;
  padding: 12px;
  border-bottom: 1px solid #e2e5e3;
}
.salary-breakdown strong { text-align: right; font-size: 20px; font-variant-numeric: tabular-nums; }
.salary-breakdown small { grid-column: 1 / -1; color: #515b55; }
.salary-breakdown .subtotal { background: #edf5f1; border-left: 4px solid #287358; }
.salary-breakdown .result { background: #f5f1f6; border-left: 4px solid #855477; }
.delivery-map, .request-map { margin: 0; display: grid; gap: 0; }
.delivery-map > div, .request-map > div {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(0, 2fr);
  border-bottom: 1px solid #d4d9d6;
}
.delivery-map dt, .request-map dt { padding: 16px; font-weight: 700; background: #edf5f1; }
.delivery-map dd, .request-map dd { margin: 0; padding: 16px; }
.delivery-map dd span, .request-map dd span { display: block; margin-top: 8px; color: #515b55; }
.language-example { margin: 16px 0; padding: 16px 20px; background: #f4f6f5; border-left: 3px solid #287358; overflow-wrap: anywhere; }
.language-example p:last-child { margin-bottom: 0; }
.language-terms-article caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.language-terms-article h3, .language-terms-article h4 { scroll-margin-top: 24px; }
@media (max-width: 600px) {
  .salary-breakdown li { grid-template-columns: minmax(0, 1fr) 116px; padding: 10px 8px; }
  .salary-breakdown strong { font-size: 18px; }
  .delivery-map > div, .request-map > div { grid-template-columns: minmax(0, 1fr); }
  .delivery-map dt, .request-map dt, .delivery-map dd, .request-map dd { padding: 12px; }
  .language-example { padding: 12px; }
}