#organisation-body {
  & .index {
    display: grid;
    grid-gap: 6px 5px;
    grid-area: items;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas: "item1 item2 item3 item4";
  }

  & .index .item:nth-child(1) {
    grid-area: item1;
  }

  & .index .item:nth-child(2) {
    grid-area: item2;
  }

  & .index .item:nth-child(3) {
    grid-area: item3;
  }

  & .index .item:nth-child(4) {
    grid-area: item4;
  }

  & details {
    cursor: pointer;
    opacity: 0.7;
    border: 2px solid $dark;

    &:hover,
    &:focus {
      opacity: 1;
    }
  }

  & summary {
    &::marker {
      font-size: 2em;
      padding-left: 2em;
    }

    & .subheading {
      display: inline;
      width: 95%;
      padding-bottom: 2em;
    }

    & .index {
      border-top: 2px solid $dark;
    }
  }
}

#hierarchy ul {
  list-style: none;
  padding-left: 1em;
  
  & .hierarchy-item {
    &:before {
      content: '\21B3';
      margin: 0 0.4em;
    }
    
    &--current {
      font-weight: bold;
    }
    
    &--child:before {
      content: '\2192';
    }
  }
}

.timeline__legend {
  & span {
    margin: 0 1em;

    & * {
      display: inline-block;
    }

    & .colour-square {
      width: 1em;
      height: 1em;
      border-radius: 2.5px;
      border: 1px solid $dark;

      &--current {
        background-color: #bbbbb0;
      }

      &--past {
        background-color: #fffff0;
      }
    }
  }
}

.site-content__body--chart {
  & #timeline,
  & #map {
    width: 100%;
    max-width: 100%;
    grid-area: section-chart;
  }
}

.site-content__body--list {
  & .site-content__sections-list {
    grid-area: sections-list;
    display: block;
    list-style: none;
    margin: auto;
    padding-left: 0;

    & li * {
      display: inline-block;
    }
  }
}