.popularityBlock {
  .popularityItem {
    display: inline-flex;
    width: 240px;
    height: 190px;
    padding: 12px;
    margin: 10px 0;
    border-radius: 12px;
    border: 0.5px solid #00000026;
    background: #fff;
    position: relative;
    overflow: hidden;
    .rank {
      position: absolute;
      left: 0;
      top: 0;
      width: 30px;
      height: 26px;
      color: #fff;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0BAMAAAAkgUYsAAAAMFBMVEUAAADl6u/m6/Dn5+/k6u/f3+/m7PDm6/Dm6/Dk6u/m6vDm6/Dl7PHn7O/m6e/m6/BkC3YCAAAAD3RSTlMAgO8gYBDfz7+Q36+fYFAHYRw+AAAAX0lEQVQ4y+3JsRFAQBCG0b+ETa4CCrgSlKAPiYb0pgV7hmPMEAl9sWBf+nSj6OjoH/fGXbkP7pW7cI/cHXfGvoRduA37FHbDPWMvwjbsVtR7pnYTtCdB16TP9mHq330Awa3V2M08HJwAAAAASUVORK5CYII=');
      &.reds {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0BAMAAAAkgUYsAAAAMFBMVEUAAAD1Pz/3QED0QED1QEDzQED/QED1Pz/2Pz/2QED0QED2Pz/1Pz/1Pz/1QED1Pz85h+PuAAAAD3RSTlMA7yBggIAQ38+/kN+vn1A2xjdKAAAAYElEQVQ4y+3JsRFAQBRF0VcDDWwJStgSRBsrRKAXjWnhLzMsY4iEbrzBP+nRg7y9vSvunbtwn9wrd+aeuDvugH0LO3NH7EvYDfeCvQk7YreiPgK19YK2JOiS9Ns2zsO3LyOg1uNsC/YFAAAAAElFTkSuQmCC');
      }
      &.oranges {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0BAMAAAAkgUYsAAAAKlBMVEUAAAD/fQD/fgD/gAD/fQD/fQD/gAD/fgD/fQD/fAD/fQD/fQD/fAD/fQCIV/kxAAAADXRSTlMAgO8gYN8Qz7+Qr59QEmA1vwAAAF9JREFUOMvtyTERgDAQRcEv4aoYAAGRgA4qJCAGQVjgQoYwDF6oKHk1xW27ulF0dPSPu3I37pN75y7cM/fAnbEvYRduw67C7rhX7E3Yht2L+sjUboL2JOiW9Nk+LtO7DxiJDxVGuwyHAAAAAElFTkSuQmCC');
      }
      &.yellows {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0BAMAAAAkgUYsAAAALVBMVEUAAAD2uR72ux/3tyD3uh7/ryD3uh/3uh/2uR73uiD3uR32ux/5uh75uR33uh6RrIgTAAAADnRSTlMAgO8g3xDPv5BgYK+fUDGa7xgAAABfSURBVDjL7cmhEYAwEEXBX8KZVIBDpQ8MJVAPitJogUuGwAxDDSgkTyNu7epG0dHRP+7K3bgP7pO7cE/cC3fGvoRduA27CrvjXrE3YRt2L+o9U7sJ2pOgW9Jn+zCP7z5fmHKKXz+u0QAAAABJRU5ErkJggg==');
      }
    }
    .avatarContainer {
      .avatar {
        width: 56px;
        height: 56px;
      }
    }
    .tag {
      display: flex !important;

      padding: 0 4px;
      border-radius: 4px;
      background: #0d3b800a;

      color: #707680;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;

      min-width: 50px;
      max-width: 80px;
    }
    .renderRightTop {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
    }

    .infoBlock {
      .autoFlex {
        flex: 1 1 auto;
        min-width: 10px;
        max-width: 60%;
      }
    }
    .renderRightBottom {
      display: none;
    }

    &:hover {
      background: #f7fafc;
      transform: translateY(-2px);
      box-shadow: 0 6px 10px 0 #2a3c4f1a;

      .infoBlock {
        display: none;
      }
      .renderRightBottom {
        display: flex;
      }
    }
  }

  .carouselCardIcon {
    height: 100%;
    width: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    :global {
      .anticon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        border: 1px solid var(--beyond-color-border);
        background-color: #fff;
        cursor: pointer;
      }
    }
  }

  .carouselCardIconLeft {
    .carouselCardIcon;
    left: 0;
    // width: calc(52px + @offsetLeft);
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    :global {
      .anticon {
        margin-left: 8px;
      }
    }
  }

  .carouselCardIconRight {
    .carouselCardIcon;
    right: 0;
    justify-content: flex-end;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    :global {
      .anticon {
        margin-right: 8px;
      }
    }
  }
}
