.ww1-map-wrap > .timeline,
.ww2-map-wrap > .timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "heading heading"
    "slider slider"
    "years years"
    "trail play";
  column-gap: 18px;
  align-items: center;
}

.ww1-map-wrap > .timeline .timeline-row,
.ww2-map-wrap > .timeline .timeline-row { grid-area: heading; }

.ww1-map-wrap > .timeline > input[data-year],
.ww2-map-wrap > .timeline > input[data-year] {
  grid-area: slider;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 7px 0 0;
}

.ww1-map-wrap > .timeline > .range-years,
.ww2-map-wrap > .timeline > .range-years {
  grid-area: years;
  display: flex;
  width: 100%;
  clear: both;
  justify-content: space-between;
  margin: 2px 0 0;
}

.ww1-map-wrap > .timeline > label,
.ww2-map-wrap > .timeline > label {
  grid-area: trail;
  margin: 9px 0 0;
}

.ww1-map-wrap > .timeline > .play-btn,
.ww2-map-wrap > .timeline > .play-btn {
  grid-area: play;
  float: none;
  margin: 9px 0 0;
}

@media (max-width: 640px) {
  .ww1-map-wrap > .timeline,
  .ww2-map-wrap > .timeline { column-gap: 9px; }

  .ww1-map-wrap > .timeline > .range-years span,
  .ww2-map-wrap > .timeline > .range-years span { display: inline !important; }
}