.article-comments {
  display: grid;
  margin-bottom: 40px;
  row-gap: 18px;
  line-height: 1.2;
}

.article-comments__title {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}

.article-comments__post {
  justify-self: center;
  width: min(434px, 100%);
  padding-block: 12px 13px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
  background-color: #404660;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}

.article-comment {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 16px 14px 18px;
  background-color: #EEE7DE;
  border-radius: 15px;
}

.article-comment:nth-child(2n+1) {
  background-color: #F8F9FA;
}

.article-comment__name {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
  font-size: 12px;
}

.article-comment__date {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 12px;
}

.article-comment__rating {
  grid-column: 1/-1;
}

.article-comment__body {
  grid-column: 1/-1;
  font-size: 14px;
}

.rating-block {
  display: flex;
  gap: 5px;
}

.rating-block__star {
  --gradient-stop: 0;
  width: 16px;
  height: 16px;
  background-image: linear-gradient(to right, #CCA571 var(--gradient-stop), #E7D9C6 var(--gradient-stop));
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuODA2MjEgMTQuOTMzOUw0Ljg0ODM1IDEwLjE5MTVMNC45MTAzMiA5LjkwOTUyTDQuNjk3MDUgOS43MTQ4OUwxLjE3NDMzIDYuNTAwMDRMNS44MDU1IDYuMDc2ODdMNi4xMTAwNSA2LjA0OTA0TDYuMjI0IDUuNzY1MjVMOCAxLjM0MTkzTDkuNzc2IDUuNzY1MjVMOS44ODk5NSA2LjA0OTA0TDEwLjE5NDUgNi4wNzY4N0wxNC44MjU3IDYuNTAwMDRMMTEuMzAzIDkuNzE0ODlMMTEuMDg5NyA5LjkwOTUyTDExLjE1MTcgMTAuMTkxNUwxMi4xOTM4IDE0LjkzMzlMOC4yNjgwMiAxMi40NDExTDggMTIuMjcwOUw3LjczMTk4IDEyLjQ0MTFMMy44MDYyMSAxNC45MzM5WiIgZmlsbD0iI0ZEQzkwMCIgc3Ryb2tlPSIjRkRDOTAwIi8+Cjwvc3ZnPgo=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuODA2MjEgMTQuOTMzOUw0Ljg0ODM1IDEwLjE5MTVMNC45MTAzMiA5LjkwOTUyTDQuNjk3MDUgOS43MTQ4OUwxLjE3NDMzIDYuNTAwMDRMNS44MDU1IDYuMDc2ODdMNi4xMTAwNSA2LjA0OTA0TDYuMjI0IDUuNzY1MjVMOCAxLjM0MTkzTDkuNzc2IDUuNzY1MjVMOS44ODk5NSA2LjA0OTA0TDEwLjE5NDUgNi4wNzY4N0wxNC44MjU3IDYuNTAwMDRMMTEuMzAzIDkuNzE0ODlMMTEuMDg5NyA5LjkwOTUyTDExLjE1MTcgMTAuMTkxNUwxMi4xOTM4IDE0LjkzMzlMOC4yNjgwMiAxMi40NDExTDggMTIuMjcwOUw3LjczMTk4IDEyLjQ0MTFMMy44MDYyMSAxNC45MzM5WiIgZmlsbD0iI0ZEQzkwMCIgc3Ryb2tlPSIjRkRDOTAwIi8+Cjwvc3ZnPgo=");
  mask-type: alpha;
}

.article-comments-modal {
  position: fixed;
  z-index: 2;
  inset: 0;
  display: none;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
  width: min(500px, 100%);
  height: -webkit-min-content;
  height: min-content;
  margin: auto;
  padding: 50px 30px 30px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 4px #f5f5f5;
}

.article-comments-modal--active {
  display: grid;
}

.article-comments-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNSAxLjI0MzE2TDkuNDk5OTMgMTAuMjQzMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGQ9Ik05LjUgMS4yNDMxNkwwLjUwMDA3NCAxMC4yNDMxIiBzdHJva2U9ImJsYWNrIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==");
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
}

.article-comments-modal__title {
  margin-bottom: 30px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
}

.article-comments-modal__textarea {
  height: 195px;
  margin-bottom: 20px;
  padding: 10px 20px;
  border: 1px solid #E5E5E5;
  border-radius: 15px;
  resize: none;
}

.article-comments-modal__submit {
  justify-self: center;
  width: 100%;
  margin-bottom: 24px;
  padding-block: 12px 13px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
  background-color: #404660;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}

.article-comments-modal__registration {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: underline;
  color: #646778;
}

@media (min-width: 770px) {
  .article-comments {
    row-gap: 30px;
  }

  .article-comments__title {
    margin-bottom: 30px;
    font-size: 40px;
  }

  .article-comments__post {
    font-size: 18px;
  }

  .article-comment {
    grid-template-columns: repeat(3, -webkit-max-content) 1fr;
    grid-template-columns: repeat(3, max-content) 1fr;
    gap: 30px 24px;
  }

  .article-comment__name {
    font-size: 14px;
  }

  .article-comment__date {
    grid-column: 3;
    font-size: 14px;
  }

  .article-comment__rating {
    grid-column: 2;
    grid-row: 1;
  }

  .article-comment__body {
    font-size: 16px;
  }

  .article-comments-modal__title {
    font-size: 25px;
  }

  .article-comments-modal__submit {
    font-size: 18px;
  }
}

@media (max-width: 769px) {
  .article-comment__rating {
    margin-block: 7px 16px;
  }
}

.article-comments-modal__rating {
  margin-bottom: 15px;
}

.article-comments-rating {
  display: flex;
}

.article-comments-rating__item {
  width: 16px;
  height: 16px;
  background-color: #E7D9C6;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuODA2MjEgMTQuOTMzOUw0Ljg0ODM1IDEwLjE5MTVMNC45MTAzMiA5LjkwOTUyTDQuNjk3MDUgOS43MTQ4OUwxLjE3NDMzIDYuNTAwMDRMNS44MDU1IDYuMDc2ODdMNi4xMTAwNSA2LjA0OTA0TDYuMjI0IDUuNzY1MjVMOCAxLjM0MTkzTDkuNzc2IDUuNzY1MjVMOS44ODk5NSA2LjA0OTA0TDEwLjE5NDUgNi4wNzY4N0wxNC44MjU3IDYuNTAwMDRMMTEuMzAzIDkuNzE0ODlMMTEuMDg5NyA5LjkwOTUyTDExLjE1MTcgMTAuMTkxNUwxMi4xOTM4IDE0LjkzMzlMOC4yNjgwMiAxMi40NDExTDggMTIuMjcwOUw3LjczMTk4IDEyLjQ0MTFMMy44MDYyMSAxNC45MzM5WiIgZmlsbD0iI0ZEQzkwMCIgc3Ryb2tlPSIjRkRDOTAwIi8+Cjwvc3ZnPgo=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuODA2MjEgMTQuOTMzOUw0Ljg0ODM1IDEwLjE5MTVMNC45MTAzMiA5LjkwOTUyTDQuNjk3MDUgOS43MTQ4OUwxLjE3NDMzIDYuNTAwMDRMNS44MDU1IDYuMDc2ODdMNi4xMTAwNSA2LjA0OTA0TDYuMjI0IDUuNzY1MjVMOCAxLjM0MTkzTDkuNzc2IDUuNzY1MjVMOS44ODk5NSA2LjA0OTA0TDEwLjE5NDUgNi4wNzY4N0wxNC44MjU3IDYuNTAwMDRMMTEuMzAzIDkuNzE0ODlMMTEuMDg5NyA5LjkwOTUyTDExLjE1MTcgMTAuMTkxNUwxMi4xOTM4IDE0LjkzMzlMOC4yNjgwMiAxMi40NDExTDggMTIuMjcwOUw3LjczMTk4IDEyLjQ0MTFMMy44MDYyMSAxNC45MzM5WiIgZmlsbD0iI0ZEQzkwMCIgc3Ryb2tlPSIjRkRDOTAwIi8+Cjwvc3ZnPgo=");
  mask-type: alpha;
  transition: background-color 0.1s;
}

.article-comments-rating__item:is(:hover,
:has(:checked),
:has(~ .article-comments-rating__item:hover)) {
  background-color: #CCA571;
}

.article-comments-rating:has(:checked) .article-comments-rating__item {
  background-color: #CCA571;
}

.article-comments-rating:has(:checked) .article-comments-rating__item:has(~ .article-comments-rating__item:hover) {
  background-color: #CCA571;
}

.article-comments-rating__item:has(:checked) ~ .article-comments-rating__item:not(:hover) {
  background-color: #E7D9C6;
}