@media (max-width: 1180px) {
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-grid,
.tg-public #template-gallery .tg-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-detail,
.tg-public #template-gallery .tg-detail {
  grid-template-columns: minmax(0, 1fr) 300px;
}
}
@media (max-width: 900px) {
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-detail,
.tg-public #template-gallery .tg-detail {
  grid-template-columns: minmax(0, 1fr);
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-panel,
.tg-public #template-gallery .tg-panel {
  position: static;
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery.tg-detail-page,
.tg-public #template-gallery.tg-detail-page {
  padding-bottom: 76px;
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-dock,
.tg-public #template-gallery .tg-dock {
  display: block;
  position: fixed;
  bottom: var(--shell-bottom-bar-h, 56px);
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: var(--fg-canvas);
  border-top: 1px solid var(--fg-line);
  z-index: 25;
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-actions .tg-button--primary,
.tg-public #template-gallery .tg-actions .tg-button--primary {
  display: none;
}
/* With the primary in the dock, an action section holding nothing else would leave an empty band between two rules. */
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-actions:not(:has(> :not(.tg-button--primary))),
.tg-public #template-gallery .tg-actions:not(:has(> :not(.tg-button--primary))) {
  display: none;
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-actions .tg-button + .tg-button,
.tg-public #template-gallery .tg-actions .tg-button + .tg-button {
  margin-top: 0;
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery :is(a, button, input, [tabindex]),
.tg-public #template-gallery :is(a, button, input, [tabindex]) {
  scroll-margin-bottom: calc(var(--shell-bottom-bar-h, 56px) + 80px);
}
}
@media (max-width: 600px) {
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-head,
.tg-public #template-gallery .tg-head {
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-search,
.tg-public #template-gallery .tg-search {
  width: 100%;
  height: 40px;
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-grid,
.tg-public #template-gallery .tg-grid {
  grid-template-columns: minmax(0, 1fr);
}
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-chip,
.tg-public #template-gallery .tg-chip {
  min-height: 36px;
}
/* Phones wrap the category chips instead of hiding some off to the side. */
html:root:root body.app-layout.shell-v3.shell-bench #app-shell-content#app-shell-content #template-gallery .tg-filters,
.tg-public #template-gallery .tg-filters {
  flex-wrap: wrap;
  overflow-x: visible;
}
}