.capability { padding: 112px 0; background: #fff; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 205px; gap: 12px; }
.capability-card { position: relative; overflow: hidden; margin: 0; background: #10233e; }
.capability-card:first-child { grid-column: span 2; grid-row: span 2; }
.capability-card:last-child { grid-column: span 2; }
.capability-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.capability-card:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 22, 42, .84), rgba(4, 22, 42, .02) 65%); }
.capability-card figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 15px; color: #fff; }
.capability-card span, .capability-card strong { display: block; }
.capability-card span { color: #8fcaff; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.capability-card strong { margin-top: 3px; font-size: 13px; line-height: 1.25; }
.capability-card:first-child strong { font-size: 17px; }
.capability-card:hover img { transform: scale(1.045); }
@media (max-width: 1000px) { .capability-grid { grid-template-columns: repeat(2, 1fr); } .capability-card:last-child { grid-column: span 1; } }
@media (max-width: 640px) { .capability { padding: 72px 0; } .capability-grid { grid-auto-rows: 178px; gap: 8px; } .capability-card:first-child { grid-column: span 2; grid-row: span 1; } .capability-card figcaption { left: 13px; right: 13px; bottom: 12px; } }