.component.comments-rating{
  margin:4rem 0;
}

.rating{
  align-items:center;
  display:flex;
  flex-direction:row;
  gap:.5rem;
}

.rating input{
  display:none;
}

.rating label{
  background-image:url(../assets/images/star.svg);
  background-position:50%;
  background-repeat:no-repeat;
  background-size:contain;
  cursor:pointer;
  display:inline-block;
  height:30px;
  transition:.5s;
  width:30px;
}
@media screen and (min-width:768px){
  .rating label{
    height:35px;
    width:35px;
  }
}
@media screen and (min-width:1200px){
  .rating label{
    gap:1rem;
    height:50px;
    width:50px;
  }
}

.rating input:checked~label{
  filter:grayscale(1);
}

.comments-rating__content{
  background-color:#f4f8fd;
  border-radius:.625rem;
  display:grid;
  grid-template-columns:1fr;
  padding:20px;
  row-gap:20px;
}
@media screen and (min-width:768px){
  .comments-rating__content{
    grid-template-columns:1fr 1fr;
  }
}
@media screen and (min-width:1200px){
  .comments-rating__content{
    padding:30px;
  }
}

.comments-rating__values{
  align-items:baseline;
  display:flex;
  flex-direction:row;
}
@media screen and (min-width:1200px){
  .comments-rating__values{
    align-items:center;
    justify-content:center;
  }
}

.comments-rating__info{
  font-family:var(--font-medium);
}

.comments-rating__info-title{
  font-size:18px;
  margin-bottom:.5rem;
}
@media screen and (min-width:768px){
  .comments-rating__info-title{
    font-size:22px;
  }
}
@media screen and (min-width:1200px){
  .comments-rating__info-title{
    font-size:32px;
  }
}

.comments-rating__info-total{
  font-size:16px;
}
@media screen and (min-width:768px){
  .comments-rating__info-total{
    font-size:18px;
  }
}
@media screen and (min-width:1200px){
  .comments-rating__info-total{
    font-size:22px;
  }
}

.comments-rating__info-action{
  font-size:14px;
}
@media screen and (min-width:768px){
  .comments-rating__info-action{
    font-size:14px;
  }
}
@media screen and (min-width:1200px){
  .comments-rating__info-action{
    font-size:18px;
  }
}
.comments-rating__info-action .comments-form__footer{
  padding:.5rem;
}