@media (min-width: 768px) and (max-width: 1023px) {
  .preloader-left {
    flex: 0 0 260px;
  }
  .preloader-header-right {
    gap: 12px;
  }
}

@media (min-width: 1024px) and (max-width: 1535px) {
  .preloader-left {
    flex: 0 0 320px;
  }
}

@media (min-width: 1536px) {
  .preloader-left {
    flex: 0 0 380px;
  }
}

@media (max-width: 767px) {
  .preloader-main {
    flex-direction: column;
  }

  .preloader-left {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--ase-pre-border);
    max-height: 45vh;
  }

  .preloader-right {
    flex: 1;
    min-height: 200px;
  }

  .preloader-header-right {
    display: none;
  }

  .phase-item {
    padding: 6px 8px;
  }

  .phase-name {
    font-size: 0.7rem;
  }

  .resources-container {
    max-height: 120px;
  }

  .mobile-debug-hint {
    display: block !important;
  }
}