.comments {
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  gap: 45px;
  width: 100%;
  max-width: 768px;
  clear: both;
  padding: 0px 15px;
}
.comments__bottom {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.comments__top {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.comments__title {
  font-family: "EB Garamond", serif;
  font-size: 30px;
  text-align: left;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .comments__title {
    font-size: 24px;
  }
}
.comments__message {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background-color: #efefef;
  width: 100%;
  padding: 6px 12px;
}
.comments__message_success {
  color: #fff;
  background-color: #1ba666;
  border-color: #198754;
}

.comments-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 15px 15px;
  grid-template-areas: "one two three" "four four four" "five five five";
}
@media (max-width: 768px) {
  .comments-form {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "one" "two" "three" "four" "five";
  }
}
.comments-form__col_1 {
  grid-area: one;
}
.comments-form__col_2 {
  grid-area: two;
}
.comments-form__col_3 {
  grid-area: three;
}
.comments-form__col_4 {
  grid-area: four;
}
.comments-form__col_5 {
  grid-area: five;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  gap: 15px;
}
@media (max-width: 768px) {
  .comments-form__col_5 {
    flex-direction: column;
    justify-content: center;
  }
}
.comments-form__input, .comments-form__textarea {
  width: 100%;
}
.comments-form__input {
  padding: 6px 12px;
  height: 40px;
}
.comments-form__textarea {
  padding: 20px;
}
.comments-form__btn {
  border: none;
  outline: none !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 700;
  transition: 0.3s all;
  background-color: #00bfaf;
  color: #fff;
  border-radius: 4px;
}
.comments-form__btn:hover {
  background-color: #019b8f;
}
.comments-form__btn:disabled {
  opacity: 0.5;
  cursor: no-drop;
}

.item-comments__info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 5px;
  gap: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f3f3f3;
}
.item-comments__user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.item-comments__icon {
  max-width: 48px;
}
.item-comments__icon img {
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
}
.item-comments__name {
  font-weight: bold;
  font-size: 18px;
}
.item-comments__data {
  font-size: 12px;
  color: #8F8F8F;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.item-comments__text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 140%;
}
@media (max-width: 768px) {
  .item-comments__text {
    font-size: 14px;
  }
}
.item-comments_admin {
  margin: 15px 0px 0px 30px;
}
.item-comments_admin .item-comments__name {
  font-weight: 900;
}

/*# sourceMappingURL=comments.css.map */