/* Keep the toolbox in two readable columns even on narrow phones. */
@media(max-width:480px){
 body.hrefkit-page .directory-main{padding-left:12px;padding-right:12px}
 body.hrefkit-page .directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body.hrefkit-page .tool-card{min-width:0;min-height:164px;padding:13px 11px}
 body.hrefkit-page .tool-card .card-heading{align-items:center;gap:7px;min-width:0}
 body.hrefkit-page .tool-card .card-icon{width:32px;height:32px;flex:0 0 32px}
 body.hrefkit-page .tool-card .tool-illustration{width:32px;height:32px}
 body.hrefkit-page .tool-card .card-heading h3{min-width:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere;word-break:normal}
 body.hrefkit-page .tool-card p{font-size:12px;line-height:1.75;margin:10px 0;overflow-wrap:anywhere}
 body.hrefkit-page .tool-card .tool-state{font-size:9px}
 body.hrefkit-page .section-heading>p{font-size:12px}
 body.hrefkit-page .mascot-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){
 body.hrefkit-page .directory-grid{gap:8px}
 body.hrefkit-page .tool-card{padding:12px 10px}
 body.hrefkit-page .tool-card .card-heading{align-items:flex-start;flex-direction:column;gap:7px}
 body.hrefkit-page .tool-card .card-heading h3{font-size:13px}
}