.comments-section {
  width: min(760px, calc(100% - 32px));
  margin: 72px auto 96px;
  padding-top: 32px;
  border-top: 1px solid currentColor;
}

.comments-title {
  margin: 0 0 28px;
  font-size: 1.15rem;
  font-weight: 500;
}

.comment-form {
  display: grid;
  gap: 18px;
  margin-bottom: 42px;
}

.comment-field {
  display: grid;
  gap: 7px;
}

.comment-field label {
  font-size: 0.86rem;
}

.comment-field input,
.comment-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.comment-field textarea {
  resize: vertical;
  min-height: 120px;
}

.comment-submit {
  justify-self: start;
  padding: 9px 18px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.comment-submit:hover,
.comment-submit:focus-visible {
  opacity: 0.65;
}

.comment-submit:disabled {
  cursor: wait;
  opacity: 0.45;
}

.comment-status,
.comment-count,
.comment-empty {
  margin: 0;
  font-size: 0.84rem;
  opacity: 0.7;
}

.comment-status:empty,
.comment-count:empty {
  display: none;
}

.comment-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.comment-list {
  margin-top: 16px;
}

.comment-item {
  padding: 20px 0;
  border-top: 1px solid currentColor;
}

.comment-item:last-child {
  border-bottom: 1px solid currentColor;
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}

.comment-name {
  font-weight: 500;
}

.comment-date {
  font-size: 0.78rem;
  opacity: 0.58;
}

.comment-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.8;
}

@media (max-width: 640px) {
  .comments-section {
    width: min(100% - 24px, 760px);
    margin-top: 52px;
    margin-bottom: 72px;
  }
}