.eng-layer-figure { padding: 24px; border: 1px solid #dbe4e8; border-radius: 12px; background: #f5f8fa; }
.eng-layer-figure h2 { margin: 0 0 20px; font-size: 1.8rem; }
.eng-layer-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 30px; align-items: center; }
.eng-layer-art { position: relative; min-width: 0; }
.eng-layer-art img { border: 0; box-shadow: none; }
.eng-layer-marker { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #123047; color: white; font: 700 13px/1 Arial, sans-serif; border: 2px solid white; }
.eng-layer-key { list-style: none; counter-reset: layer; padding: 0 !important; margin: 0 !important; }
.eng-layer-key li { counter-increment: layer; position: relative; padding-left: 34px; margin-bottom: 16px; font-size: 14px; line-height: 1.45; }
.eng-layer-key li::before { content: counter(layer); position: absolute; top: 0; left: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #123047; color: #fff; font-size: 13px; font-weight: 700; }
.eng-layer-key strong, .eng-layer-key span { display: block; }
.eng-layer-key span { margin-top: 3px; }
@media (max-width: 700px) {
  .eng-layer-figure { padding: 16px; }
  .eng-layer-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .eng-layer-key li { font-size: 16px; }
  .eng-layer-figure figcaption { width: auto; max-width: 100%; }
  .eng-layer-marker { width: 20px; height: 20px; font-size: 11px; }
}