/* Responsive layout for the original server gallery. */
#grid {
  display: grid;
  grid-template-columns: 100%;
  align-items: start;
}

#grid .server-item {
  position: relative;
  width: 100%;
  float: none;
}

#grid .server-item[hidden] {
  display: none;
}

[data-filter][aria-pressed="true"] {
  color: var(--text-primary);
}

@media (min-width: 576px) {
  #grid { grid-template-columns: repeat(2, 50%); }
}

@media (min-width: 992px) {
  #grid { grid-template-columns: repeat(3, 33%); }
}

@media (min-width: 1200px) {
  #grid { grid-template-columns: repeat(4, 25%); }
}

#mobile-menu {
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
  max-height: calc(100dvh - 75px);
  overflow-y: auto;
  backdrop-filter: blur(12px);
}

#mobile-menu > div {
  max-width: 1170px;
  margin: 0 auto;
  padding: 12px 15px;
}

#mobile-menu a { width: fit-content; }

a[aria-disabled="true"] { cursor: default; }

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--text-tertiary);
  outline-offset: 5px;
}

@media (min-width: 1570px) {
  #mobile-menu { display: none; }
}

@media (max-width: 575px) {
  #grid .server-item > a { padding-bottom: 20px; }
  #grid .server-item > a > div:first-of-type {
    position: relative;
    top: auto;
    text-align: center;
  }
  #grid .server-item > a > div:last-of-type { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}