Размер символов костюма больше в мобильных браузерах

Question

Когда я вижу свою веб-страницу на мобильном телефоне, символы костюма становятся больше, чем на рабочем столе, в результате чего все мои html-css карты выглядят странно

Карты - это CSS-HTML, а не изображения.Они всегда выглядели хорошо для настольных браузеров, но на мобильных устройствах они делают странные вещи, и символы костюма не увеличиваются, как ранги.Страница: http://bridgegod.com/framedprob.php?probid=776, Вот как это выглядит в мобильной версии: https://imgur.com/a/VwuZhgv, Вот как это выглядит на рабочем столе: https://imgur.com/a/FiHMPIR

.card{
    background-color: white;
    width:  2.65em;
    height: 4.10em;
    border-radius: 0.20em;
    border-color: #808080 #000000 #000000 #808080;
    border-width: 1px;
    border-style: solid;
    color: #000000;
    font-size: 60px;
    position: relative;
    display: inline-block;
        transition: opacity 3s ease-out;
    -moz-transition: opacity 3s ease-out;
    -webkit-transition: opacity 3s ease-out;
    -o-transition: opacity 3s ease-out;
}
.rango, .rango_op, .rango_op_fat {
  font-size: 50%;
  font-weight: 800;
  font-family:Arial,Helvetica,sans-serif;
  position: absolute;
}
.rango{
  width: 1.05em; text-align: center;
  left: -0.05em;
  top:  0.15em;
}
.smark{
    font-size : 60%;
  width: 0.6em; text-align: center;
  left: 0.10em;
  top:  0.8em;
   position: absolute;
}

.spotA1 { position: absolute; left: 0.35em; top: 0.07em; }
.spotA2 { position: absolute; left: 0.35em; top: 0.97em; }
.spotA3 { position: absolute; left: 0.35em; top: 1.41em; }
.spotA4 { position: absolute; left: 0.35em; top: 1.97em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotA5 { position: absolute; left: 0.35em; top: 2.87em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotB1 { position: absolute; left: 0.98em; top: 0.07em; }
.spotB2 { position: absolute; left: 0.98em; top: 0.67em; }
.spotB3 { position: absolute; left: 0.98em; top: 1.41em; }
.spotB4 { position: absolute; left: 0.98em; top: 2.27em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotB5 { position: absolute; left: 0.98em; top: 2.87em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotC1 { position: absolute; left: 1.61em; top: 0.07em; }
.spotC2 { position: absolute; left: 1.61em; top: 0.97em; }
.spotC3 { position: absolute; left: 1.61em; top: 1.53em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotC4 { position: absolute; left: 1.61em; top: 1.97em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotC5 { position: absolute; left: 1.61em; top: 2.87em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}


.smark_op {
    position: absolute;
    font-size: 60%;
  width: 1em; text-align: left;
  right: 0.10em;
  bottom:  0.9em;
  -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.rango_op {
  width: 1.05em; text-align: center;
  right: -0.05em;
  bottom:  0.15em;
  -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}

<div class="card" id="card_c2">
  <div class="dorso"></div>
  <div class="front suit_green">
    <div class="rango">2</div>
    <div class="smark">&clubs;</div>
    <div class="smark_op">&clubs;</div>
    <div class="rango_op">2<br>&nbsp;</div>
    <div class="spotB1 spot">&clubs;</div>
    <div class="spotB5 spot">&clubs;</div>
  </div>
</div>