.solution-card { min-height: 430px; }
.solution-card-image { width: 100%; height: 152px; margin-top: 18px; object-fit: cover; border-radius: 14px; background: #dff0ef; }
.solution-card h3 { margin-top: 22px; }

.project-card { min-height: 345px; padding: 0; overflow: hidden; background: #fff !important; border: 1px solid #dce7e8; color: var(--navy); }
.project-card:hover { background: #fff !important; box-shadow: 0 20px 35px #10293b12; }
.project-card-image { width: 100%; height: 168px; object-fit: cover; background: #dff0ef; }
.project-card .project-type { padding: 16px 22px 0; color: var(--cyan-dark); }
.project-card strong { padding: 0 22px; }
.project-card > span:last-child { padding: 0 22px 21px; color: var(--cyan-dark); }

.inner-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 345px); }
.inner-hero-illustration { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; box-shadow: 0 25px 60px #05151e55; }

.feature { min-height: 355px; }
.feature-image { width: 100%; height: 132px; margin-top: 15px; object-fit: cover; border-radius: 12px; background: #dff0ef; }
.feature h3 { margin-top: 18px; }

.detail-image { width: 100%; height: auto; aspect-ratio: 16 / 10; margin-top: 24px; object-fit: cover; border-radius: 18px; background: #dff0ef; }

.case-card { min-height: 470px; padding: 0; overflow: hidden; }
.case-card > span { padding: 25px 27px 0; }
.case-image { width: 100%; height: 205px; margin-top: 18px; object-fit: cover; background: #dff0ef; }
.case-card h3 { margin: 18px 27px 9px; }
.case-card p { margin: 0 27px 23px; }
.case-card a { margin: auto 27px 25px; }

@media (max-width: 820px) {
  .inner-hero-grid { grid-template-columns: 1fr; }
  .inner-hero-illustration { max-width: 530px; }
}

@media (max-width: 560px) {
  .solution-card { min-height: 0; }
  .solution-card-image { height: auto; aspect-ratio: 16 / 10; }
  .project-card { min-height: 0; gap: 14px; }
  .project-card-image { height: auto; aspect-ratio: 16 / 10; }
  .project-card > span:last-child { margin-top: 5px; }
  .feature { min-height: 0; }
  .feature-image { height: auto; aspect-ratio: 16 / 10; }
  .inner-hero-illustration { margin-top: 8px; }
  .case-image { height: auto; aspect-ratio: 16 / 10; }
}