:root{
  --adaptive-grid-gap:8px;
}

.section-subtitle{display:inline-flex;align-items:center;color:var(--muted);font-size:.8rem;font-weight:600;line-height:1;white-space:nowrap}
.section-subtitle::before{content:"·";margin:0 8px 0 2px;color:var(--line);font-size:1rem;font-weight:700}
.single-group-section .group-head{display:none}.single-group-section .group{margin-top:0;padding-top:0;border-top:0}

@media (min-width:901px){
  .section:not(#quick) .grid,#quick .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:var(--adaptive-grid-gap);min-width:0;max-width:100%}
  .directory-section .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .section .panel,#quick .panel{min-width:0;max-width:100%}
  .section:not(#quick) .card{width:100%;min-width:0;max-width:none;background:transparent;border-color:transparent;box-shadow:none}
  .section:not(#quick) .card:hover,.section:not(#quick) .card:focus-visible{background:var(--soft)}
  #quick .card{width:100%;min-width:0;max-width:none;background:var(--soft)}
  .card .copy{flex:1 1 auto;width:auto;min-width:0}
  .card .name{width:100%;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .single-group-section{grid-template-areas:"heading heading" "panel panel"}
}
@media (min-width:1100px) and (max-width:1279px){
  .section:not(#quick) .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  #quick .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:1180px) and (max-width:1399px){.directory-section .grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1280px){.section:not(#quick) .grid,#quick .grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1400px){.directory-section .grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:341px) and (max-width:900px){
  .section-title{min-width:0;flex-wrap:wrap;row-gap:4px}.section-subtitle{font-size:.77rem}
  .section:not(#quick) .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--adaptive-grid-gap)}
  .section:not(#quick) .card{width:100%;min-width:0;max-width:none}.section:not(#quick) .card .name{width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:340px){
  .section-title{min-width:0;flex-wrap:wrap;row-gap:4px}.section-subtitle{font-size:.77rem}
  .section:not(#quick) .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--adaptive-grid-gap)}
  .section:not(#quick) .card{width:100%;min-width:0;max-width:none}
}
