:root{--bg:#06142d;--card:#0a2853;--line:#245187;--cyan:#42bfff;--blue:#087cff;--white:#f5f8ff;--muted:#98acc9;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}/* overflow-x стоит на body всех остальных страниц сайта, здесь его забыли —
   и блог оказался единственной страницей без страховки. Замер на экране
   360 px: первый экран уходил вправо на 6 px и страницу можно было утащить
   вбок пальцем. */
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--white);font:15px/1.55 Inter,Arial,sans-serif}body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 84% 12%,rgba(0,132,255,.14),transparent 28%),linear-gradient(rgba(65,194,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(65,194,255,.035) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}.header{height:82px;padding:0 max(28px,calc((100vw - var(--max))/2 + 28px));display:flex;align-items:center;gap:24px;position:sticky;top:0;background:rgba(6,20,45,.88);border-bottom:1px solid rgba(83,151,218,.2);backdrop-filter:blur(18px)}.brand img{width:110px;height:52px;object-fit:contain}.phone{font-weight:900}.menu{display:none}.reading-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:130;background:rgba(255,255,255,.04)}.reading-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan))}.articles-hero{max-width:var(--max);margin:auto;padding:90px 28px 62px;display:grid;grid-template-columns:.86fr 1.14fr;gap:55px;align-items:center}.articles-hero h1{font-size:clamp(58px,7.2vw,100px);line-height:.88;letter-spacing:-.065em;margin:22px 0}.articles-hero p{max-width:530px;color:var(--muted);font-size:18px}.eyebrow{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.hero-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.hero-facts span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:#91a8c7;font-size:10px}.hero-facts b{color:#fff;font-size:13px}.hero-showcase{position:relative;height:440px;border:1px solid #2d679e;border-radius:27px;overflow:hidden;background:#0b2853;box-shadow:0 35px 80px rgba(0,0,0,.28)}.hero-showcase>img{width:100%;height:100%;object-fit:cover;transition:opacity .28s,transform .65s}.hero-showcase:hover>img{transform:scale(1.035)}.hero-showcase.is-changing>img{opacity:.18;transform:scale(1.07)}.showcase-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,14,32,.97),rgba(2,14,32,.05) 72%)}.showcase-number{position:absolute;left:22px;top:20px;padding:7px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(5,25,55,.65);font-size:9px;font-weight:800;letter-spacing:.12em;backdrop-filter:blur(8px)}.showcase-copy{position:absolute;left:30px;right:85px;bottom:27px}.showcase-copy>span{color:var(--cyan);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.showcase-copy h2{max-width:570px;margin:7px 0 18px;font-size:clamp(29px,3.3vw,46px);line-height:.95;letter-spacing:-.045em}.showcase-copy a{display:inline-flex;gap:11px;align-items:center;font-size:11px;font-weight:900}.showcase-copy a i{display:grid;width:27px;height:27px;place-items:center;border-radius:50%;background:#0e82f6;font-style:normal;transition:.25s}.showcase-copy a:hover i{transform:translate(3px,-3px)}.showcase-next{position:absolute;right:22px;bottom:24px;width:47px;height:47px;border:1px solid #4d7cab;border-radius:50%;background:rgba(7,31,66,.78);color:#fff;font-size:20px;cursor:pointer;transition:.25s}.showcase-next:hover{background:var(--blue);transform:rotate(-25deg)}.knowledge-directions{max-width:var(--max);margin:0 auto 48px;padding:0 28px}.knowledge-directions>header{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:22px}.knowledge-directions h2{margin:8px 0 0;font-size:38px;letter-spacing:-.04em}.knowledge-directions header>p{max-width:410px;margin:0;color:var(--muted);font-size:12px}.direction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.direction-card{position:relative;min-height:112px;padding:16px 39px 15px 16px;display:grid;grid-template-columns:27px 1fr;text-align:left;border:1px solid var(--line);border-radius:15px;background:rgba(8,31,66,.82);color:var(--muted);cursor:pointer;transition:.25s}.direction-card:hover,.direction-card.active{border-color:#42bfff;background:#0d3568;color:#fff;transform:translateY(-3px)}.direction-card>span{grid-row:1/3;color:var(--cyan);font-size:9px;font-weight:900}.direction-card b,.direction-card small{display:block}.direction-card b{font-size:14px}.direction-card small{font-size:9px;color:#879dbc;line-height:1.35}.direction-card i{position:absolute;right:14px;top:14px;color:#4b82bb;font-style:normal;transition:.25s}.direction-card:hover i,.direction-card.active i{color:#fff;transform:translate(2px,-2px)}.article-tabs{max-width:var(--max);margin:0 auto 22px;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:sticky;top:94px;z-index:20}.article-tab{min-height:86px;padding:16px;display:grid;grid-template-columns:30px 1fr;text-align:left;border:1px solid var(--line);border-radius:16px;background:rgba(8,31,66,.9);color:var(--muted);cursor:pointer;backdrop-filter:blur(15px);transition:.2s}.article-tab:hover,.article-tab.active{border-color:var(--cyan);background:#0d3568;color:#fff;transform:translateY(-2px)}.article-tab span{grid-row:1/3;color:var(--cyan);font-size:10px;font-weight:900}.article-tab b,.article-tab small{display:block}.article-tab b{font-size:15px}.article-tab small{font-size:10px;color:#8198b8}.article-panel{max-width:var(--max);margin:auto;padding:0 28px 80px}.article-panel[hidden]{display:none}.article-cover{height:540px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px}.article-cover>img{width:100%;height:100%;object-fit:cover}.room-cover>img{object-fit:contain;background:linear-gradient(135deg,#091b34,#102d54)}.cover-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,14,31,.98),rgba(3,14,31,.08) 75%)}.cover-copy{max-width:780px;position:absolute;left:46px;bottom:42px}.cover-copy span{color:var(--cyan);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.cover-copy h2{font-size:clamp(40px,5.3vw,70px);line-height:.95;letter-spacing:-.05em;margin:10px 0}.cover-copy p{max-width:650px;margin:0;color:#b1c1d8;font-size:16px}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:42px;padding:65px 25px}.article-content{max-width:790px}.article-content h3{font-size:32px;letter-spacing:-.03em;margin:0 0 15px}.article-content>p{color:var(--muted);font-size:17px;margin:0 0 45px}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:55px}.insight-grid div{padding:22px;border:1px solid var(--line);border-radius:16px;background:#09234a}.insight-grid b,.insight-grid span{display:block}.insight-grid b{font-size:18px}.insight-grid span{margin-top:7px;color:var(--muted);font-size:11px}.article-aside{height:max-content;position:sticky;top:205px;padding:25px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#0d3569,#082249)}.article-aside span{color:var(--cyan);font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:900}.article-aside b{display:block;margin:9px 0;font-size:20px;line-height:1.25}.article-aside p{margin:0;color:var(--muted);font-size:11px}.article-action{min-height:58px;padding:0 22px;display:inline-flex;align-items:center;gap:24px;border:1px solid #3370ac;border-radius:999px;background:#0a2a57;font-weight:900;transition:.2s}.article-action:hover{background:var(--blue);transform:translateY(-2px)}.step-list{list-style:none;padding:0;margin:0 0 45px;counter-reset:steps}.step-list li{counter-increment:steps;padding:19px 0 19px 48px;position:relative;border-bottom:1px solid var(--line)}.step-list li:before{content:"0" counter(steps);position:absolute;left:0;top:19px;color:var(--cyan);font-size:10px;font-weight:900}.step-list b,.step-list span{display:block}.step-list span{color:var(--muted);font-size:12px}.interactive-box{margin:10px 0 38px;padding:26px;border:1px solid var(--line);border-radius:20px;background:#09234a}.interactive-label{display:block;margin-bottom:16px;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.selector-buttons{display:flex;gap:8px;flex-wrap:wrap}.selector-buttons button{padding:10px 15px;border:1px solid #315e91;border-radius:999px;background:transparent;color:#9db1cc;cursor:pointer;font-weight:800}.selector-buttons button:hover,.selector-buttons button.active{background:var(--blue);border-color:var(--blue);color:#fff}.selector-result{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.selector-result span,.selector-result strong,.selector-result small{display:block}.selector-result span,.selector-result small{color:var(--muted);font-size:10px}.selector-result strong{font-size:38px;letter-spacing:-.04em}.requirements-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.requirements-grid div{padding:16px;border:1px solid #285789;border-radius:13px;background:#071c3c}.requirements-grid span,.requirements-grid b{display:block}.requirements-grid span{color:var(--muted);font-size:9px}.requirements-grid b{margin-top:4px;font-size:15px}.articles-footer-cta{max-width:calc(var(--max) - 56px);margin:0 auto 70px;padding:45px;display:flex;justify-content:space-between;align-items:center;gap:30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(110deg,#10376e,#09234b)}.articles-footer-cta span{color:var(--cyan);font-size:10px;text-transform:uppercase;font-weight:900}.articles-footer-cta h2{font-size:42px;margin:6px 0}.articles-footer-cta>a{padding:16px 22px;border-radius:999px;background:var(--blue);font-weight:900}.articles-footer-cta i{margin-left:18px;font-style:normal}footer{max-width:var(--max);margin:auto;padding:42px 28px;display:grid;grid-template-columns:150px 1fr auto;gap:25px;align-items:center;border-top:1px solid var(--line);color:var(--muted);font-size:12px}footer img{width:110px}footer a{color:#fff;font-weight:800}@media(max-width:980px){.articles-hero{grid-template-columns:minmax(0,1fr);gap:35px}.hero-showcase{height:430px}.direction-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.article-tabs{top:82px}.article-layout{grid-template-columns:1fr}.article-aside{position:static}.article-cover{height:480px}.insight-grid{grid-template-columns:1fr}.requirements-grid{grid-template-columns:1fr 1fr}.articles-footer-cta{margin-inline:18px}.menu{display:block}.knowledge-directions>header{display:block}.knowledge-directions header>p{margin-top:10px}}@media(max-width:560px){.articles-hero{padding:68px 18px 45px}.articles-hero h1{font-size:clamp(42px,14vw,58px)}.hero-showcase{height:390px}.showcase-copy{left:21px;right:65px}.showcase-copy h2{font-size:32px}.showcase-next{right:14px;bottom:18px;width:40px;height:40px}.knowledge-directions{padding:0 14px}.direction-grid{grid-template-columns:1fr}.direction-card{min-height:88px}.article-tabs{padding-inline:14px;gap:6px}.article-tab{min-height:70px;padding:11px;grid-template-columns:22px 1fr}.article-tab small{display:none}.article-panel{padding-inline:14px}.article-cover{height:430px}.cover-copy{left:22px;right:22px;bottom:25px}.cover-copy h2{font-size:39px}.article-layout{padding:45px 8px;gap:25px}.requirements-grid{grid-template-columns:1fr}.articles-footer-cta{padding:28px;align-items:flex-start;flex-direction:column}footer{grid-template-columns:1fr}footer img{width:100px}}@media(prefers-reduced-motion:reduce){.hero-showcase>img{transition:none}.direction-card{transition:none}}

/* Compact category filter + article cards */
.article-tabs,.article-panel{display:none!important}.knowledge-directions{margin-bottom:38px}.knowledge-directions>header{margin-bottom:15px}.knowledge-directions h2{font-size:32px}.direction-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.direction-card{min-height:56px;padding:10px;display:flex;align-items:center;gap:8px;border-radius:12px}.direction-card>span{grid-row:auto;flex:0 0 auto}.direction-card b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article-library{max-width:var(--max);margin:0 auto 80px;padding:0 28px}.article-library>header{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:22px}.article-library h2{margin:8px 0 0;font-size:42px;line-height:1;letter-spacing:-.045em}.show-all-articles{border:1px solid var(--line);border-radius:999px;padding:10px 15px;background:#09234a;color:#fff;font-weight:800;cursor:pointer}.show-all-articles[hidden]{display:none}.article-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.article-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,#0c2b58,#071c3d);transition:.3s}.article-card[hidden]{display:none}.article-card:hover{transform:translateY(-5px);border-color:#3b8cda;box-shadow:0 22px 50px rgba(0,0,0,.25)}.article-card>img{width:100%;height:210px;object-fit:cover;transition:transform .55s}.article-card:hover>img{transform:scale(1.04)}.article-card-copy{padding:20px}.article-card-copy>span{color:var(--cyan);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.article-card-copy h3{min-height:52px;margin:7px 0;font-size:23px;line-height:1.08;letter-spacing:-.03em}.article-card-copy p{min-height:40px;margin:0 0 18px;color:var(--muted);font-size:11px}.article-card-copy button,.article-card-copy a{display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;color:#fff;padding:0;font-weight:900;font-size:11px;cursor:pointer}.article-card-copy i{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:#0c80f5;font-style:normal;transition:.25s}.article-card-copy button:hover i,.article-card-copy a:hover i{transform:translate(3px,-3px)}.summary-dialog{width:min(620px,calc(100% - 30px));padding:34px;border:1px solid #316499;border-radius:23px;background:#0a2853;color:#fff;box-shadow:0 35px 110px #000}.summary-dialog::backdrop{background:rgba(0,8,20,.8);backdrop-filter:blur(7px)}.summary-dialog-close{position:absolute;right:17px;top:14px;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.summary-dialog h2{margin:11px 0;font-size:42px;line-height:1;letter-spacing:-.045em}.summary-dialog>p{color:var(--muted)}.summary-points{display:grid;gap:8px;margin:22px 0}.summary-points div{padding:13px 15px;border:1px solid var(--line);border-radius:12px;color:#b9c8dc;font-size:12px}.summary-points b{display:inline-block;min-width:28px;color:var(--cyan)}.summary-action{display:inline-flex;align-items:center;gap:18px;padding:13px 17px;border-radius:999px;background:var(--blue);font-weight:900;font-size:12px}.summary-action i{font-style:normal}@media(max-width:1040px){.direction-grid{grid-template-columns:repeat(4,1fr)}.article-card-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.direction-grid{grid-template-columns:repeat(2,1fr)}.article-card-grid{grid-template-columns:1fr}.article-card>img{height:230px}.article-card-copy h3,.article-card-copy p{min-height:0}.article-library{padding:0 14px}.summary-dialog{padding:28px 20px}.summary-dialog h2{font-size:35px}}

/* fay63 · вся карточка статьи — кликабельная. Раньше нажатие срабатывало только
   по строке «Читать статью»: человек тыкал в фотографию или в заголовок, ничего
   не происходило, и он уходил. Делаем «растянутую ссылку»: сама ссылка остаётся
   одна на карточку (так её и читают поиск и скринридер), но её псевдоэлемент
   накрывает карточку целиком. У всех двадцати карточек ровно по одной ссылке —
   вложенных кликабельных областей, которые бы конфликтовали, тут нет. */
.article-card{position:relative;cursor:pointer}
.article-card > .article-card-copy > a::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
/* подсветка всей карточки при наведении — чтобы было видно, что она кликабельна */
.article-card:hover{transform:translateY(-3px)}
.article-card{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
/* Шапка блога на узких экранах вылезала на 6px вправо. Две причины сразу.
   Первая: колонка сетки была задана как 1fr, а 1fr — это minmax(auto,1fr),
   то есть дорожка не может стать уже своего содержимого. Заменено на
   minmax(0,1fr) — теперь может.
   Вторая: слово «Разобраться» в H1 при жёстких 58px занимает 333px, а между
   отступами помещается 309. Одного minmax мало — слово просто срезалось бы.
   Поэтому размер сделан текучим: clamp(42px,14vw,58px). На 360px это ~50px
   (слово ~289px), на 320px — ~45px. Верхняя граница прежняя, на планшетах
   и широких телефонах заголовок выглядит как раньше. */
/* ============================================================================
   fay65 · Блог: хлебные крошки и боковая колонка

   До этого страница блога была одной вертикальной лентой: шапка, плитка тем,
   двадцать карточек подряд. Человек не видел, где находится, не мог сузить
   выборку и нигде по дороге не встречал предложения — читал и уходил.
   ========================================================================== */

/* Шапка сайта — position:fixed, и отступ под неё держал hero своим
   padding-top. Крошки встали ВЫШЕ героя и оказались ровно под шапкой:
   на телефоне они наезжали на логотип. Поэтому отступ под шапку теперь
   держат крошки, а героя от него освобождаем — иначе пустота удвоится.
   Селектор из двух классов бьёт .articles-hero во всех медиазапросах,
   так что переопределять их по одному не нужно. */
.blog-crumbs{
  max-width:var(--max);margin:0 auto;padding:96px 28px 0;
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.02em}
.blog-crumbs + .articles-hero{padding-top:14px}
.blog-crumbs a{color:var(--muted);text-decoration:none;transition:color .18s ease}
.blog-crumbs a:hover,.blog-crumbs a:focus-visible{color:#fff}
.blog-crumbs span{color:#3f5f8d}
.blog-crumbs b{color:#fff;font-weight:800}

/* Колонка фиксированной ширины, лента статей — на остатке. minmax(0,1fr)
   обязателен: обычная 1fr не даёт дорожке стать уже содержимого, и сетка
   карточек выдавливала бы страницу вправо. */
.blog-layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:26px;align-items:start}
.blog-side{position:sticky;top:96px;display:grid;gap:14px;min-width:0}

.side-block{
  border:1px solid var(--line);border-radius:18px;padding:18px 17px;
  background:linear-gradient(160deg,#0c2b58,#071c3d)}
.side-block h3{margin:0 0 12px;font-size:15px;font-weight:900;letter-spacing:-.01em}
.side-block>p{margin:0 0 13px;color:var(--muted);font-size:12px;line-height:1.5}

.side-filters{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.side-filter{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border:0;border-radius:11px;background:transparent;
  color:#c3d4ea;font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer;
  transition:background .16s ease,color .16s ease}
.side-filter em{
  flex:0 0 auto;min-width:24px;padding:2px 7px;border-radius:999px;
  background:rgba(12,128,245,.14);color:#7fb4ea;
  font-style:normal;font-size:11px;font-weight:800;text-align:center;
  font-variant-numeric:tabular-nums;transition:background .16s ease,color .16s ease}
.side-filter:hover{background:rgba(12,128,245,.12);color:#fff}
.side-filter.is-active{background:var(--blue);color:#fff}
.side-filter.is-active em{background:rgba(255,255,255,.22);color:#fff}
.side-filters li[hidden]{display:none}

/* Нумерация шагов — не украшение: порядок здесь несёт смысл, это
   последовательность вопросов, которые человек задаёт себе сам. */
.side-steps{display:grid;gap:3px;margin:0;padding:0;list-style:none;counter-reset:step}
.side-steps a{
  display:grid;gap:2px;padding:9px 11px 9px 34px;position:relative;
  border-radius:11px;text-decoration:none;transition:background .16s ease}
.side-steps a::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:11px;top:10px;
  color:var(--cyan);font-size:11px;font-weight:900;font-variant-numeric:tabular-nums}
.side-steps a:hover,.side-steps a:focus-visible{background:rgba(12,128,245,.12)}
.side-steps b{color:#fff;font-size:13px;font-weight:800;line-height:1.25}
.side-steps small{color:var(--muted);font-size:11px;line-height:1.4}

.side-offer{background:linear-gradient(155deg,#123a72,#0a2247);border-color:#2f6099}
.side-offer-kicker{
  display:block;margin-bottom:7px;color:var(--cyan);
  font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}
.side-offer>b{display:block;margin-bottom:8px;font-size:19px;line-height:1.12;letter-spacing:-.03em}
.side-offer>p{margin:0 0 14px;color:#b9cbe4;font-size:12px;line-height:1.5}
.side-offer-btn{
  display:block;padding:11px 14px;border-radius:12px;background:var(--blue);
  color:#fff;font-size:12.5px;font-weight:900;text-align:center;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease}
.side-offer-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(12,128,245,.9)}
a.side-offer-alt{
  display:block;margin-top:9px;color:#9fb8d6;font-size:11.5px;font-weight:700;
  text-align:center;text-decoration:none;transition:color .16s ease}
a.side-offer-alt:hover{color:#fff}
.side-offer-alt-block{background:linear-gradient(155deg,#0f3358,#08203f)}

/* Сколько материалов показано сейчас — иначе после фильтра непонятно,
   всё ли это или лента просто оборвалась. */
#libraryTitle[data-count]::after{
  content:attr(data-count);display:block;margin-top:6px;
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:0}

@media(max-width:1040px){
  /* В одну колонку липкая боковая панель просто закрыла бы собой ленту,
     поэтому sticky снимаем. И раскрываем aside через display:contents:
     иначе все четыре блока колонки встали бы ВЫШЕ статей, и человек на
     телефоне пролистал бы два экрана предложений, не увидев ни одной
     статьи. Порядок становится честным: разделы → статьи → путь → оффер.
     Список разделов не теряет доступное имя: у него aria-labelledby
     на собственный заголовок, а не на пропадающий aside. */
  .blog-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .blog-side{display:contents}
  .blog-layout>.blog-side>.side-block{order:3}
  .blog-layout>.blog-side>.side-block:first-child{order:1}
  .blog-layout>.article-card-grid{order:2}
  .blog-layout>.blog-side>.side-offer{order:4}
  .side-filters{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media(max-width:620px){
  .blog-crumbs{padding:86px 14px 0}
  .blog-crumbs + .articles-hero{padding-top:10px}
}
@media(prefers-reduced-motion:reduce){
  .side-filter,.side-steps a,.side-offer-btn{transition:none}
  .side-offer-btn:hover{transform:none}
}