@media (max-width: 1100px) {
  .works-grid,
  .assets-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .template-art {
    height: 150px;
    padding: 17px;
  }
  .template-art strong {
    font-size: 24px;
  }
  .topbar {
    padding: 0 26px;
  }
  .feature-tabs {
    padding: 0 26px;
  }
}
@media (max-width: 760px) {
  main {
    padding: 0 22px 36px;
  }
  .topbar {
    height: 60px;
    padding: 0 22px;
  }
  .feature-tabs {
    gap: 24px;
    padding: 0 22px;
  }
  .feature-tabs button {
    font-size: 15px;
    gap: 7px;
  }
  .header-status {
    font-size: 13px;
    gap: 6px !important;
  }
  .header-status #service-label {
    display: none;
  }
  .works-grid,
  .assets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .creation-card {
    padding: 20px 20px 0;
  }
  .advanced {
    margin: 0 -20px;
    padding: 14px 20px;
  }
  .page-hero {
    padding: 31px 0 24px;
  }
  .page-hero p {
    font-size: 14px;
  }
  .source-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .media-result-layout {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    padding: 17px;
  }
  .section-heading {
    align-items: flex-start;
  }
  .filter-tabs {
    gap: 3px;
  }
  .filter-tabs button {
    padding: 6px 8px;
  }
  .templates-dialog {
    padding: 22px !important;
  }
  .template-description {
    padding: 12px;
  }
  .template-description p {
    display: none;
  }

}

@media (max-width: 550px) {
  .dialog {
    padding: 21px !important;
    max-height: calc(100dvh - 40px);
  }
  .templates-dialog {
    width: calc(100% - 24px);
    padding: 18px !important;
  }
  .dialog-heading h2 {
    font-size: 20px;
  }
  .template-grid {
    gap: 12px;
  }
  .template-art {
    height: 135px;
    padding: 13px;
  }
  .template-art strong {
    font-size: 22px;
  }
  .template-description strong {
    font-size: 13px;
  }
  .template-description small {
    font-size: 13px;
  }
  .auto-template {
    padding: 13px;
  }
  .auto-template strong {
    font-size: 13px;
  }
  .auto-template span {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}