.ops-extension-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, .7fr)) auto;
  gap: 0;
  align-items: stretch;
  margin: 0 0 18px;
  border: 1px solid #cfe3ec;
  border-left: 4px solid #0798d1;
  background: #fff;
}
.ops-extension-panel > div { padding: 16px 18px; border-right: 1px solid #e0ecf1; }
.ops-extension-panel > div:last-of-type { border-right: 0; }
.ops-extension-panel span, .ops-extension-panel small { display: block; }
.ops-extension-panel span { color: #6d8794; font-size: 11px; font-weight: 800; }
.ops-extension-panel strong { display: block; margin-top: 7px; color: #173647; font-size: 22px; }
.ops-extension-panel .ops-extension-title strong { margin-top: 4px; font-size: 16px; }
.ops-extension-panel small { margin-top: 6px; color: #8299a4; font-size: 11px; }
.ops-extension-panel .danger strong { color: #d64258; }
.ops-extension-panel .warn strong { color: #b67414; }
.ops-extension-panel a { align-self: center; margin: 0 16px; padding: 10px 14px; border-radius: 5px; color: #fff; background: #087dac; font-size: 12px; font-weight: 900; text-decoration: none; white-space: nowrap; }
@media (max-width: 1080px) { .ops-extension-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-extension-panel a { margin: 14px 18px; justify-self: start; } }
@media (max-width: 620px) { .ops-extension-panel { grid-template-columns: 1fr; } .ops-extension-panel > div { border-right: 0; border-bottom: 1px solid #e0ecf1; } }