/* Focused legibility improvements for dense reference components. */

.professional-five-grid>div p{
  grid-template-columns:28px 1fr;
  padding:10px 7px;
}
.professional-five-grid>div i{font-size:15px}
.professional-five-grid>div span{
  font-size:10px;
  line-height:1.65;
}

.hexagram-grid .hexagram-tile b{
  margin:5px 0;
  font:700 17px/1.3 "Songti SC","Noto Serif SC",serif;
}

html[data-viewport-mode="web"] body .professional-five-grid>div p{
  grid-template-columns:36px 1fr;
  min-height:58px;
  padding:11px 10px;
}
html[data-viewport-mode="web"] body .professional-five-grid>div i{font-size:18px!important}
html[data-viewport-mode="web"] body .professional-five-grid>div span{
  font-size:13px!important;
  line-height:1.7;
}
html[data-viewport-mode="web"] body .hexagram-grid .hexagram-tile b{
  margin:5px 0!important;
  font:700 20px/1.3 "Songti SC","Noto Serif SC",serif!important;
}

@media(min-width:768px) and (max-width:1050px){
  html[data-viewport-mode="web"] body .professional-five-grid>div p{
    min-height:52px;
    padding:8px;
  }
  html[data-viewport-mode="web"] body .professional-five-grid>div span{font-size:12px!important}
  html[data-viewport-mode="web"] body .hexagram-grid .hexagram-tile b{font-size:18px!important}
}