.mainContent {
  max-width: 80rem;
  /* 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  /* 16px */
  padding-right: 1rem;
  /* 16px */
  padding-top: 2rem;
  /* 32px */
  padding-bottom: 2rem;
}
/* sm breakpoint: min-width 640px */
@media (min-width: 640px) {
  .mainContent {
    padding-left: 1.5rem;
    /* sm:px-6 */
    padding-right: 1.5rem;
  }
}
/* lg breakpoint: min-width 1024px */
@media (min-width: 1024px) {
  .mainContent {
    padding-left: 2rem;
    /* lg:px-8 */
    padding-right: 2rem;
  }
}
.page-header {
  display: flex;
  /* flex */
  align-items: center;
  /* items-center */
  justify-content: space-between;
  /* justify-between */
}
.page-header h1 {
  font-size: 1.5rem;
  /* text-2xl */
  font-weight: 700;
  /* font-bold */
  color: #0f172a;
}
.page-header p {
  color: #475569;
  /* text-primary-600 */
  margin-top: 0.25rem;
  /* mt-1 */
}
.responsive-flex {
  display: none;
  /* hidden */
}
.responsive-flex span {
  font-size: 0.875rem;
  /* text-sm */
  color: #000;
  /* text-primary-500 */
}
@media (min-width: 640px) {
  /* sm */
  .responsive-flex {
    display: flex;
    /* sm:flex */
    align-items: center;
    /* items-center */
    gap: 0.75rem;
    /* space-x-3 */
  }
}