/* V475: fluid library columns. Cards fill the available manager width evenly. */
.manager-grid {
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--preview-card-width, 300px)), 1fr)
  ) !important;
  grid-auto-columns: auto !important;
  justify-content: stretch !important;
  align-items: start !important;
}

.manager-grid > .manager-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Line drawings use --card for their preview-size control. */
#grid {
  --ld-info-height: 76px;
  --ld-fluid-thumb-height: calc(var(--card, 260px) * 0.7728);
  --ld-fluid-card-height: calc(var(--ld-fluid-thumb-height) + var(--ld-info-height));
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--card, 260px)), 1fr)
  ) !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: var(--ld-fluid-card-height) !important;
  row-gap: 18px !important;
  justify-content: stretch !important;
  align-items: start !important;
}

#grid > .card,
#grid > .folder-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--ld-fluid-card-height) !important;
  min-height: var(--ld-fluid-card-height) !important;
  max-height: var(--ld-fluid-card-height) !important;
}

#grid > .card {
  display: grid !important;
  grid-template-rows: var(--ld-fluid-thumb-height) var(--ld-info-height) !important;
}

#grid > .card .thumb {
  width: 100% !important;
  height: var(--ld-fluid-thumb-height) !important;
  min-height: var(--ld-fluid-thumb-height) !important;
  max-height: var(--ld-fluid-thumb-height) !important;
  aspect-ratio: auto !important;
}

#grid > .card .card-info {
  height: var(--ld-info-height) !important;
  min-height: var(--ld-info-height) !important;
  max-height: var(--ld-info-height) !important;
}

.manager-grid {
  --model-fluid-thumb-height: var(--preview-thumb-height, 154px);
  row-gap: 18px !important;
}

.manager-grid .card-thumb {
  height: var(--model-fluid-thumb-height) !important;
  min-height: var(--model-fluid-thumb-height) !important;
  max-height: var(--model-fluid-thumb-height) !important;
}

@media (max-width: 720px) {
  .manager-grid,
  #grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}