$stats-distance: 10px;

.Card {
  transition: transform 0.2s;
  position: relative;
  width: 200px;
  height: 285px;
  background: #ffffff;
  color: #000000;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
  transform: translateY(25%);
  border-radius: 8px;

  &:hover {
    transform: translateY(-($stats-distance + 5px));
    z-index: 1;
  }
}

.CardName {
  text-align: center;
  padding-top: 40px;
  font-size: 20px;
}

%stats {
  display: inline-block;
  position: absolute;
  padding: 12px 16px;
  border-radius: 100%;
  color: #ffffff;
}

.CardMana {
  @extend %stats;
  background: blue;
  top: -$stats-distance;
  left: -$stats-distance;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

.CardAttack {
  @extend %stats;
  background: orange;
  bottom: -$stats-distance;
  left: -$stats-distance;
}

.CardDefense {
  @extend %stats;
  background: red;
  bottom: -$stats-distance;
  right: -$stats-distance;
}

$stats-distance: 10px;

.Card {
  transition: transform 0.2s;
  position: relative;
  width: 200px;
  height: 285px;
  background: #ffffff;
  color: #000000;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
  transform: translateY(25%);
  border-radius: 8px;

  &:hover {
    transform: translateY(-($stats-distance + 5px));
    z-index: 1;
  }
}

.CardName {
  text-align: center;
  padding-top: 40px;
  font-size: 20px;
}

%stats {
  display: inline-block;
  position: absolute;
  padding: 12px 16px;
  border-radius: 100%;
  color: #ffffff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.CardMana {
  @extend %stats;
  background: blue;
  top: -$stats-distance;
  left: -$stats-distance;
}

.CardAttack {
  @extend %stats;
  background: orange;
  bottom: -$stats-distance;
  left: -$stats-distance;
}

.CardDefense {
  @extend %stats;
  background: red;
  bottom: -$stats-distance;
  right: -$stats-distance;
}

Add shadow to all stats
Add shadow to all stats
