/* ═══════════════════════════════════════════════════════════════
   АДАПТИВ
   ═══════════════════════════════════════════════════════════════ */
.peek{display:none}
@media (max-width:1560px){
  .work{grid-template-columns:210px minmax(380px,440px) minmax(0,1fr)}
}
@media (max-width:1380px){
  .work{grid-template-columns:196px minmax(360px,410px) minmax(0,1fr)}
  .col-1{padding:14px 8px}
  .col-3{padding:16px 14px}
  #frame{zoom:.94}
  .drawer{width:380px}
  body.drawer-on .main{margin-right:380px}
  body.drawer-on .work{grid-template-columns:minmax(340px,380px) minmax(0,1fr)}
  body.drawer-on #frame{zoom:.76}
}
@media (max-width:1180px){
  .work{grid-template-columns:186px minmax(0,1fr)}
  .col-3{display:none}
  .peek{display:flex;position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:89}
  body.focus .col-3{display:flex}
  body.focus .peek{display:none}
  #frame{zoom:1}
  body.drawer-on .main{margin-right:0}
  body.drawer-on .work{grid-template-columns:186px minmax(0,1fr)}
  body.drawer-on .col-1{display:block}
  body.focus.drawer-on .col-1{display:none}
  body.focus.drawer-on .work{grid-template-columns:1fr}
  .scrim{display:block}
}
@media (max-width:900px){
  .app{grid-template-columns:60px 1fr}
  .nb{width:48px}.nb small{display:none}
  .work{grid-template-columns:1fr}
  .col-1{display:none}
  .col-2{padding:14px}
  .top .sub{display:none}
  .drawer{width:100vw;max-width:100vw}
  .pill span.lbl{display:none}
}