@media (max-width: 1099px) {
  #appShell > main > nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #appShell > main > nav button {
    min-width: 0 !important;
  }
}

@media (min-width: 1100px) {
  #todaySection,
  #foodSection,
  #sportSection,
  #resultsSection,
  #familySection {
    grid-column: 3 / -1;
    min-width: 0;
  }

  #todaySection:not(.hidden),
  #foodSection:not(.hidden),
  #sportSection:not(.hidden),
  #resultsSection:not(.hidden),
  #familySection:not(.hidden) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }

  #personalGreetingCard,
  #profilePhotoCard {
    grid-column: 1 / -1;
  }
}