@layer pages {
.hr{display:grid;grid-template-columns:320px 1fr;gap:48px;padding-block:6px 64px;align-items:start}
.hr-side{position:sticky;inset-block-start:170px;background:var(--od-blue);color:#e1eefa;border-radius:16px;padding:28px}
.hr-side h1{color:#fff;margin-block-end:12px}
.hr-side__date{font-size:.82rem;opacity:.8;margin-block:10px 18px}
.hr-side__short{background:rgba(255,255,255,.1);border-inline-start:4px solid var(--od-sun);padding:12px 14px;border-radius:6px;font-size:.92rem}
.hr-list{list-style:none;padding:0;margin:0;counter-reset:hr}
.hr-item{counter-increment:hr;display:grid;grid-template-columns:70px 1fr;column-gap:18px;padding-block:18px;border-block-end:1px solid var(--od-line)}
.hr-item::before{content:counter(hr,upper-alpha);grid-row:span 2;font-family:var(--od-cond);font-weight:800;font-size:2.6rem;color:var(--od-sky);line-height:1}
.hr-item h2{font-size:1.35rem;margin-block-end:4px}
.hr-item p{color:#34445a}
@media (max-width:860px){.hr{grid-template-columns:1fr}.hr-side{position:static}}
}