/* Copyright © Carecode Oy. All rights reserved. */
/* vim: set si ai et sw=4 ft=css ff=unix: */

#hero-background {
  grid-row-end: row-3;
}

.grid-container {
  grid-template-rows: [row-1] 64px [row-2] auto [row-3] auto [row-4] 13rem [row-5] !important;
}

#article {
  grid-column-start: line-2;
  grid-column-end: line-3;
  grid-row-start: row-3;
  grid-row-end: row-4;
  display: block;
  width: 100%;
  padding: 1rem 0 1rem 0;
}

#article > div {
  margin-bottom: 4rem;
}

#article summary h2,
#article summary h3 {
  display: inline;
}

.bar-chart {
  max-width: 50rem;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

.bar-chart .chart-title {
  margin: auto;
  padding: 0.5rem;
}

.bar-group {
  width: 100%;
  margin-bottom: 1rem;
}

.bar-group:before {
  content: attr(data-before);
}

.bar-chart .bar {
  background-color: var(--primary-color);
  height: 2rem;
  border-top: 0.2rem solid var(--color-white);
  border-bottom: 0.2rem solid var(--color-white);
}

.bar-chart .bar:after {
  content: attr(data-after);
  margin-left: 110%;
  line-height: 2rem;
  vertical-align: middle;
}

.bar-chart .bar.men {
  background-color: var(--action-color);
}

.bar-chart .bar.women {
  background-color: var(--primary-color-dark);
}

.bar-chart .percentage-mark {
  width: calc(100% / 6);
  border-left: 1px solid black;
  height: 1rem;
  margin-bottom: -0.5rem;
  margin-left: -1px;
}

.bar-chart .percentage {
  width: calc(99.2% / 6);
  height: 1rem;
  margin-top: 1rem;
  margin-bottom: -2rem;
}

.bar-chart .percentage span:first-child {
  margin-left: -0.5em;
}