.stat-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap; }
  .stat-block__left, .stat-block__right {
    display: flex;
    align-items: center;
    gap: 10px; }
    @media (max-width: 599.75px) {
      .stat-block__left, .stat-block__right {
        gap: 5px; } }
  .stat-block__item {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #F8F8F8;
    border-radius: 100px;
    padding: 6px 10px;
    color: #4D4D4D;
    fill: #4D4D4D;
    font-size: 15px;
    transition: all ease .3s;
    line-height: 1; }
    .stat-block__item.active {
      fill: #8a6048;
      color: #8a6048; }
    @media (hover: hover) {
      .stat-block__item:hover {
        cursor: pointer;
        fill: #8a6048;
        color: #8a6048; } }
    @media (max-width: 599.75px) {
      .stat-block__item {
        font-size: 11px;
        gap: 2px;
        padding: 5px 7px; }
        .stat-block__item .icon {
          max-width: 16px;
          max-height: 16px; } }
    .stat-block__item--v2 .icon {
      transform: rotate(180deg); }
  .stat-block__right .stat-block__item {
    padding: 0;
    background-color: transparent;
    fill: #9B9EA7; }
    @media (hover: hover) {
      .stat-block__right .stat-block__item:hover {
        cursor: default;
        color: #4D4D4D; } }