.topNav {
  /* Base */
  @apply border-t-1 border-gray-300;
}

.topNavWrapper {
  /* Base */
  @apply flex flex-col items-center px-4 py-12 mx-auto max-w-wrapper;
  /* Tablet + */
  @apply md:flex md:flex-row md:justify-between md:items-start;
}

.topNavLeftWrapper {
  /* Base */
  @apply grid grid-cols-1 gap-1 mt-10;
  /*  Tablet + */
  @apply md:auto-cols-max md:grid-cols-2 md:grid-flow-col md:max-w-700 md:mt-5;
}

.topNavLeftNav {
  /* Base */
  @apply grid grid-flow-row gap-1 text-center mb-9 auto-rows-min;
  /* Tablet + */
  @apply md:text-left md:mt-6;
}

.topNavLeftNav:last-child {
  @apply md:ml-6;
}

.topNavLeftNav h3 {
  @apply mb-2 text-sm;
}

.topNavLink {
  /* Base */
  @apply mb-2 text-sm text-center underline transition-colors focus:outline-none text-base-textPrimary focus:text-action-secondary hover:text-base-textSecondary;
  /* Tablet + */
  @apply md:inline md:text-left md:text-sm md:no-underline;
}

.userPreferences {
  /* Base */
  @apply flex flex-col justify-end gap-6;
  /* Tablet + */
  @apply md:flex-row;
}

.topNavSocialMediaSpace {
  /* Base */
  @apply flex justify-center gap-4 mt-6 auto-cols-max;
  /* Tablet + */
  @apply md:justify-end;
}
.topNavSocialMediaLink {
  @apply transition-opacity opacity-40 hover:opacity-100;
}

.footerLogo svg {
  /* Base */
  @apply mx-auto;

  /* Tablet + */
  @apply md:mx-0;
}
