.wonder-war {
  display: flex;
  background-color: lightcoral;
  align-self: center;
  justify-content: center;
  font-family: serif;
  text-align: center;
}
.wonder-war-vertical {
  flex-direction: column;
}

.wonder-war-crossed-swords {
  align-self: center;
}

.wonder-war-align-bottom {
  align-self: flex-end;
}

.wonder-war-battle {
  border: 1pt solid red;
  margin: 0.1em;
  padding: 0.1em;
  display: flex;
  align-items: center;
}
.wonder-war-vertical .wonder-war-battle {
  flex-direction: column;
}

.wonder-war-battle-results {
  display: flex;
  justify-content: space-between;
}
.wonder-war-horizontal .wonder-war-battle-results {
  flex-direction: column;
}

.wonder-war-battle-result {
  background-color: red;
  color: white;
  margin: 0.2em;
  min-width: 1.5em;
  font-weight: bold;
}
