/* Compact, proportional second shelf: four covers + the existing note. */
@media (min-width:901px){
  .rack .bottom-shelf{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,clamp(150px,14.2vw,205px))) minmax(118px,145px)!important;
    justify-content:space-between!important;
    align-items:end!important;
    gap:clamp(7px,.85vw,14px)!important;
  }
  .rack .bottom-shelf .magazine{width:100%!important;flex:none!important;justify-self:center!important}
  .rack .bottom-shelf .magazine.pronunciation{width:91%!important;flex:none!important}
  .rack .bottom-shelf .note-stack{width:100%!important;flex:none!important;justify-self:end!important}
}

/* Keep the same compact alignment through tablet widths instead of switching
   the row to oversized fixed-width flex items. */
@media (min-width:681px) and (max-width:900px){
  .rack .bottom-shelf{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr)) minmax(86px,.72fr)!important;
    align-items:end!important;
    gap:7px!important;
    overflow:visible!important;
  }
  .rack .bottom-shelf .magazine,.rack .bottom-shelf .magazine.pronunciation{
    width:100%!important;flex:none!important;justify-self:center!important;
  }
  .rack .bottom-shelf .magazine.pronunciation{width:91%!important}
  .rack .bottom-shelf .note-stack{width:100%!important;flex:none!important;justify-self:end!important}
}