/* Service imagery is a background layer, with live HTML text kept readable above it. */
.service-card {
  isolation: isolate;
  color: #fff;
}

.service-card > * {
  position: relative;
  z-index: 1;
}

.service-card .card-number,
.service-card p,
.service-card .card-arrow {
  color: #f2f8fd;
}

.service-card.service-strategy,
.service-card.service-strategy:hover {
  background:
    linear-gradient(0deg, rgba(4, 19, 35, .84), rgba(4, 19, 35, .08) 72%),
    url('assets/service-strategy.jpg') center 36% / cover no-repeat;
}

.service-card.service-content,
.service-card.service-content:hover {
  background:
    linear-gradient(0deg, rgba(3, 17, 35, .83), rgba(3, 17, 35, .04) 72%),
    url('assets/service-content.jpg') center center / cover no-repeat;
}

.service-card.service-integrated,
.service-card.service-integrated:hover {
  background:
    linear-gradient(0deg, rgba(59, 30, 10, .76), rgba(59, 30, 10, .05) 72%),
    url('assets/service-integrated.jpg') center 45% / cover no-repeat;
}

.service-card.service-commerce,
.service-card.service-commerce:hover {
  background:
    linear-gradient(0deg, rgba(4, 19, 36, .78), rgba(4, 19, 36, .04) 72%),
    url('assets/service-commerce.jpg') center center / cover no-repeat;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-grid-model .service-card {
  justify-content: center;
  text-align: center;
}

.service-grid-model .service-card > div {
  align-self: center;
}

.service-grid-model .service-card h3 {
  margin-bottom: 12px;
}

/* 桌面端服务说明保持一行，避免卡片文字显得零碎。 */
@media (min-width: 801px) {
  .service-grid-model .service-card p {
    width: max-content;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    font-size: clamp(12px, 1.05vw, 16px);
    letter-spacing: -.35px;
  }
}