/* SPDX-License-Identifier: Apache-2.0 */
/* Feature the cognitive runtime container on the overview. */
.ccir-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 5px; padding: 8px; background: linear-gradient(125deg, #b4ccbb, #52735e 40%, #aec9b8); border-top: 3px double #e3ffeb; border-bottom: 1px solid #142e1d; }
.ccir-feature-image { min-width: 0; border: 1px solid #193d26; overflow: hidden; background: #153923; }
.ccir-feature-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 42%; }
.ccir-feature-copy { padding: 28px 30px 44px; border: 1px solid #204b31; color: #c6e2cf; background: repeating-linear-gradient(0deg, #c9ffd705 0 1px, transparent 1px 3px), linear-gradient(130deg, #1f432d, #0b2619); }
.ccir-feature-copy .eyebrow { font-size: 7px; color: #abceb7; }
.ccir-feature h2 { margin: 0 0 15px; color: #edfff2; font: 22px/1.5 var(--display); }
.ccir-feature h2 em { color: #c9ffd7; font-style: normal; }
.ccir-feature-copy > p:not(.eyebrow) { font-size: 18px; max-width: 47ch; }
.ccir-feature .action-button { max-width: 340px; }
.ccir-feature-label { position: absolute; bottom: 16px; right: 24px; display: flex; align-items: center; gap: 15px; font: 8px/1.5 var(--display); color: #abd0b7; }
.ccir-feature-label small { font-size: 5px; letter-spacing: 1px; }
@media (max-width: 860px) {
  .ccir-feature { grid-template-columns: 1fr 1fr; }
  .ccir-feature-copy { padding: 22px 20px 44px; }
  .ccir-feature h2 { font-size: 17px; }
}
@media (max-width: 620px) {
  .ccir-feature { grid-template-columns: 1fr; }
  .ccir-feature-image img { height: auto; aspect-ratio: 1.65; }
  .ccir-feature-copy { padding: 22px 18px 44px; }
  .ccir-feature h2 { font-size: 20px; }
}
@media print { .ccir-feature { display: none; } }