.cardblock{
  position: relative;
  overflow: hidden;
  height: 50px;
  min-width: 300px;
}
.cardImg {
  position: absolute;
  opacity: 1;
top:0;
  left: 2.5px;
  width: 150px;
  height: 180px;
  border-radius: 10px;
  transform-origin: top left;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
}
span.cardImg {
  
  transform-origin: left center;
  -webkit-transform-origin:  left center;
  -moz-transform-origin:  left center;
  -ms-transform-origin:  left center;
}
.smallcardblock{
  transform: scale(.5);
  transform-origin: top left;

}
.card{background:#fff;color: black;padding: 10px 0;font-size: 30px;margin: 3px;line-height: 45px; width: 50px; display: inline-block; text-align: center;height: 45p;}
.card::before{content:attr(data-rank)}
.h{color:red}
.c{color:rgb(49, 139, 0)}
.d{color:rgb(55, 0, 255)}

.s::after{content:"\2660"}
.h::after{content:"\2665";color:red}
.d::after{content:"\2666";color:rgb(55, 0, 255)}
.c::after{content:"\2663";color:rgb(49, 139, 0)}