.review_grid{
    display: grid;
    grid-template-areas:
      "HEAD HEAD"
      "LEFT RIGHT";
    gap: 16px;
    grid-template-columns: 320px auto;
  }
  .rev_head{
    grid-area:HEAD;
  }
  
  .rev_procent_grid{
    display:grid;
    grid-template-areas:
      "TEXT BAR PROCENT";
    grid-template-columns: 120px 120px 50px;
    font-size: var(--rd-fontsize-4);
    margin-bottom: var(--rd-spacing-x-sm);
    gap: var(--rd-spacing-x-sm);
    cursor: pointer;
  }
  .rev_procent_grid:hover{
    text-decoration:underline;
  }
  .rev_procent_grid .rev_procent_bar{
      background-color: var(--rd-input-default);
      position: relative;
  }
  .rev_procent_grid .rev_procent_bar_in{
    display: inline-block;
    height: 100%;
    background-color: var(--rd-primary-active);
  }
.star_img_background{
  position:relative;
    height: 100%;
  width: 100%;
}
.star_img_background:before{
  content:'';
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--rd-input-default);
  mask-size: 25px;
  -webkit-mask-size: 25px;
  mask-position: left;
  -webkit-mask-position:left;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: repeat;
  mask-image: url('/src/img/svg/af/feedback/star-fill.svg');
  -webkit-mask-image: url("/src/img/svg/af/feedback/star-fill.svg");
}
.star_img_background .star_img{
  display: block;
  position: absolute;
  height: 100%;
  /* width: 100%; */
  background-color: var(--rd-warning-default);
  mask-size: 25px;
  -webkit-mask-size: 25px;
  mask-position: left;
  -webkit-mask-position: left;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: repeat;
  mask-image: url('/src/img/svg/af/feedback/star-fill.svg');
  -webkit-mask-image: url("/src/img/svg/af/feedback/star-fill.svg");
}
.left_strs_grid{
  display: grid;
  grid-template-areas:
    "IMG TEXT";
  gap: 8px;
  margin-bottom: var(--rd-spacing-sm);
  grid-template-columns: 125px auto;
}