.Hand {
  display: flex;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: space-between;
  align-items: flex-end;
  height: 10.5rem;
  max-height: 10.5;
  overflow: visible;
  flex-shrink: 1;
}

.Hand .CardsSelected {
  display: flex;
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: white;
  border: 2px solid black;
  z-index: 500; /* above cards */
  pointer-events: none;
  opacity: 0.75;
}

.Hand .CardGroup {
  display: flex;
  min-height: calc(7.2em + 0.5em);
  justify-items: space-between;
  justify-content: space-between;  
}

.Hand .Cards {
  display: inline-block;
  position: absolute;
  text-align: right;
  vertical-align: bottom;
  padding: 0.5em;
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
}

.Hand .Stack {
  position: relative;
  display: flex;
}

.Hand .Stack:not(:first-child) {
  margin-left: -3.5em;
  transition: margin-left 1s ease-in-out 0.25s;
}

.Hand .Stack > * {
  transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s;
}

.Hand .Stack > *:not(:first-child) {
  margin-left: -4em;
}

.Hand .Placard:hover {
  filter: brightness(105%);
}

.Hand .Development:hover {
  filter: brightness(150%);
}

.Hand .Development.Selected {
  filter: brightness(150%);
  top: -2.5em;
}

.Hand .Development {
  position: relative;
  display: inline-block;
  width: 4.9em;
  height: 7.2em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0.25em;
  cursor: pointer;
}