/* One grid supports pointer, keyboard and touch input. */
.solution-overview-page .hero-solution {
  /* Crop the source below its embedded branding, matching the Figma banner. */
  background-image: linear-gradient(rgba(0, 86, 185, .2), rgba(0, 86, 185, .2)), url('../../image/comSolution/overview/overview-banner-cropped.png');
}
.solution-overview-page .hero__content { width: min(1200px, 92%); }
.solution-overview { padding: 32px 0 64px; }
.solution-grid { width: min(1200px, 92%); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.solution-card { position: relative; display: block; aspect-ratio: 290 / 240; color: #fff; overflow: hidden; }
.solution-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solution-card__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px; background: rgba(0, 86, 185, .8); opacity: 0; transition: opacity .2s ease; }
.solution-card__content h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.3; font-weight: 700; color: #fff; }
.solution-card__content p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .65); }
.solution-card__button { display: inline-block; align-self: flex-start; border: 1px solid #fff; border-radius: 24px; padding: 10px 30px; font-size: 14px; line-height: 18px; background: rgba(255, 255, 255, .1); }
.solution-card__mobile-suffix { display: none; }
.solution-card:hover, .solution-card:focus { color: #fff; text-decoration: none; }
.solution-card:hover .solution-card__content, .solution-card:focus .solution-card__content { opacity: 1; }
.solution-card:focus-visible { outline: 3px solid #0056b9; outline-offset: 4px; }
@media (max-width: 1200px) and (min-width: 769px) {
  .solution-card__content { padding: 16px; }
  .solution-card__content h2 { font-size: 24px; }
  .solution-card__content p { font-size: 12px; }
  .solution-card__button { padding: 8px 20px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .solution-overview { padding: .747rem .373rem; background: #fafafa; }
  .solution-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .427rem 3.76%; }
  .solution-card { aspect-ratio: auto; background: #fff; padding: .32rem; border-radius: .32rem; box-shadow: 0 .027rem .053rem rgba(0,0,0,.05); }
  .solution-card > img { height: auto; aspect-ratio: 143 / 132; }
  .solution-card__content { position: static; opacity: 1; padding: 0; background: transparent; }
  .solution-card__content h2 { font-size: .373rem; line-height: .533rem; font-weight: 500; color: #000; margin: .293rem 0 0; text-align: center; }
  .solution-card__mobile-suffix { display: inline; }
  .solution-card__content p, .solution-card__button { display: none; }
}
@media (hover: none), (pointer: coarse) { .solution-card__content { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .solution-card__content { transition: none; } }