/* Версія 3, коротка. Лягає поверх shrus.css і стилів версії 2 */

/* смуга з 3000+ на мобільній не потрібна, ці факти є в першому екрані на ПК і в блоці чому ми */
.mbul-sec{display:none}

/* симптоми, три колонки замість чотирьох, пояснень дрібним більше немає */
.symp-row{grid-template-columns:120px 1fr 1fr}
.symp-row .thumb{width:120px;height:84px}

/* ціни */
.brands-line{margin-top:18px;font-size:16.5px;color:var(--text-mute)}
.brands-line b{color:var(--text)}

/* шість фактів замість чотирьох блоків */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark)}
.fact{background:var(--ink);padding:24px 24px 26px}
.fact b{display:block;font-family:Archivo,sans-serif;font-weight:800;
  font-size:clamp(22px,2.2vw,28px);line-height:1.1;color:#fff;margin-bottom:8px}
.fact span{display:block;font-size:16.5px;line-height:1.5;color:var(--text-inv-mute)}

@media(max-width:820px){
  .symp-row{grid-template-columns:90px 1fr;gap:14px;padding:14px 20px}
  .symp-row .thumb{width:90px;height:66px}
  .symp-row .todo{grid-column:2}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:16px 14px 18px}
  .fact b{font-size:20px}
  .fact span{font-size:14.5px}
}

/* ПК компактніший. На широкому екрані секції мали відступи під 94 пікселі зверху і знизу */
@media(min-width:821px){
  section{padding:60px 0}
  .hero{padding:0}
  .sec-head{margin-bottom:32px}
  .symp-row{padding:14px 20px}
}