.directory-page,
.directory-grid {
  display: grid;
  gap: 1rem;
}

.directory-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.directory-card,
.member-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-2);
}

[data-route="directory"] .directory-hero {
  position: relative;
  overflow: hidden;
  border-color: rgb(255 255 255 / .32);
  background:
    radial-gradient(circle at 78% 20%, rgb(255 255 255 / .18), transparent 34%),
    linear-gradient(90deg, rgb(20 83 45 / .80), rgb(13 148 136 / .48) 52%, rgb(220 252 231 / .20)),
    url("../../img/module-hero-directory.png") center / cover no-repeat;
  box-shadow: none;
  color: white;
}

[data-route="directory"] .directory-hero-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: min(100%, 34rem);
}

[data-route="directory"] .directory-hero .directory-hero-title,
[data-route="directory"] .directory-hero .directory-hero-heading {
  color: white;
}

[data-route="directory"] .directory-hero .directory-lead {
  color: rgb(241 245 249 / .92);
}

[data-route="directory"] .directory-hero-stats article {
  border-color: rgb(255 255 255 / .32);
  background: rgb(255 255 255 / .16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16);
  backdrop-filter: blur(8px);
}

[data-route="directory"] .directory-hero-stats strong {
  color: #000;
}

[data-route="directory"] .directory-hero-stats span {
  color: #000;
}

[data-route="directory"] .directory-hero-title {
  margin: 0;
  font-family: inherit;
  color: var(--accent-strong);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

[data-route="directory"] .directory-hero-heading {
  margin: .15rem 0 .35rem;
  color: var(--text);
  font-family: inherit;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
}

[data-route="directory"] .directory-search-panel label:first-of-type > span,
[data-route="directory"] .directory-results-header h2 {
  margin: 0;
  font-family: inherit;
  color: var(--accent-strong);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 640px) {
  .directory-grid {
    grid-template-columns: 1fr;
  }

  [data-route="directory"] .directory-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
}