.services-grid .card {
  background: #0b1726;
  border: 1px solid #283a50;
  border-radius: 2px;
  color: #f2f5fa;
}
.services-grid .card:hover {
  border-color: #3d9acb;
  box-shadow: 0 14px 36px rgba(11, 23, 38, .16);
}
.services-grid .card-body { border-top: 1px solid #283a50; }
.services-grid .card-body h3 .jp,
.services-grid .card-body p { color: #bbc9d9; }
.services-grid .tag { border-color: #3c5068; color: #c4d1df; }
.service-media { margin: 0; background: #08111e; }
.service-media-stage {
  position: absolute; inset: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; isolation: isolate;
}
.service-media-stage::before {
  content: ''; position: absolute; inset: 14px; z-index: -1;
  border: 1px solid rgba(79, 157, 209, .2);
}
.service-media-stage::after {
  content: ''; position: absolute; top: 14px; left: 14px;
  width: 24px; height: 24px; border-top: 2px solid #63bfe9; border-left: 2px solid #63bfe9;
  pointer-events: none;
}
.service-media-stage img {
  width: 100%; height: 100%; object-fit: contain;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.service-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 36px; padding: 0 14px; border-top: 1px solid #283a50;
  color: #e4edf7; font-size: 10px; letter-spacing: .03em;
}
.service-media figcaption span { color: #81a7c6; font-size: 9px; }
.service-media--screen .service-media-stage { padding: 24px 18px; }
.service-media--photo .service-media-stage { padding: 14px; }
.service-media--photo img { object-fit: cover; }
.service-media--training .service-media-stage { display: block; }
.service-media--training img {
  position: absolute; width: 79%; height: auto; aspect-ratio: 16 / 9;
}
.service-media--training .material-cover { top: 12%; left: 6%; transform: rotate(-3deg); }
.service-media--training .material-content { bottom: 10%; right: 6%; transform: rotate(3deg); }
.service-media--papers .service-media-stage { display: block; }
.service-media--papers img { position: absolute; height: 82%; width: auto; }
.service-media--papers .paper-back { top: 7%; left: 17%; transform: rotate(-9deg); }
.service-media--papers .paper-front { top: 10%; right: 17%; transform: rotate(7deg); }
@media (prefers-reduced-motion: reduce) {
  .services-grid .card { transition: none; }
}