/* Shared four-card hero highlights. */
.highlight-grid,
.bms-hero-card-grid,
.service-page .service-hero-card-grid,
.cloud-hero-card-grid,
.dcim-hero-card-grid,
.about-hero-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.highlight-grid .tilt-card-shell,
.service-page .service-hero-card-grid .tilt-card-shell {
  height: 132px;
}

.highlight-card,
.bms-hero-card,
.service-page .service-hero-card,
.cloud-hero-card,
.dcim-hero-card,
.about-hero-card {
  min-width: 0;
  min-height: 132px;
  height: 132px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 24px;
}

.highlight-card-icon,
.highlight-card img,
.bms-hero-card-icon,
.service-page .service-hero-card-icon,
.cloud-hero-card-icon,
.dcim-hero-card-icon,
.about-hero-card-icon {
  width: 54px;
  height: 54px;
  flex: none;
}

.highlight-card-icon,
.bms-hero-card-icon,
.service-page .service-hero-card-icon,
.cloud-hero-card-icon,
.dcim-hero-card-icon,
.about-hero-card-icon {
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(145deg, #ff8176, #f76076);
  box-shadow: 0 8px 16px rgba(247, 96, 118, .24), inset 0 1px 0 rgba(255, 255, 255, .3);
  line-height: 0;
}

.highlight-card-icon svg,
.highlight-card-icon img,
.bms-hero-card-icon svg,
.bms-hero-card-icon img,
.service-page .service-hero-card-icon svg,
.service-page .service-hero-card-icon img,
.cloud-hero-card-icon svg,
.cloud-hero-card-icon img,
.dcim-hero-card-icon svg,
.dcim-hero-card-icon img,
.about-hero-card-icon svg,
.about-hero-card-icon img {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}

.highlight-card-icon svg,
.bms-hero-card-icon svg,
.service-page .service-hero-card-icon svg,
.cloud-hero-card-icon svg,
.dcim-hero-card-icon svg,
.about-hero-card-icon svg {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.highlight-card > div,
.bms-hero-card > div,
.service-page .service-hero-card > div,
.cloud-hero-card > div,
.dcim-hero-card > div,
.about-hero-card > div {
  min-width: 0;
}

.highlight-card h2,
.bms-hero-card h2,
.service-page .service-hero-card h2,
.cloud-hero-card h2,
.dcim-hero-card h2,
.about-hero-card h2 {
  margin: 0 0 8px;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.highlight-card p,
.bms-hero-card p,
.service-page .service-hero-card p,
.cloud-hero-card p,
.dcim-hero-card p,
.about-hero-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.55;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1180px) {
  .bms-hero-card-grid,
  .service-page .service-hero-card-grid,
  .cloud-hero-card-grid,
  .dcim-hero-card-grid,
  .about-hero-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .bms-hero-card-grid,
  .service-page .service-hero-card-grid,
  .cloud-hero-card-grid,
  .dcim-hero-card-grid,
  .about-hero-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bms-hero-card,
  .service-page .service-hero-card,
  .cloud-hero-card,
  .dcim-hero-card,
  .about-hero-card {
    min-height: 112px;
    height: auto;
    padding: 20px;
  }

  .service-page .service-hero-card-grid .tilt-card-shell {
    height: 112px;
  }
}