.pair { display: grid; grid-template-columns: minmax(0, 1fr) 280px; border-radius: 32px; background: var(--white); overflow: hidden; }
.ans { padding: 36px 38px; }
.ans h2 { margin-bottom: 22px; max-width: 26ch; }
.ans p { max-width: 65ch; }
.ev { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 32px 27px; background: #eeeaf7; border-left: 6px solid #e5def0; }
.ev .tag { color: #4f4361; }
.src { display: flex; align-items: center; min-height: 48px; padding-block: 10px; line-height: 1.5; font-size: 16px; overflow-wrap: anywhere; }
.yl { background: #fff9db; }
.yl .ev { background: var(--yellow); border-color: #f3e297; }
.hl { background: #fff2eb; }
.hl .ev { background: var(--rose); border-color: #ecc8b8; }
.hl .ans { border-left: 7px solid #b05c40; }
@media (max-width: 930px) {
  .pair { grid-template-columns: minmax(0, 1fr) 235px; }
  .ans { padding: 30px; }
  .ev { padding-inline: 24px; }
}
@media (max-width: 680px) {
  .pair { grid-template-columns: minmax(0, 1fr); border-radius: 28px; }
  .ans { padding: 25px 24px; }
  .ev { border-left: none; border-top: 5px solid #e5def0; padding: 20px 24px; gap: 7px; }
  .src { padding-block: 11px; }
}