.hr { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
.hr-frame { margin: 32px auto 44px; max-width: 760px; text-align: center; background: #FFFDF8; padding: 44px 46px; border: 12px solid #E7D3C8; outline: 2px solid #CDB2A4; outline-offset: -22px; box-shadow: 0 18px 34px rgba(46,34,39,.12); }
.hr-kicker { font: 800 12px/1 var(--ln-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ln-rose); }
.hr-frame p:last-child { font: 400 19px/1.5 var(--ln-serif); color: var(--ln-plum); margin: 0; }
.hr-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; counter-reset: hr; }
.hr-tile { counter-increment: hr; background: #fff; border-radius: 14px; padding: 26px 26px 22px 80px; position: relative; border: 2px dashed #EACBD3; }
.hr-tile::before { content: counter(hr, upper-roman); position: absolute; left: 22px; top: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--ln-blush); color: var(--ln-rose-deep); display: grid; place-items: center; font: 400 17px/1 var(--ln-serif); }
.hr-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hr-tile h2 { font-size: 20px; margin-bottom: 8px; }
.hr-tile p { margin: 0; color: var(--ln-mute); font-size: 15px; }
.hr-date { font-size: 13px; color: var(--ln-mute); margin-top: 24px; text-align: center; }
@media (max-width: 760px) {
  .hr { padding: 0 16px; }
  .hr-frame { padding: 34px 22px; border-width: 8px; outline-offset: -16px; }
  .hr-tiles { grid-template-columns: 1fr; }
  .hr-tile { padding: 22px 20px 20px 70px; }
}