.feat-cri-quad { background: #0b0907; container-type: size; }
.feat-cri-quad .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.feat-cri-quad .caps { position: absolute; left: 4%; right: 4%; bottom: 7%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%; text-align: center; pointer-events: none; }
.feat-cri-quad .caps span { display: grid; gap: 5px; font: 500 clamp(8px, 1cqw, 11px)/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.feat-cri-quad .caps b { font: 400 clamp(14px, 2cqw, 22px)/1.1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--fg); }
.feat-cri-quad .caps span:last-child b { color: var(--fg-dim); }
@container (max-aspect-ratio: 1/1) {
  .feat-cri-quad .caps { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; top: 3%; bottom: 1%; align-items: end; column-gap: 4%; row-gap: 0; }
  .feat-cri-quad .caps span { gap: 3px; font-size: clamp(7px, 2.2cqw, 9px); } .feat-cri-quad .caps b { font-size: clamp(12px, 4cqw, 16px); }
}