@media (max-width: 640px) {

  header .max-w-7xl > .flex.justify-between {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  header .flex.items-center:has(h1) {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  header .flex.flex-col.mr-4 {
    margin-right: 0.75rem;
  }

  header h1.font-display {
    font-size: 1.125rem !important;
    line-height: 1.3;
  }

  header p.text-sm.text-gray-500 {
    font-size: 0.75rem;
  }

  header .border-l.border-black\/10.pl-4 {
    padding-left: 0.75rem;
  }

  header .flex.items-center.gap-3 {
    width: 100%;
    justify-content: flex-start;
  }

  header .flex.items-center.gap-3 button,
  header .flex.items-center.gap-3 a {
    font-size: 0.8125rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
}

@media (max-width: 400px) {
  header h1.font-display {
    font-size: 1rem !important;
  }
}