@media (max-width: 480px) {
  #topics-menu ul,
  #breadcrumb ul {
    font-size: 0.875rem; /* Tailwind's text-sm (default, for reference) */
  }
}

@media (max-width: 433px) {
  #breadcrumb ul {
    font-size: 0.75rem; /* Tailwind's text-xs */
  }
}

@media (max-width: 382px) {
  #breadcrumb ul {
    font-size: 0.625rem; /* Smaller than text-xs (~11px) */
  }
}

@media (max-width: 350px) {
  #topics-menu ul,
  #breadcrumb ul {
    font-size: 0.60rem; /* ~10px - minimum readable */
  }
}

@media (max-width: 480px) {
  .header-subtitle {
    font-size: 0.875rem; /* text-sm */
  }
}

@media (max-width: 400px) {
  .header-subtitle {
    font-size: 0.75rem; /* text-xs */
  }
}

@media (max-width: 340px) {
  .header-subtitle {
    font-size: 0.688rem; /* ~11px */
  }
}

@media (max-width: 300px) {
  .header-subtitle {
    font-size: 0.625rem; /* ~10px */
  }
}

@media (max-width: 480px) {
  #logo-header img {
    height: 2.5rem; /* Tailwind's h-10 */
  }
}

@media (max-width: 425px) {
  #logo-header img {
    height: 2.25rem; /* Tailwind's h-9 */
  }
}

@media (max-width: 382px) {
  #logo-header img {
    height: 2rem; /* Tailwind's h-8 */
  }
}

@media (max-width: 350px) {
  #logo-header img {
    height: 1.75rem; /* Tailwind's h-7 */
  }
}