@import "./service.css";

.hero--mobile-datacenter { column-gap: 80px; }
.hero--mobile-datacenter .hero__content { max-width: none; min-width: 0; }
.hero--mobile-datacenter .hero__title { white-space: pre-line; }
.hero--mobile-datacenter .hero__text { color: var(--color-dark-60); }
.hero--mobile-datacenter .hero__meta { gap: 12px; }
.hero--mobile-datacenter .hero__meta-item--pill { background: var(--color-bg-darken); }
.hero--mobile-datacenter .hero__actions { margin-top: 10px; }
.hero--mobile-datacenter .hero__actions .btn { padding: 14px 24px; gap: 12px; font-size: 20px; }
.hero--mobile-datacenter .hero__img { max-width: 800px; width: 100%; height: auto; object-fit: contain; }

@media (max-width: 1440px) {
  .hero--mobile-datacenter { column-gap: 40px; }
  .hero--mobile-datacenter .hero__title { font-size: clamp(38px, 4.45vw, 64px); }
}
@media (max-width: 1024px) {
  .hero--mobile-datacenter .hero__img { max-width: 680px; }
}
@media (max-width: 560px) {
  .hero--mobile-datacenter .hero__title { font-size: clamp(28px, 7.5vw, 36px); }
  .hero--mobile-datacenter .hero__meta { gap: 8px; }
  .hero--mobile-datacenter .hero__meta-item { font-size: 14px; padding: 8px 12px; }
}