@media (max-width: 1180px) {
  .td-app.is-mobile-panel-templates {
    --td-compact-controls-height: min(720px, calc(100dvh - 88px));
  }

  .td-app.is-mobile-panel-templates .td-controls-column {
    grid-template-rows: minmax(0, 1fr) !important;
    height: var(--td-compact-controls-height) !important;
  }

  .td-app.is-mobile-panel-templates .td-mobile-template-panel {
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }

  .td-mobile-template-panel .td-template-filter-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
    padding: 2px 0 10px;
    box-shadow: 0 -10px 0 #fff;
  }

  .td-mobile-template-panel .td-template-filter-header .td-template-search {
    margin-bottom: 10px;
  }

  .td-mobile-template-panel .td-template-filter-header .td-template-active-filter,
  .td-mobile-template-panel .td-template-filter-header .td-template-usecase-strip {
    margin-bottom: 0;
  }

  .td-mobile-template-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    padding: 0 0 12px;
  }

  .td-mobile-template-item {
    align-content: start;
    width: 100%;
    min-width: 0;
  }

  .td-mobile-template-thumb {
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    padding: 6px;
  }

  .td-mobile-template-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .td-mobile-template-name {
    display: -webkit-box;
    min-height: 2.6em;
    overflow: hidden;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .td-mobile-template-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .td-app.is-mobile-panel-templates {
    --td-compact-controls-height: min(720px, calc(100dvh - 72px));
  }

  .td-mobile-template-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}