.rate {
  display: flex;
  align-items: center; }
  .rate .rated {
    font-weight: bold; }
  .rate.clickable .stars img:hover {
    cursor: pointer; }
  .rate .stars {
    display: flex;
    align-items: center; }
    .rate .stars img {
      width: 20px;
      height: auto;
      opacity: 0.3;
      transition: transform 0.2s; }
      .rate .stars img:not(:last-child) {
        margin-right: 5px; }
      .rate .stars img.active {
        opacity: 1 !important; }
      .rate .stars img.anim {
        transform: scale(1.2); }
  .rate.value1 .stars .n1 {
    opacity: 0.8; }
  .rate.value2 .stars .n1, .rate.value2 .stars .n2 {
    opacity: 0.8; }
  .rate.value3 .stars .n1, .rate.value3 .stars .n2, .rate.value3 .stars .n3 {
    opacity: 0.8; }
  .rate.value4 .stars .n1, .rate.value4 .stars .n2, .rate.value4 .stars .n3, .rate.value4 .stars .n4 {
    opacity: 0.8; }
  .rate.value5 .stars .n1, .rate.value5 .stars .n2, .rate.value5 .stars .n3, .rate.value5 .stars .n4, .rate.value5 .stars .n5 {
    opacity: 0.8; }