/* Раскладка статьи — общая для сайта и редактора */
.art-wrap { container-type: inline-size; width: 100%; }
.art { --u: calc(100cqw / 1000); position: relative; width: 100%; overflow: visible; }
.art-b { position: absolute; box-sizing: border-box; }
.art-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.art-image img { width: 100%; height: 100%; display: block; }
.art-video { background: #000; }
.art-video iframe, .art-play { width: 100%; height: 100%; border: 0; display: block; }
.art-play { position: relative; padding: 0; background: #000; cursor: pointer; }
.art-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-play span { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; background: #e3121b; border-radius: 12px; }
.art-play span::after { content: ""; position: absolute; left: 27px; top: 14px; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.art-play:hover span { background: #ff2a33; }

/* Телефон: блоки встают в столбик, сохраняя пропорции картинок */
@container (max-width: 560px) {
  .art { height: auto !important; display: flex; flex-direction: column; gap: 16px; }
  .art-b { position: static !important; width: 100% !important; }
  .art-image, .art-video { height: auto !important; aspect-ratio: var(--ar); }
  .art-text { font-size: clamp(15px, calc(var(--fs) * 0.62px), 38px) !important; padding: 0 !important; }
}