/* ==========================================================================
   BREVIS.EXPRESS — БЛОК «SEO-САЙТ» НА ГЛАВНОЙ
   Короткий анонс страницы /seo/. Подключается только на главной.
   Стили самой страницы — в seo.css.
   ========================================================================== */

/* На карточке и её картинке нет data-reveal: opacity и transform у родителя
   замыкают смешивание lighten, и вокруг мокапа проступил бы чёрный фон */
.seo-promo {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  overflow: hidden;
  padding: clamp(26px, 4.4vw, 64px);
  background: radial-gradient(ellipse at 88% 100%, #2c2c2c, #1b1b1b 65%);
}

@media (min-width: 1000px) {
  .seo-promo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.seo-promo__copy { container-type: inline-size; position: relative; z-index: 1; }

/* «МНОГОСТРАНИЧНЫЙ» — 15 знаков, около 13,4 кегля: размер от ширины колонки,
   чтобы слово не рвалось посередине */
.seo-promo .h-sect { font-size: min(var(--step-4), 7.1cqi); }

.seo-promo .section__lead { margin-top: 22px; }
.seo-promo .checks { margin-top: 26px; }

.seo-promo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: clamp(26px, 3vw, 38px);
}

.seo-promo__price { display: grid; gap: 2px; padding-left: 20px; border-left: 2px solid var(--lime); }

.seo-promo__price b {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1;
  color: var(--white);
}

.seo-promo__price > span { font-size: 0.86rem; color: var(--faint); }

.seo-promo__art { position: relative; margin-block: -8px; pointer-events: none; }
.seo-promo__art img { max-width: none; width: 126%; margin-left: -13%; }

.seo-promo__art img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 58%, transparent 100%);
}

@media (min-width: 1000px) {
  .seo-promo__art { margin-right: -10%; }
  .seo-promo__art img { width: 118%; max-width: none; margin-left: -9%; }
}