/* Giữ đúng tỷ lệ pixel của ảnh marketing, không để width CSS kết hợp với height HTML làm méo ảnh. */
.hero-art .hero-photo,
.business-collage img,
.solution-photo img,
.online-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.online-panel {
  align-self: center;
  overflow: visible;
}

/* Ưu tiên diện tích cho ảnh giao diện để chữ và số liệu vẫn dễ quan sát. */
.online-layout {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}

.online-panel img {
  max-height: none;
  object-position: center top;
}

@media (max-width: 900px) {
  .online-layout {
    grid-template-columns: 1fr;
  }
  .online-panel,
  .solution-photo,
  .business-collage,
  .hero-art {
    width: 100%;
    max-width: 100%;
  }
}