/* ============================================================
   STAGE-X ASAKUSA — Index (LP)
   Breakpoints: 1200 / 900 / 640
   ============================================================ */

/* --- header (LP: absolute, overlaid on hero) --------------------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:flex-end;align-items:center;
  padding:clamp(18px,2vw,28px) clamp(14px,2vw,24px) clamp(18px,2vw,28px) var(--pad-x);
}

/* SNS icons (X / Instagram) — 右上、アイコン間は詰める */
.header-sns{display:flex;align-items:center;gap:2px}
.header-sns a{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;color:#fff;opacity:.85;
  transition:opacity .3s;
}
.header-sns a:hover{opacity:1}
.header-sns img{
  display:block;width:auto;height:22px;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.5));
}
.header-sns a:first-child img{height:20px}

/* --- hero -------------------------------------------------------- */
.hero{position:relative;min-height:min(720px,88svh);background:#000;overflow:visible}
/* MV下の黒帯（確認のため暫定で赤。OK なら #000 に戻す） */
.hero-pad{height:clamp(30px,4vw,60px);background:#000}
.hero__media{position:absolute;inset:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform-origin:center;
  /* 仮KV画像のロゴを少し大きく見せるため軽くトリミング（クライアントFB 2026-09-29）。
     本番素材（ロゴ無し）に差し替わったら scale を 1 に戻す。 */
  transform:scale(1);
  will-change:transform;
  /* ウーファーの単発低音「ドゥぅぅ...」→ 長い休息 → 「ドゥぅぅ...」 */
  animation:wooferThump 4.5s cubic-bezier(.08,.9,.35,1) infinite;
}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.hero__slide.is-active{opacity:1}

/* ドゥぅぅぅ...（鋭い立ち上がり→長い余韻→静寂） */
@keyframes wooferThump{
  0%   { transform:scale(1); }
  2%   { transform:scale(1.014); }   /* ドッ！（一気に膨らむ） */
  10%  { transform:scale(1.008); }   /* ぅぅ...（余韻） */
  22%  { transform:scale(1.003); }
  35%  { transform:scale(1); }        /* 完全に減衰 */
  100% { transform:scale(1); }        /* 長い静寂 */
}
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none}
}

/* HEROのKVに重ねるオーバーレイ（ロゴ + 告知テキスト）
   grid の 1fr / auto / 1fr で、中央行にロゴを置くと HERO 上下中央にロックされる。
   テキストは3行目の上端(align-self:start)に置いて、ロゴから下にオフセット。
   ※ z-index はビネット(.hero::after z:3) より上に置いて文字が暗くならないように */
.hero__overlay{
  position:absolute;inset:0;z-index:5;pointer-events:none;
}
.hero__brand{
  /* 影のスタックは logo2 SVG が自前の暗ハロー(cls-1)を持つので無効化。
     ただしアニメ keyframes は var(--logo-shadow) を参照しているので空の変数を宣言。 */
  --logo-shadow: none;
  position:absolute;
  left:50%;top:50%;
  width:clamp(240px,46.7vw,420px);
  height:auto;
  translate:-50% -48.6%;
  display:block;
  animation: heroLogoIn 2.5s cubic-bezier(.2,.7,.25,1) .2s both;
}
/* ブラーからスッと焦点が合う「ブワッと浮かび上がる」登場 */
@keyframes heroLogoIn{
  0%{
    opacity:0;
    filter:blur(24px);
    transform:translateY(16px);
  }
  60%{
    opacity:1;
  }
  100%{
    opacity:1;
    filter:blur(0);
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion:reduce){
  .hero__brand{animation:none}
}
/* SPIN FB 2026-09-30：KV下端に配置（以前は overlay grid 中央だった）
   ・transform は data-reveal のアニメで潰れるので、
     センタリングは left:0/right:0 + text-align:center で行う */
.hero__caption{
  position:absolute;left:0;right:0;bottom:calc(clamp(24px,4vw,56px) - 2em);
  z-index:5;
  margin:0;
  color:#fff;text-align:center;
  font-size:clamp(22px,2.6vw,36px);
  font-weight:900;
  line-height:1.25;
  letter-spacing:.02em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 3px 10px rgba(0,0,0,.7);
  word-break:keep-all;
  overflow-wrap:normal;
  pointer-events:none;
}
/* モバイルのみ「2月」の後で改行、PC は非表示 */
.hero__caption .br-sp{display:none}
@media (max-width:640px){
  .hero__caption .br-sp{display:inline}
}
/* 「年」「月」だけ小さく */
.hero__caption small{
  font-size:.68em;
  font-weight:inherit;
  vertical-align:baseline;
  margin:0 .12em;
}
/* 「オープン予定」だけ 1.15倍に強調 */
.hero__caption strong{
  font-weight:inherit;
  font-size:1.15em;
}

/* テキストを1文字ずつタイプライター的に出現（JSが .ch で1文字ずつラップ）
   opacity を 1ms で 0→1 に切り替え、delay で順次表示 = 瞬間タイピング感 */
.hero__caption .ch{
  display:inline-block;
  opacity:0;
  animation:heroCharIn 1ms linear both;
  animation-delay:calc(var(--i, 0) * 55ms + 500ms);
}
@keyframes heroCharIn{
  from{opacity:0}
  to  {opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hero__caption .ch{opacity:1;animation:none}
}

/* ロゴが負けないように、周辺減光（ビネット）+ 下端の暗いフェード */
.hero::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 55% at 50% 50%,rgba(7,9,15,0) 40%,rgba(7,9,15,.55) 100%),
    linear-gradient(180deg,rgba(7,9,15,.35) 0%,rgba(7,9,15,0) 22%,rgba(7,9,15,0) 60%,rgba(7,9,15,.92) 100%);
}

/* KV切り替えドット：hero の右下に絶対配置
   ※現在は非表示（後で戻せるよう DOM は残す。表示に戻すには display:flex に）*/
.hero__dots{
  display:none;
  position:absolute;right:var(--pad-x);bottom:clamp(20px,3vw,32px);z-index:5;
  flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0;justify-content:flex-end;
  max-width:min(320px,calc(100% - var(--pad-x) * 2));
}
.hero__dots button{
  width:22px;height:3px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .3s;
  position:relative;
}
/* 44px のタップ領域を確保 */
.hero__dots button::after{content:"";position:absolute;inset:-14px -3px}
.hero__dots button[aria-selected="true"]{background:#fff}

/* 「※画像はイメージです」— KV下端に極小 + 半透明で控えめに */
.hero__disclaimer{
  margin:0;padding:4px clamp(12px,2vw,20px);
  color:#fff;opacity:.4;
  font-size:clamp(10px,0.85vw,11px);letter-spacing:.04em;
  text-align:right;
  pointer-events:none;
}

/* --- hero text (KV下のテキストブロック) -------------------------- */
.hero-text{
  padding:clamp(48px,6vw,88px) var(--pad-x);
  display:flex;flex-direction:column;gap:14px;
  position:relative;z-index:2;
}
.hero-text .hero__eyebrow{
  margin:0;font-family:var(--font-en);
  font-size:clamp(15px,1.5vw,20px);letter-spacing:.3em;color:var(--accent);
}
.hero-text h1{
  margin:0;
  font-size:clamp(24px,3vw,40px);font-weight:700;line-height:1.4;letter-spacing:.03em;color:#fff;
}
.hero-text .hero__sub{
  margin:0;
  font-size:clamp(13px,1.1vw,15px);color:var(--text-mute);letter-spacing:.05em;
}

/* ============================================================
   PROMO BANNER — 2027.FEB OPEN
   ・斜線は 1枚レイヤ（.promo-banner__stripes）を画面幅いっぱいに absolute で敷く
     → 座標系が1つなので、段差なく、アニメも途切れず横に流れる
   ・SVG（自身に黒背景 rect を持たせた版）を上に重ねて、SVGの黒背景で斜線を遮蔽
   ・上下の水平線は ::before / ::after で幅いっぱい
   ============================================================ */
.promo-banner{
  --promo:#5ee0ff;                 /* A: ブランドの --accent と同じ色に */
  --bar:clamp(5px,0.6vw,8px);      /* G: 上下の水平線を半分の太さに */
  --stripe-a:60px;                  /* 斜線（シアン部分）の太さ */
  --stripe-b:60px;                  /* 隙間（黒部分）の太さ */

  position:relative;
  margin-top:calc(var(--promo-gap) + 50px);  /* HEROからの余白 + 50px */
  padding-block:var(--bar);
  background:#000;
  z-index:4;
  overflow:hidden;
  isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  opacity:.5;                       /* バナー全体を半透明に */
}

/* 全画面斜線ストライプ：上下水平線の内側全体に敷く1枚レイヤ
   ・background-size を明示して 1タイル = 水平方向1周期にし、
     background-position を「ちょうど1タイル分」動かすことで seamless loop。
   ・水平周期 = (stripe-a + stripe-b) × √2  ← -45度斜線のx軸投影 */
.promo-banner__stripes{
  --period:calc((var(--stripe-a) + var(--stripe-b)) * 1.41421356);
  position:absolute;
  left:0;right:0;top:var(--bar);bottom:var(--bar);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--promo) 0 var(--stripe-a),
      #000        var(--stripe-a) calc(var(--stripe-a) + var(--stripe-b))
    );
  background-size:var(--period) 100%;
  animation:promoStripeFlow 10s linear infinite;
  z-index:1;
  pointer-events:none;
}
@keyframes promoStripeFlow{
  from{background-position:0 0}
  to  {background-position:calc(var(--period) * -1) 0}
}

/* 上下の水平線 */
.promo-banner::before,
.promo-banner::after{
  content:"";position:absolute;left:0;right:0;
  height:var(--bar);
  background:var(--promo);
  pointer-events:none;
  z-index:3;
}
.promo-banner::before{top:0}
.promo-banner::after{bottom:0}

/* 中央 SVG：斜線の上に重ねる。SVG自身が黒背景を持つので周囲の斜線を遮蔽する */
.promo-banner__body{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  min-width:0;
}
.promo-banner__body > img{
  display:block;width:100%;height:auto;
  max-width:min(380px,42vw);      /* E: バナー全体を小さくして存在感を落とす */
}

/* 「@浅草・蔵前エリア」を消した位置に、横スクロールのテキストを流す */
.promo-banner__ticker{
  position:absolute;
  left:11%;right:11%;             /* SVG内の縦バーの内側 */
  bottom:14%;                      /* 元の@位置に相当 */
  height:8.5%;                     /* @テキストの高さ相当 */
  overflow:hidden;
  pointer-events:none;
}
.promo-banner__ticker-track{
  display:flex;
  width:max-content;height:100%;
  animation:promoTickerScroll 18s linear infinite;
}
.promo-banner__ticker-track img{
  display:block;
  height:100%;width:auto;
  flex-shrink:0;
  padding-right:2em;               /* 画像同士のスペース（1枚のSVG内で完結） */
}
/* -50% で 1枚分ちょうど左シフト（2枚並べてる） */
@keyframes promoTickerScroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .promo-banner__ticker-track{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .promo-banner__stripes{animation:none!important}
}

/* --- about ------------------------------------------------------- */
.about{padding:calc(var(--section-y) + 100px) var(--pad-x) var(--section-y);display:flex;flex-direction:column;gap:clamp(40px,5vw,72px);position:relative;z-index:2}
.about__head{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px)}
.about__head h2{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(56px,9.2vw,132px);line-height:.95;letter-spacing:.02em;
}
/* CROSS THE DIMENSION より大きく太いメインメッセージ */
.about__tagline{
  margin:0;
  font-size:clamp(40px,7vw,104px);
  font-weight:900;
  line-height:1.25;
  letter-spacing:.02em;
  color:#fff;
}
/* サブ説明（3行改行、少し大きく太く） */
.about__lead{
  margin:0;
  font-size:clamp(20px,2.7vw,38px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.05em;
  color:#fff;
}
/* powered by TxD のクレジット（クライアントFB＝もう一段大きく） */
.about__credit{
  margin:clamp(20px,2vw,28px) 0 0;
  font-size:clamp(15px,1.6vw,20px);
  font-weight:700;
  letter-spacing:.12em;
  color:#fff;
  display:flex;
  align-items:center;
  gap:.55em;
}
.about__credit-logo{
  height:2.2em;
  width:auto;
  display:inline-block;
  vertical-align:middle;
}

/* ============================================================
   About head のグリッチ演出
   ------------------------------------------------------------
   data-reveal が発火した瞬間から、色ズレ / 位置ズレ / ちらつき を
   複合させて出現。steps() でジャンプ感、text-shadow の RGB分離、
   filter:hue-rotate で色を暴れさせる。
   通常の fadeUp より優先させたいので specificity を上げる。
   ============================================================ */
.about__head [data-reveal-in="true"]{
  animation:aboutGlitchIn 1.4s linear var(--rd,0s) forwards;
}
@keyframes aboutGlitchIn{
  0%{
    opacity:0;
    transform:translate(0,0);
    filter:blur(6px);
    clip-path:inset(0);
  }
  4%{
    opacity:1;
    transform:translate(-8px,0);
    filter:blur(0) hue-rotate(-45deg) saturate(1.6);
    text-shadow:3px 0 #ff2f8a,-3px 0 #00fff2;
    clip-path:inset(0);
  }
  8%{
    opacity:1;
    transform:translate(6px,-2px);
    filter:hue-rotate(35deg);
    text-shadow:-3px 0 #ff2f8a,3px 0 #00fff2;
    clip-path:inset(20% 0 55% 0);
  }
  12%{
    opacity:1;
    transform:translate(-4px,3px);
    clip-path:inset(55% 0 15% 0);
  }
  16%{
    opacity:1;
    transform:translate(3px,-1px);
    filter:hue-rotate(-25deg);
    text-shadow:2px 0 #ff2f8a,-2px 0 #00fff2;
    clip-path:inset(0);
  }
  20%,64%{
    opacity:1;
    transform:translate(0,0);
    filter:none;
    text-shadow:none;
    clip-path:inset(0);
  }
  68%{
    opacity:1;
    transform:translate(-3px,0);
    text-shadow:2px 0 #ff2f8a,-2px 0 #00fff2;
    filter:hue-rotate(20deg);
    clip-path:inset(0);
  }
  72%{
    opacity:1;
    transform:translate(3px,1px);
    clip-path:inset(30% 0 40% 0);
  }
  78%,100%{
    opacity:1;
    transform:translate(0,0);
    filter:none;
    text-shadow:none;
    clip-path:inset(0);
  }
}
@media (prefers-reduced-motion:reduce){
  .about__head [data-reveal-in="true"]{
    animation:rvFadeUp .01ms linear forwards;
  }
}

/* PC: about__text を上に敷いて、features を下段の3列横並びに（クライアントFB反映） */
.about__body{display:flex;flex-direction:column;gap:clamp(28px,3vw,44px);margin-top:50px}
.about__text{display:flex;flex-direction:column;gap:24px;font-size:clamp(15px,1.2vw,17px);line-height:2.05;color:#d5dbe5;max-width:56em}
.about__text p{margin:0}

/* SPIN FB 2026-09-30：01と02/03のラインを揃える（grid の stretch + body に flex:1） */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);align-items:stretch}
.feature{
  background:var(--surface);
  border:1px solid var(--accent);   /* 最初から水色の線 */
  padding:clamp(24px,2.4vw,32px) clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(14px,1.6vw,20px);
  height:100%;
}
/* 縦横比の違うSVGを一定サイズのマス目に収める。
   ・width と height を両方明示（aspect-ratio だけだと SVG に伸ばされる）
   ・align-items:center でアイコンをコンテナ中央揃え */
.feature__icon{
  flex:none;
  width:clamp(64px,7vw,92px);
  height:clamp(64px,7vw,92px);
  display:flex;align-items:center;justify-content:center;
}
.feature__icon img{
  max-width:100%;max-height:100%;display:block;
  /* ネオン発光を強めに（3層：内側白 + 近距離 + 広がる光） */
  filter:
    drop-shadow(0 0 3px  rgba(186,227,249,.9))
    drop-shadow(0 0 9px  rgba(94,224,255,.7))
    drop-shadow(0 0 22px rgba(94,224,255,.4));
}
.feature__body{
  display:flex;flex-direction:column;gap:8px;
  min-width:0;
  flex:1 1 auto;
}
/* 数字は Noto Sans JP Black。半透明の大きな装飾として使い、
   負の margin-bottom で下の見出しに約40%重ねる */
.feature__no{
  margin:0 0 -0.4em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(40px,4.5vw,64px);
  letter-spacing:.02em;
  color:var(--accent);
  opacity:.5;
  line-height:1;
}
.feature h3{
  margin:0;
  font-size:clamp(19px,1.7vw,24px);
  font-weight:700;
  color:#fff;
  line-height:1.35;
  letter-spacing:.01em;
}
/* 本文テキスト（最後の p）を card 下端へ押し出して、3枚の本文下ラインを揃える */
.feature__body > p:last-child{
  margin-top:auto !important;
}
.feature p:not(.feature__no){
  margin:0;
  font-size:clamp(13px,1.1vw,14px);
  line-height:1.85;
  color:var(--text-dim);
}

/* --- overview table ----------------------------------------------
   クライアントFB(2026-09-29)＝概要欄はフォント大きめ・目立たせたい */
.overview{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);margin-top:60px}
.overview dl{
  margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,64px);
}
.overview .row{display:flex;gap:28px;padding:26px 0;border-top:1px solid var(--line)}
.overview .row:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
/* 5行になったので用途行を左右2カラムに跨らせる（右端の空セル対策） */
.overview .row--span{grid-column:1 / -1}
.overview dt{width:170px;flex:none;color:var(--text-dim);font-size:clamp(15px,1.3vw,18px);letter-spacing:.06em}
.overview dd{margin:0;color:#fff;font-size:clamp(17px,1.5vw,21px);line-height:1.6;letter-spacing:.03em}

/* --- links ------------------------------------------------------- */
.links{padding:var(--section-y) var(--pad-x);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);position:relative;z-index:2}
.links__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px)}
.link-card{
  background:var(--surface);border:1px solid var(--line);
  padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  transition:border-color .3s,transform .3s;
}
.link-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.link-card__inline-logo{
  display:inline-block;
  height:1.8em;                /* 前の .9em の倍 */
  width:auto;
  vertical-align:-0.5em;       /* サイズが大きくなったのでベースライン再調整 */
  margin-left:.35em;
}
/* カテゴリラベル（左カード「ホログラフィックステージ」）。
   日本語カタカナは Bebas Neue の欧文用トラッキング(.26em)だと間伸びするので詰め気味に。*/
.link-card__cat{
  margin:0;
  font-family:'Noto Sans JP','Helvetica Neue',sans-serif;
  font-size:clamp(14px,1.2vw,16px);
  letter-spacing:.02em;
  color:var(--accent);
  font-weight:500;
}
/* カード見出し。左カード「Eyeliner® とは？」を大きく（クライアントFB反映） */
.link-card h3{margin:10px 0 6px;font-size:clamp(26px,2.6vw,38px);font-weight:700;color:#fff;line-height:1.35;letter-spacing:.02em}
.link-card p{margin:12px 0 0;font-size:clamp(13px,1.1vw,14px);line-height:1.8;color:var(--text-dim)}
/* 右カード「powered by [TxD-logo]」の見出しは、上の hero見出し拡大に釣られないよう
   元のサイズ感に固定する（ロゴ高さ 1.8em の基準もここに戻る）*/
.link-card__powered{
  display:flex;align-items:center;gap:.7em;
  margin:8px 0 8px;
  font-size:clamp(19px,1.8vw,24px);
  letter-spacing:normal;
}
.link-card__powered .link-card__inline-logo{
  vertical-align:baseline;
  margin-left:0;
  height:1.8em;
}
.link-card__powered-text{
  /* Bebas Neue は全て大文字表示になるため、混合大小文字用に汎用フォントを指定 */
  font-family:'Noto Sans JP','Helvetica Neue',sans-serif;
  font-size:clamp(15px,1.4vw,18px);
  letter-spacing:.04em;
  color:var(--text-dim);
  font-weight:500;
  text-transform:none;
}
.link-card svg{flex:none;width:clamp(32px,3vw,40px);height:auto}

/* --- contact section --------------------------------------------- */
.contact{
  padding:var(--section-y) var(--pad-x) calc(var(--section-y) + 150px);
  display:flex;justify-content:space-between;align-items:center;gap:clamp(32px,6vw,80px);
  position:relative;z-index:2;
}
.contact__body{display:flex;flex-direction:column;gap:20px;max-width:720px}
.contact__body h2{margin:0;font-family:var(--font-en);font-weight:400;font-size:clamp(52px,5.5vw,72px);line-height:1;letter-spacing:.02em;color:#fff}
.contact__body p{margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.95;color:#d5dbe5}

/* ============================================================
   BREAKPOINT: 1200px
   ============================================================ */
@media (max-width:1200px){
  .about__body{gap:40px}
  .overview dl{gap:0 40px}
}

/* ============================================================
   BREAKPOINT: 900px — 2カラムを1カラムへ
   ============================================================ */
@media (max-width:900px){
  .overview dl{grid-template-columns:1fr}
  .overview .row{border-bottom:none!important}
  .overview .row:last-child{border-bottom:1px solid var(--line)!important}
  .links__grid{grid-template-columns:1fr}
  .contact{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .hero__dots{max-width:calc(100% - var(--pad-x) * 2)}
  /* features は3列 → 1列に。クライアントFB: スマホは縦並びで OK */
  .features{grid-template-columns:1fr}
}

/* ============================================================
   BREAKPOINT: 640px — スマホ
   ============================================================ */
@media (max-width:640px){
  .hero{min-height:min(560px,80svh)}
  .about__head h2{font-size:clamp(46px,13vw,66px)}
  .overview .row{flex-direction:column;gap:4px;padding:14px 0}
  .overview dt{width:auto;font-size:12px}
  .hero__dots button{width:16px}
  /* 旧 .hero__logo 幅上書き（220px cap）は削除。新 .hero__brand は clamp に任せる */
  .hero__overlay{gap:clamp(16px,3vw,24px)}
  .header-sns a{width:38px;height:38px}
  .header-sns img{height:20px}
  .header-sns a:first-child img{height:18px}
  .hero-text{padding-top:clamp(32px,6vw,52px);padding-bottom:clamp(32px,6vw,52px)}
  .promo-banner__body img{max-width:min(62vw,260px)}
}