/* Phone: the logo column is narrow, so only a small pull toward it. */
.col-7 > .text-gray-900 {
  font-size: 1.35rem !important;
  white-space: nowrap;
  margin-left: -2rem !important;
  margin-bottom: 0 !important;
}
/* Tablet and up: the logo column has more empty space to its right, so
   the name moves further into it and can be larger. */
@media (min-width: 768px) {
  .col-7 > .text-gray-900 {
    font-size: 1.6rem !important;
    margin-left: -4rem !important;
    margin-bottom: 0 !important;
  }
}
.app-sidebar-logo .text-sidebar {
  font-size: 1.05rem !important;
  white-space: nowrap;
}