:root {
  --comments-background-color: #e9e9f2;
  --comments-border-color: #babad3;
  --comments-form-background-color: #f8f9fa;
}

.field--comment {
  box-shadow: 0 0 0 100vmax var(--comments-background-color);
  -webkit-clip-path: inset(0 -100vmax);
          clip-path: inset(0 -100vmax);
  margin-top: 3rem;
  background-color: var(--comments-background-color);
  padding: 5rem 0;
}
.field--comment > h2 {
  margin-block: 0 4rem;
  text-align: center;
  position: relative;
}
.field--comment > h2:not(.nav-link) {
  padding-bottom: 1rem;
}
.field--comment > h2::before {
  content: "";
  position: absolute;
  width: 1.3em;
  height: 2px;
  left: 50%;
  bottom: 2px;
  background-color: var(--beo-primary);
  margin-left: -0.65em;
}
.field--comment > h2.hover::before {
  transition: all 0.2s ease-in-out;
  transform: scale(0);
}
.field--comment > h2.hover:hover::before {
  visibility: visible;
  background-color: currentcolor;
  transform: scale(1);
}
.text-white .field--comment > h2::before {
  background-color: currentcolor;
}
.field--comment .comment {
  border-bottom: 1px solid var(--comments-border-color);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.field--comment .comment + h2 {
  margin-top: 5rem;
}
.field--comment .field--name-comment-body {
  font-weight: 700;
}
.field--comment footer {
  margin-bottom: 1.5rem;
}
.field--comment footer p {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .field--comment footer {
    display: flex;
  }
}
.field--comment .comment__permalink {
  margin-left: auto;
  font-size: 0.875rem;
  color: #6c757d;
}
.field--comment .links {
  margin-top: 2rem;
}
.field--comment .comment-form {
  background-color: var(--comments-form-background-color);
  padding: 2rem;
}
.field--comment .editor.form-select {
  width: auto;
}
