bemarket/src/components/market/Card.vue

<template>
  <router-link class="item item-card" to="/item">
    <div class="bgCard">
      <div class="shape"></div>
    </div>
    <div class="content">
      <img
        draggable="false"
        class="portrait"
        src="@/assets/images/avatar/1002.png"
        style=""
      />
      <div class="inner">
        <div class="itemInfo common">
          <div class="wrapInfo">
            <div class="line common"></div>
            <span class="name">SERP</span
            ><span class="tokenId common">Lunar New Year</span>
          </div>
        </div>
        <div class="statsItem">
          <div class="battleWrapper">
                          <span class="label">gTHC battle</span
                          ><span class="value green">37/264</span>
          </div>
          <div class="priceWrapper">
            <span class="label">Price</span>
            <div class="priceValue">
              <div class="mainWrapper">
                <img
                  draggable="false"
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQYAAAEGCAMAAACw68sOAAAAOVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADzui/4vzDJnCggGAbotC4UEARUQRBCMw2yiSM2vHolAAAACnRSTlMAWuj/qcQ5d4G2qF7fFAAACHlJREFUeNrt3e1iqjAMBmCdQFEGbrv/iz1nH4pOoXnfpqVp5/8dt+eksdIk3e02fnWuafbdru5X1x6+XseqIfrD9eX+FOp2uFOo1uGXQqUO7vLXv71X7DArnKZ6HfpZ4TRU63CrUK/DvUKtDu6XwuerPodnCvXlyZsVMcwMta2L/lksVOfgFhTqclhW+O9QTZ50T/NCbXmyX4mFetaFT6EOB+dVqMFBolD+flKqUHae7KUKRa8LuULJDg5QKNfBs2uqZD+JxUKpeXLOC5OYobx10YMrokwHYkUU6MAqlLWfDFEoJ08y2bG8ddGHxEIxDi5QoQyHcIUS8qSOgvU8GZYdS1kXWgq2HRy1gy7NQSkvGM+T2go286RTywuW10WvrmDRQTM72nVQzwsm82Q8BUt50kXIC/bWRR9RwY5DxBVhyCG2go08mUIh/zzpouYFK+uiT6KQu0OcvaM1hyR5Ifs8mVYh1zzpEuWFvNdFaoU8HRKviEwdtlDIL0+GKgwfr4P9PBmaF4aP85lzyGldKCgcDuYdQveOXwrmHcLzwvn750mHPPKkmgLvkEE8qOSFQIft14WqwuEwfph0UFwRPw4W40FPoTnaXReKCrudWQe9vNB8/nNGHZQVjDoo7R1nBZMOqnlBySH9PqqPoWAuHjrtvKDvkGLOXhNJQdGhScAQZUUoO8RX2MdT0HPoEiXI9ygK4Q6n8evH+0SfltzXIK9CqMPw+v0G+1QfFMyvKVAIc7gopPioeGG/FosUQhyuCi8Jd0+og1CBd7gqpNk/tZSDWIF1mBWOaXbTR8IBUOAckiswDpAC4zArNLtdrg6gAu6wQSzgDrAC6rCRAuZAKGAOmykgDpQC4rChgtyBVJA7bJIdUQdaQeqwaSxIHfwKnXNdgEMahW7fvCxeo+F38Cl038+yzk1HOngVVv8AKUK7vkv3OfgUbqbx95SDV+HyDiH3gNz8lg3jACgsfTled/AqHBXuO7j7LQkHSOHQ4vkBUaAd3P25O+yAKRAOmALp8HCLBuggVhhHzgFVoBzmsynpY9R7B7nC9Eo5iBXOH/x51k2vzMA4AArDwDjIFV75c727OW6EA6Lw+SfBDogCfb7568wadsAUCAdIgT3nfbhFA3RAFU7ougAVOIcnPXSQA6yAxgOswDg87SREHAgFLB5wBdxhYcql3OGNUEDiYfwgFFCHpYoecX44cwpAPBwYBcxhpaJHHA+UAhIPlALisNphDDngCmA8wApyB0+fNeBAKGDxQChI6+V8M4D9+aH/Pu9+cZSCwGH9DfyPaQQOgnpH/6PFfd/2+x2pIHBYewPJQzuvg6jeMeBBs0RBkB8CH2X7HITzF2gHkYIoHgIf6K86SKdQDKSDVIGPB/Ex14oDMCGdchAr0PEAHPYtOiDV4Ew8IAqcA3T0u+AAVoPDDpgC4wAWAjx1gKfTgA6oAp4f4LKQJw7EjB7IAVaA44EoEnpwYO6PQPIDo4A5UCVjvxw6rktkdvB8W+sohVuHXugMFhDe91+0ZGfA7NDJjv8nsNpzduhEznA56W3/RUd3iVwd1sOBVLiNh14SDERx8U3/xZ7vlbk4HAX/V4TC7NAKwo0qub847H96hrgukeHVX6nteIXrGxwE4cY1Hvw49FcGrj8iLsMQm+EyBqPXWBSN1UUxzIviL0V+R1uuH5in2B+Yp7uGxev25p1UMLp9uhmP0xFfL+EvFTY2039frbL9on3a4os2PIrA/GOXpceRkIP5h3DLw8OAPFnwI9mb3/N9itIlIncIfUDvbfDQOKgo/LhGmB9iH96dYh/e+Q+1azjKlYxW9OZJMwf7Y8DBfniZR+upwggu8/C9ga/BQ6PcBVDgHDSLfsaAop/V/AAp5FgChozIWnQAFXAH7YLAx3hACiMX8qRYIXp56FlaHjoGlIduVCx8ilEsPAYUC3Ol422q0vERKR0fA0rHn+QHSIFoJDjFbiTgBgiCbSVdm6qtZETbSi4/wLXX3OVJ3x/lDqmajEa8yWgMaDKCWs7cIeuWs/E1ZJSkuAGxO2TegDh+hAzUdMJ21LbodlRpc3JbeHOyrFW9TdWqPm7Vqi4YXNC1FQwu8I6xcL4p+mWMsditzwTxKiQZajJ6hpq4/3+AizhAUqBQzIibQIXiBx4JFZKOvzpuqDBlMAxt3MhBHAu0AzSDcKN4AGKBdLAwKBFUKHRsJqyQdIjqMce8QDlwI3XT5smOu4cq4YDlNgVDk/+47T4BA138W9Tw9YBS8ASj+MdUo/iDGgPkFzOQNz/8OOwTpYbY13SMYdeExk8OSS5tGQMvt+qSfV5WfoXP9XfVdwiMhbQXOu3/rvd6PN/Uc9C79C7F7imWg8ErECM4mLwQU91BT6Hf7cw6qH1GpFVQdjB3JehTh9CLYrX2jptcpK0XD7avl1d2MJcXtBxOtw5nqwqq8XC2mBfUHc5hzxe2VVBzMJodlR0M5wVFhwIUNBwsZ0fF/eTJcnZU3D+Yzo5bOuSVF7ZyyFMhuUOGK2ILh1wVUjoMU74K6RxyzQtpHXJXSOSQ9YrQ2U/azo7p4mGYLCjEdsg/L6RwsKMQ1cHIiojtYEkhlsMw2VKI42ApL8RzsKgQwcHcioizn7SpoBsPw2RVQdPBZl7QdrCtoOZgeEVoOlhX0HAYJvsKCuebxvOCjkMpCoEORayI8P1kOQp8PAxTSQqsQzl5IcShPAXKobAVwTqUqIA6DFOZCphDiXkBdyhZAXAodkVg+8myFWTxUPaKkDrUoOB3qEPB6zCVnhdkDrUorDnUsiLWHepSWHKoTWHBYaonL6w51Kfw6FDfinjmUKvCvUO9CncOU4154bfD+e2tYoXH+ynqWxFPHSpV+OVQrYLgfopKXvtW5RYN+6/ONUvXgCR8/QOYUJq/aGX2eQAAAABJRU5ErkJggg=="
                  class="icon"
                /><span class="value">1.6 WBNB</span>
              </div>
              <span class="subValue">$&nbsp;854.94 USD</span>
            </div>
          </div>
        </div>
        <div class="heroLabel">
          <img
            class="trophy hero-trophy small"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAxlBMVEVHcEwCAgIFBQUCAgLLnPABAQECAgIZGRkHBwcDAwMQEBAFBQUCAgJENFDXpf3RoffWpf3Ypv/Xpv/Ypv+vhs/SofvRoPbXpv/Xpf6beLd6XpC8keC3jNjRoPfDluaMbaZgSnF+CIi3NJL////Ypv+KHZe7Qp+IE4z25vLRlfGfQ6bAT6fFZsLVnvitXb2ZHY2mJ4/GetmyL5G6PZnszeXjudu+g8PSgLvbnsyWM6T58fjNjOq1Z9CgQ7Tx3+/Ph+PGjsilTbxiJpE+AAAAIXRSTlMALBIjqjo1AwkVBg0cUJ3D8d8geZUQ5z1ghmy3qubCYkg2+tOkAAACuUlEQVRYw8WXWXeiQBSEVYKIKO5ZHJOZxqsoKK64RpP5/39qupsGlCV048PUm+dYH7eqLwcoFDLUKzykng56+wF7pwlnaHXy+l9aMLWN2RRar7nsDZjPNgbWbA6Ndo7wsKJ2rPEKRKvA4b9sI9T4LJSDhJ8Z9xKooh2EjyD4cvQ6AF9jI0lcVUTD38vOykGPzvhJpIoX0fD3OVKrIHubEj5eRSd+j73itbcNPiVUkR0+XsVtjs7N3vKJ5ggBOtiGqCzQfbui6DAWtC/NEeiKwgAVUcDaRAgDKgxQ1Z5SAJu9627dw/6+n/UCIQJ40qqKN0ApGTA+nIZM7k1HS4QYoFT5EWBPhqG2YXgUAFQfoCYCbv3D/e30fIA9u7S7xUHcqJ0DsCX2Cc2+v9p30/MBaALW3SZm5wScIkcnDJj4P2J2foB9wPre7UZ5Aewwhtb/AiychwBXEx13Ozc/4ET/ussP8Gz5AAs6+MkxkbXNAcB7aw3vJARY07U/3PpPAosUrP136L8e+Vd5Gf7Hcpl9Z3LfC5Gb1rQcxxmhJCUC1gvErQSAiD0JsDTRIwBBewxgIfQIoAvwORKym58A3RAg/XmH6UXA/xe/Pv+WAkBJKpbfnmF65LQfz9B8Kxel8NlYK5blOm+O0Qqa3bpcLtZ8QFVT8QiyXP8F4GQhTGcOH3UZ+yWVPd7xCFoNEzCi/5xVxQWH7xN7USIDMAAOodboEDKpIn2II5ke2/Hla2qpwgagBK1Uk7wcg9QqcHjoetPjy2v+C06AIEMEVSSHb9TZ9Krmjx8iqpqXo+zliFZxmcJ7P7Dj+pTYy24EcR7Fw8te+EQ7JdAqghxBFWRvB/70OHw19XuBIIIqPmDuBOHD6cPu0xCRKo4sfNkPn/HNQ4/UR3RxFXRv6dGlh09AhFUM6rzTp1SRfvJU/wCivWj2tb7ImAAAAABJRU5ErkJggg=="
          />
          <div class="hero-level small">
            <img
              class="logo"
              src="data:image/svg+xml,%3csvg width='71' height='64' viewBox='0 0 71 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg filter='url(%23filter0_d)'%3e %3cpath d='M4.75 42.4667L12.7348 0H49.75L66.25 12.5L57.8258 56H18.3712L4.75 42.4667Z' fill='%2307011D'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d' x='0.75' y='0' width='69.5' height='64' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dy='4'/%3e %3cfeGaussianBlur stdDeviation='2'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3e %3c/filter%3e %3c/defs%3e %3c/svg%3e"
            /><span class="level">LEVEL</span
          ><span class="value">1</span>
          </div>
          <div class="hero-class small">
            <div class="imgClass">
              <img
                src="data:image/svg+xml,%3csvg width='20' height='44' viewBox='0 0 20 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M11.7573 33.0407V37.6037L13.7238 38.5815L9.91632 44L6.19247 38.4593L8.03347 37.6037V33.0407H3.09623L0 30.637L1.96653 28.9259H18.2008L20 30.4741L17.0711 33H11.7573V33.0407ZM10.1255 15.8889L10.9623 27.2556H15.4812L13.6402 6.47778L9.91632 0L6.40167 6.43704L4.35146 27.2148H8.91213L10.1255 15.8889Z' fill='white'/%3e %3c/svg%3e"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </router-link>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'Card',
  components: {
  }
})
export default class extends Vue {}
</script>
<style lang="scss" scoped>
.item-card {
  height: 21em;
  width: 14.375em;
  position: relative;
  color: #261858;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.item-card .bgCard {
  position: absolute;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: -2;
  height: calc(89%);
}

.item-card .bgCard .shape {
  -webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0 100%, 0 15%);
  clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0 100%, 0 15%);
  border-radius: 6px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #1b1444;
  width: 100%;
  height: 100%;
}

.item-card:hover .bgCard .shape {
  background: #2c2b74;
}

.item-card .content {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.item-card .portrait {
  width: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  top: 0px;
}

.item-card .portrait.spinner {
  margin-bottom: 0.25em;
  bottom: 9.8%;
}

.item-card .inner {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  z-index: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.item-card .inner .itemInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  height: 23.6%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: -1px;
  padding: 0.5625em 1.125em;
}

.item-card .inner .itemInfo.common {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(45, 43, 150, 0)), color-stop(54.56%, #211ead));
  background: linear-gradient(180deg, rgba(45, 43, 150, 0) 0%, #211ead 54.56%);
}

.item-card .inner .itemInfo.epic {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(74, 0, 169, 0)), color-stop(57.56%, #4a00a9));
  background: linear-gradient(180deg, rgba(74, 0, 169, 0) 0%, #4a00a9 57.56%);
}

.item-card .inner .itemInfo.legendary {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 153, 0, 0)), color-stop(57.56%, #bf5000));
  background: linear-gradient(180deg, rgba(255, 153, 0, 0) 0%, #bf5000 57.56%);
}

.item-card .inner .itemInfo .wrapInfo {
  position: relative;
  padding-left: 1em;
}

.item-card .inner .itemInfo .wrapInfo .line {
  left: 0;
  height: 100%;
  width: 0.25em;
  position: absolute;
}

.item-card .inner .itemInfo .wrapInfo .line.common {
  background: #68e4ff;
}

.item-card .inner .itemInfo .wrapInfo .line.epic {
  background: #ff94d5;
}

.item-card .inner .itemInfo .wrapInfo .line.legendary {
  background: #ffd600;
}

.item-card .inner .itemInfo .wrapInfo .name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: bolder;
  font-size: 1.125em;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-card .inner .itemInfo .wrapInfo .tokenId {
  font-weight: bolder;
  font-size: 0.75em;
  line-height: 1.33;
}

.item-card .inner .itemInfo .wrapInfo .tokenId.common {
  color: #68e4ff;
}

.item-card .inner .itemInfo .wrapInfo .tokenId.epic {
  color: #ffb1e0;
}

.item-card .inner .itemInfo .wrapInfo .tokenId.legendary {
  color: #ffd600;
}

.item-card .inner .statsItem {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 24.7%;
  background: #1b1444;
  border-radius: 0 0 0.5em 0.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0.375em 1.125em;
}

.item-card .inner .statsItem .label {
  font-size: 0.75em;
  line-height: 1.25;
  color: #ffffff;
}

.item-card .inner .statsItem .battleWrapper {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.item-card .inner .statsItem .battleWrapper .value {
  font-weight: bold;
  font-size: 1em;
  line-height: 1.25;
  color: #ffffff;
}

.item-card .inner .statsItem .battleWrapper .value.red {
  color: #d80000;
}

.item-card .inner .statsItem .battleWrapper .value.yellow {
  color: #feca2e;
}

.item-card .inner .statsItem .battleWrapper .value.green {
  color: #0dc900;
}

.item-card .inner .statsItem .priceWrapper {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0.5em;
}

.item-card .inner .statsItem .priceWrapper .priceValue {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.item-card .inner .statsItem .priceWrapper .priceValue .mainWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.125em;
}

.item-card .inner .statsItem .priceWrapper .priceValue .mainWrapper .icon {
  width: 1.5em;
  margin-right: 0.3125em;
}

.item-card .inner .statsItem .priceWrapper .priceValue .mainWrapper .value {
  font-weight: bolder;
  font-size: 1em;
  line-height: 1.25;
  text-align: center;
  color: #fbba15;
}

.item-card .inner .statsItem .priceWrapper .priceValue .subValue {
  font-size: 0.75em;
  line-height: 1.25;
  color: #d1d1d1;
}

.item-card .inner .heroLabel {
  position: absolute;
  top: 5%;
  right: 6%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.item-card .inner .heroLabel .trophy {
  margin-top: 0.375em;
}

.hero-trophy {
  display: flex;

  width: 3.5em;
  height: 3.5em;
}
.hero-trophy.small {
  width: 2.3125em;
  height: 2.3125em;
}

.hero-level {
  position: relative;
  z-index: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 3.875em;
  height: 3.53em;
  margin-bottom: 1em;
}
.hero-level .logo {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.hero-level .level {
  display: flex;
  font-size: 0.625em;
  color: #cb46ec;
}
.hero-level .value {
  display: flex;
  font-weight: bold;
  font-size: 1.75em;
  color: white;
}
.hero-level.small {
  width: 2.5em;
  height: 2.5em;
  margin-top: 0.2em;
  margin-bottom: 0;
}
.hero-level.small .level {
  font-size: 0.375em;
  font-weight: bold;
  margin-top: 0.25em;
}
.hero-level.small .value {
  font-size: 1.125em;
}

.hero-class {
  width: 3.3em;
  height: 4.375em;
  border-radius: 4px;
  background-color: #644fc9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.hero-class .imgClass {
  height: calc(100% - 1.125em);
  display: flex;
  align-items: center;
}
.hero-class .imgClass img {
  max-width: 2.25em;
  max-height: 2.75em;
}
.hero-class .heroClassName {
  margin: 0;
  height: 1.875em;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 0.6em;
  line-height: 1.875;
  color: white;
  background-color: #1f144e;
  border-radius: 0 0 4px 4px;
}
.hero-class.small {
  width: 2.06em;
  height: 2.06em;
  border-radius: 100%;
  background-color: #261e59;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}
.hero-class.small .imgClass img {
  max-width: 1.125em;
  max-height: 1.125em;
}
.statsItem {
  box-sizing: border-box;

  width: 100%;
  height: 24.7%;
  background: #1b1444;
  border-radius: 0 0 0.5em 0.5em;
  display: flex;
  flex-direction: column;
  padding: 0.375em 1.125em;
}
.statsItem .label {
  font-size: 0.75em;
  line-height: 1.25;
  color: #ffffff;
}
.statsItem .battleWrapper {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  display: flex;
}

.statsItem .battleWrapper .value {
  font-weight: bold;
  font-size: 1em;
  line-height: 1.25;
  color: #ffffff;
}

.statsItem .battleWrapper .value.red {
  color: #d80000;
}
.statsItem .battleWrapper .value.yellow {
  color: #feca2e;
}
.statsItem .battleWrapper .value.green {
  color: #0dc900;
}

</style>