card {
  border-radius: 10px;
  display: inline-block;
  margin: 10px;
  overflow: hidden;
  position: relative;
}

card.role {
  background: url(roles.jpg) no-repeat;
  height: 256px;
  width: 181px;
}
card.char {
  background: url(characters.jpg) no-repeat;
  height: 181px;
  width: 256px;
}

card p {
  font-size: 28px;
  margin: 0;
  max-height: 256px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  text-overflow: ellipsis;
  top: 59px;
  z-index: 10;

  -webkit-text-fill-color: white;
  /*noinspection CssFloatPxLength*/
  -webkit-text-stroke-width: 1.25px;
  -webkit-text-stroke-color: black;
}

card.char.bart-cassidy       { background-position:     0px     0px; }
card.char.bill-noface        { background-position:  -256px     0px; }
card.char.black-jack         { background-position:  -512px     0px; }
card.char.calamity-janet     { background-position:  -768px     0px; }
card.char.el-gringo          { background-position: -1024px     0px; }
card.char.jesse-jones        { background-position: -1280px     0px; }
card.char.jourdonnais        { background-position:     0px  -181px; }
card.char.kit-carlson        { background-position:  -256px  -181px; }
card.char.lucky-duke         { background-position:  -512px  -181px; }
card.char.paul-regret        { background-position:  -768px  -181px; }
card.char.pedro-ramirez      { background-position: -1024px  -181px; }
card.char.rose-doolan        { background-position: -1280px  -181px; }
card.char.sal-doc-holyday    { background-position:     0px  -362px; }
card.char.sal-elena-fuente   { background-position:  -256px  -362px; }
card.char.sal-jose-delgado   { background-position:  -512px  -362px; }
card.char.sal-molly-stark    { background-position:  -768px  -362px; }
card.char.sal-tequila-joe    { background-position: -1024px  -362px; }
card.char.sal-vera-custer    { background-position: -1280px  -362px; }
card.char.sid-ketchum        { background-position:     0px  -543px; }
card.char.slab-the-killer    { background-position:  -256px  -543px; }
card.char.suzy-lafayette     { background-position:  -512px  -543px; }
card.char.vulture-sam        { background-position:  -768px  -543px; }
card.char.willy-the-kid      { background-position: -1024px  -543px; }
card.char.back               { background-position: -1280px  -543px; }

card.role.back                   { background-position:     0px  0; }
card.role.deputy                 { background-position:  -181px  0; }
card.role.ghost-renegade-deputy  { background-position:  -362px  0; }
card.role.ghost-renegade-outlaw  { background-position:  -543px  0; }
card.role.outlaw                 { background-position:  -724px  0; }
card.role.renegade               { background-position:  -905px  0; }
card.role.sheriff                { background-position: -1086px  0; }