:root{
  --pump-border-radius:16px;
  --pump-active-color:#2087C7;
  --pump-shadow:0 14px 40px rgba(0,0,0,.35);
  --base-width: 1280px;
}

/* =========================
   Pump cards + drum
========================= */
.pump-section{
  font-family:"Montserrat",sans-serif;
  perspective:1600px;
  perspective-origin:center 50%;
  display:flex;
  justify-content:center;
  padding:60px 0;
}

/* сцена */
.pump-block{
  position:relative;
  width:98%;
  max-width:1190px;
  height:380px;

  perspective:800px;
  transform-style:preserve-3d;

  --press-scale:1;
  --press-z:0px;
  --shadow-y:14px;
  --shadow-blur:40px;
  --shadow-alpha:.35;

  transform:translateZ(var(--press-z)) scale(var(--press-scale));
  box-shadow:0 var(--shadow-y) var(--shadow-blur) rgba(0,0,0,var(--shadow-alpha));

  transition:
    transform .12s ease-out,
    box-shadow .12s ease-out,
    filter .12s ease-out,
    opacity .12s ease-out;
  will-change:transform, box-shadow, filter, opacity;
}

.pump-block.is-pressed{
  --press-scale:0.9925;
  --press-z:-5px;
  --shadow-y:8px;
  --shadow-blur:22px;
}

/* плоскость карточки */
.pump-block-inner{
  position:relative;
  width:100%;
  height:100%;

  background:#fff;
  border-radius:var(--pump-border-radius);

  transform-origin:top center;
  transform-style:preserve-3d;

  transition:transform .12s ease-out;
  will-change:transform;
}

/* при flip скрываем контент, но оставляем белую плоскость */
.pump-block.flipping .pump-content,
.pump-block.flipping .pump-image-side,
.pump-block.flipping .pump-more-link,
.pump-block.flipping .pump-text-btn-wrap{
  opacity:0;
  transition:opacity .18s linear;
}

.pump-block.active-block{
  z-index:1000;
  box-shadow:var(--pump-shadow);
}

/* =========================
   Layout inside card
========================= */
.pump-content{
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
  align-items:center;

  width:calc(100% - 340px);
  min-width:0;

  padding:24px;
  overflow:hidden;
  text-align:justify;
  text-indent:50px;
}

.pump-title.mobile-title{ display:none; }

.pump-title.desktop-title{
  margin:0 0 8px;
  font-size:1.6rem;
  font-weight:700;
  color:#2087C7;
  text-transform:uppercase;
  letter-spacing:.5px;
  text-indent:0;
  text-align:center;
}

.pump-text{
  color:#4b5563;
  line-height:1.45;
  font-size:1rem;
  max-height:100%;
}

.pump-image-side{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:340px;

  border-top-right-radius:var(--pump-border-radius);
  border-bottom-right-radius:var(--pump-border-radius);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  overflow:visible;
}

/* фон справа (клипуем только фон) */
.pump-bg-wrapper{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  z-index:1;
}
.pump-bg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pump-bg-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  box-shadow:
    inset 4px 4px 7px rgba(0,0,0,.8),
    inset -4px -4px 8px rgba(255,255,255,.25);
  transition:box-shadow 1.5s ease;
}

.pump-block.active-block .pump-bg-wrapper::after{
  box-shadow:
    inset 16px 16px 26px rgba(0,0,0,.45),
    inset -10px -10px 16px rgba(255,255,255,.2);
}

.inner-shadow{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .5s ease;
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,.35),
    inset -4px -4px 8px rgba(255,255,255,.25);
}

.pump-image-wrapper{
  position:relative;
  z-index:50;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.pump-image{
  position:relative;
  z-index:60;
  height:220px;
  width:auto;
  object-fit:contain;
  

  transform:scale(1) translateY(0);
  filter:grayscale(.7);

  will-change:transform, filter;
  transition:transform 1.4s cubic-bezier(.2,.9,.2,1), filter .8s ease;
}

.pump-block.active-block .pump-image{
  transform:scale(1.25) translateY(-12px);
  filter:grayscale(0);
}

.pump-table-wrapper{
  box-sizing: border-box;
  position:relative;
  z-index:20;
  width:90%;
  margin-bottom:14px;
  background:rgba(255,255,255,.95);
  border-radius:12px;
  padding:2px 10px;
  backdrop-filter:blur(2px);

  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.12),
    inset -2px -2px 6px rgba(255,255,255,.3);

  transition:box-shadow 1.6s ease, transform 1.6s ease;
}

.pump-block.active-block .pump-table-wrapper{
  box-shadow:
    0 6px 14px rgba(0,0,0,.25),
    inset -2px -2px 6px rgba(255,255,255,.25);
  transform:translateY(-3px);
}

.pump-table{
  width:100%;
  font-family:"Montserrat",sans-serif;
  border-collapse:separate;
  border-spacing:0 3px;
  font-size:.8rem;
}
.pump-table td{ padding:2px 4px; vertical-align:middle; }

.pump-table .label{
  text-align:right;
  color:#6b7280;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding-right:6px;
}
.pump-table .value{
  font-weight:600;
  color:#1f2937;
}

/* links */
.pump-more-link{
  color:#2087C7;
  font-weight:700;
  text-decoration:none;
}

/* button */
.pump-text-btn-wrap{ text-indent:0; }

.pump-text-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:10px;

  background:#2087C7;
  color:#fff;
  text-decoration:none;

  font-weight:700;
  font-size:.95rem;
  line-height:1.1;
  letter-spacing:.2px;

  box-shadow: 2px 4px 5px rgba(0,0,0,0.1), inset -3px -3px 3px rgba(13,54,79,0.2), inset 3px 3px 3px rgba(255,255,255,0.2);
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}

.pump-text-btn:hover{
  background:#1b76ad;
  filter:brightness(1.02);
  transform:translateY(-1px);
}
.pump-text-btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}
.pump-text-btn:visited{ color:#fff; }


/* =========================
   FINAL FIX (as in original, deduped)
   (block must stay near end to preserve cascade)
========================= */

/* 1) Сцена без белого фона/границ и без псевдо-подложек */
.pump-block{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
}
.pump-block::before,
.pump-block::after{
  content:none !important;
  display:none !important;
}

/* 2) Единая плоскость карточки + переменные для барабана/flip */
.pump-block-inner{
  background:#fff !important;
  border-radius:var(--pump-border-radius);

  transform-style:preserve-3d;
  transform-origin:top center;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  --inner-rot-x:0deg;
  --inner-scale:1;
  --flip-rot:0deg;

  transform:
    rotateX(calc(var(--inner-rot-x) + var(--flip-rot)))
    scale(var(--inner-scale)) !important;

  transition:transform .12s ease-out;
  will-change:transform;
}

/* flip */
.pump-block.flipping .pump-block-inner{
  --flip-rot:180deg;
  transition:transform 3.6s cubic-bezier(.2,.9,.2,1);
}

/* 3) Правая панель и её фон — строго внутри радиуса */
.pump-image-side{
  border-top-right-radius:var(--pump-border-radius);
  border-bottom-right-radius:var(--pump-border-radius);
}
.pump-bg-wrapper{
  border-radius:inherit;
  overflow:hidden;
}

/* сцена без тени, тень на inner */
.pump-block{ box-shadow:none !important; }
.pump-block-inner{
  box-shadow:0 var(--shadow-y) var(--shadow-blur) rgba(0,0,0,var(--shadow-alpha));
}

/* press-эффект переменными */
.pump-block{
  --shadow-y:14px;
  --shadow-blur:40px;
  --shadow-alpha:.35;
}
.pump-block.is-pressed{
  --shadow-y:8px;
  --shadow-blur:22px;
  --shadow-alpha:.28;
}

/* =========================
   FIX PACK (as in original, deduped)
========================= */

/* 1) pump-image не должен обрезаться карточкой */
.pump-block-inner{ overflow:visible !important; }
.pump-image-side,
.pump-image-wrapper{ overflow:visible !important; }

/* 2) pump-bg: "окошко" */
.pump-bg-wrapper{
  inset:2px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}
.pump-bg-wrapper::after{ border-radius:inherit !important; }
.pump-bg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* 3) вернуть позиционирование ссылок справа */
.pump-content{ position:relative; }

.pump-more-link{
  display:inline-block;
  text-indent:0 !important;
}

.pump-content .pump-more-link{ margin-left:auto; }

.pump-text-btn-wrap{
  display:flex !important;
  justify-content:flex-end !important;
  width:100%;
  text-indent:0 !important;
}

.pump-content > div[style*="justify-content: flex-end"]{
  width:100%;
}


/* Страховки для "подробнее" и выравнивания */
.pump-content{
  align-items:stretch !important;
}

.pump-content > div[style*="justify-content: flex-end"]{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-self:stretch !important;
}

.pump-content .pump-more-link{
  text-align:right;
  text-indent:0 !important;
}

/* Плавность тени на inner */
.pump-block-inner{
  transition:
    transform .12s ease-out,
    box-shadow .22s ease-out;
}

/* нормальное состояние */
.pump-block{
  --shadow-y:14px;
  --shadow-blur:40px;
  --shadow-alpha:.35;
}

/* pressed состояние (мягче) */
.pump-block.is-pressed{
  --shadow-y:10px;
  --shadow-blur:30px;
  --shadow-alpha:.30;
}

/* (если у desktop-title где-то остался text-indent) */
.pump-title.desktop-title{ text-indent:0; }

@media (max-width:900px){ 
  .pump-text{
  font-size: clamp(
    10px,
    calc((100vw - 600px) * 4 / 300 + 10px),
    14px
  );
  }
  .pump-text-btn {
  font-size: clamp(
    10px,
    calc((100vw - 600px) * 4 / 300 + 10px),
    14px
  ); 
  }
  .pump-title.desktop-title{
  font-size: clamp(
    12px,
    calc((100vw - 600px) * 8 / 300 + 12px),
    20px
  ); 
  }
  
  
  
:root{
    --pump-image-scale: clamp(
      0.75,
      (100vw - 600px) / 300 + 0.75,
      1
    );
     --pump-card-height: clamp(
      280px,
      calc((100vw - 600px) * 100 / 300 + 280px),
      380px
    );
  }
  
  .pump-bg-wrapper,
  .pump-image-wrapper,
  .pump-table-wrapper{
    transform: scale(var(--pump-image-scale));
    transform-origin: top center;
  }
  
    .pump-image-side{
    justify-content: flex-start;
  }
  
   .pump-image-side{
    width: clamp(
      200px,
      calc((100vw - 600px) * 140 / 300 + 200px),
      340px
    );
    height: var(--pump-card-height);
  }
  
  .pump-content{
    width: calc(100% - clamp(
      200px,
      calc((100vw - 600px) * 140 / 300 + 200px),
      340px
    ));
    height: clamp(
      280px,
      calc((100vw - 600px) * 100 / 300 + 280px),
      380px
    );
    padding: clamp(
      12px,
      calc((100vw - 600px) * 12 / 300 + 12px),
      24px
    );
  }
   .pump-image-wrapper{
    height: clamp(
      180px,
      calc((100vw - 600px) * 70 / 300 + 180px),
      250px
    );
  }
  
  .pump-block{
    height: clamp(
      280px,
      calc((100vw - 600px) * 100 / 300 + 280px),
      380px
    );
  }
  
  .pump-image{
    transform: translateY(0); /* без scale */
    height: clamp(140px, 140px + (100vw - 600px) * 80 /300, 220px);
  }
  
    .pump-table{
  font-size: clamp(
    6px,
    calc((100vw - 600px) * 5 / 300 + 6px),
    11px
  );
}
 .pump-table .label{
  font-size: clamp(
    6px,
    calc((100vw - 600px) * 5 / 300 + 6px),
    11px
  );
 }
  
}
@media (max-width:600px){
  
  .pump-section { height: auto; padding: 20px 0;}
  .pump-block{ height: auto; }
  .pump-bg { display: none; }
  
    .pump-title.mobile-title{
    display:block;
    width:98%;
    text-align:center;
    font-weight:700;
    margin:12px 5px 6px 5px;
    color:#2087C7;
    text-transform:uppercase;
    text-indent:0;
    order:1;
  }
  .pump-title.desktop-title{ display:none; }



  .pump-content{
    width:100%;
    height: auto;
    padding:24px 16px;
    margin-bottom: 20px;
  }

  .pump-image-side{
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    height:auto;
    border-radius:0 0 12px 12px;
  }

  .pump-image-wrapper{ height:120px; }
  .pump-image{ height:140px; }

  .pump-block-inner{
    display:flex;
    flex-direction:column;
    height:auto;
    border-radius: 5px;
  }

  .pump-image-side{
    position:relative !important;
    top:auto !important;
    right:auto !important;

    order:2;
    width:100% !important;

    border-radius: 0;
    justify-content: space-between;
  }

.pump-bg-wrapper::after{ box-shadow: none;}

  .pump-bg-wrapper{
    overflow:hidden !important;
  }

  .pump-content{
    order:3;
    width:100% !important;
    padding:24px 16px;
  }

  .pump-content a.pump-more-link{ display:inline-block; }

  .pump-content > div[style*="justify-content: flex-end"]{ width:100%; }

  .pump-text-btn-wrap{
    display:flex !important;
    justify-content:flex-end !important;
    width:100%;
    text-indent:0 !important;
  }
  
    .pump-text, .pump-text-btn, .pump-more-link {
  font-size: clamp(
    12px,
    calc((100vw - 300px) * 4 / 300 + 12px),
    16px
  );
  }

  .pump-title.mobile-title{
  font-size: clamp(
    12px,
    calc((100vw - 300px) * 8 / 300 + 12px),
    20px
  ); 
  }
  
  .pump-table-wrapper{
    width: 70%;
    left: 13%;
    z-index: 1000;
    clip-path: polygon(38px -10px, 110% -10px, 120% 110%,-10px 120%, -10px 32px);
    background:rgba(255,255,255,.7);
    border-radius: 5px;
    box-shadow: 5px 4px 10px rgba(0,0,0,0.3);
  }
  
  .pump-bg-wrapper,
  .pump-image-wrapper,
  .pump-table-wrapper{
    transform: scale(1);
    transform-origin: top center;
  }
  
   .pump-image-side{
    width: clamp(
      200px,
      calc((100vw - 300px) * 140 / 300 + 200px),
      340px
    );
    height: 250px;
  }
  
  .pump-content{
    width: calc(100% - clamp(
      200px,
      calc((100vw - 300px) * 140 / 300 + 200px),
      340px
    ));
    padding: 0 10px
  }

   .pump-image-wrapper {
    width: 82%;
    align-items: left;
    justify-content: left;
  }
  .pump-image {
    top: 55px;
    height: 170px;
    filter: drop-shadow(4px 4px 7px rgba(0,0,0,1));
  }
    .pump-table td{ padding:2px; }
    .pump-table{
  font-size: clamp(
    8px,
    calc((100vw - 300px) * 6 / 300 + 8px),
    14px
  );
  
}
 .pump-table .label{
  font-size: clamp(
    8px,
    calc((100vw - 300px) * 6 / 300 + 8px),
    14px
  );
    color: #444;
    text-shadow: 0 0 7px rgba(255,255,255,1);
 }
  
  
}


/* =========================
   FIX: авто-высота карточки >900px,
   картинка не меняет размер
========================= */
@media (min-width:901px){

  /* карточка может расти по высоте при переносе текста */
  .pump-block{
    height:auto;          /* вместо фиксированных 380px */
    min-height:380px;     /* сохраняем базовую высоту */
  }

  .pump-block-inner{
    display:flex;
    justify-content: flex-start;
    height:auto;
    min-height:380px;
  }


  /* контент не должен залезать под правую панель:
     добавляем снизу место, если текста много */
  .pump-content{
    padding-bottom:24px;  /* можно увеличить до 40-60px, если нужно */
  }
}





/* Плавный flip по центру (только когда .flipping) */
.pump-block.flipping .pump-block-inner{
  transform-origin: center center; /* ось через центр карточки */
  --flip-rot: 180deg;              /* полный разворот */

  /* медленно */
  transition: transform 1.4s cubic-bezier(.2,.9,.2,1);
}
/* 1) Уменьшаем 3D-искажение только во время flip:
   большее perspective => менее выраженная перспектива */
.pump-block.flipping{
  perspective: 2200px !important;
}

/* 2) Тень, которая остаётся видимой даже когда плоскость скрылась
   из-за backface-visibility:hidden */
.pump-block{
  position: relative; /* на всякий случай, якорь для ::after */
}

.pump-block.flipping::after{
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: var(--pump-border-radius);
  pointer-events: none;

  /* “тень карточки”, можно подстроить */
  box-shadow: 0 14px 40px rgba(0,0,0,.25);

  /* чуть проявляем, чтобы было понятно что “карточка есть” */
  opacity: .9;
}

/* 3) В момент flip можно ослабить тень самой плоскости, чтобы
   не было двойной тени (если сейчас тень на inner) */
.pump-block.flipping .pump-block-inner{
  box-shadow: none !important;
}

/* 1) Во время flip гасим "барабанный" наклон/масштаб, чтобы поворот был ровно 0 -> 180 */
.pump-block.flipping .pump-block-inner{
  --inner-rot-x: 0deg !important;  /* отключаем наклон барабана */
  --inner-scale: 1 !important;     /* отключаем масштаб барабана */
}

/* 2) Ось вращения через центр и меньше искажений */
.pump-block.flipping{
  perspective: 3400px !important;  /* больше perspective => меньше искажение */
}
.pump-block.flipping .pump-block-inner{
  transform-origin: center center !important;
}

/* 3) Не исчезать на половине: показываем обратную сторону во время flip */
.pump-block.flipping .pump-block-inner{
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* 4) Тень остаётся даже если контент скрывается */
.pump-block.flipping{
  position: relative;
}
.pump-block.flipping::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--pump-border-radius);
  pointer-events:none;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  opacity: .9;
}
.pump-block.flipping .pump-block-inner{
  position: relative;
  z-index: 1;
}


/* 1) Во время flip тень рисуем на .pump-block (она не исчезнет вместе с inner) */
.pump-block.flipping{
  box-shadow: 0 14px 40px rgba(0,0,0,.25) !important;
  opacity: 1 !important;           /* на случай если JS/эффекты меняют opacity */
  filter: none !important;         /* на случай если есть filter при эффектах */
}

/* 2) Не гасим тень у inner во время flip (если у вас раньше добавлялось box-shadow:none) */
.pump-block.flipping .pump-block-inner{
  box-shadow: 0 var(--shadow-y) var(--shadow-blur) rgba(0,0,0,var(--shadow-alpha)) !important;
}

/* УБРАТЬ белую "плашку" у pump-block во время flip */
.pump-block.flipping{
  background: transparent !important;
  box-shadow: none !important;

  /* ключевое: убиваем filter (он у вас включается inline) */
  filter: none !important;

  /* и убираем подсказки композитору на filter */
  will-change: transform !important;
}

/* гарантируем, что back-plate не рисуется */
.pump-block.flipping::before{
  content: none !important;
  display: none !important;
}

/* оставляем только тень-маркер (без заливки) */
.pump-block.flipping::after{
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: var(--pump-border-radius);
  pointer-events: none;
  background: transparent !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

/* 0) Для контроля: во время flip запрещаем любому фону/градиенту появляться на pump-block */
.pump-block.flipping{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
}

/* 1) Жёстко выключаем ОБА псевдоэлемента на pump-block во время flip
      (это важнее, чем только ::before) */
.pump-block.flipping::before,
.pump-block.flipping::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Рисуем тень-маркер отдельным элементом: НЕ на pump-block, а на inner
      (чтобы не было "второй карточки" на неподвижном pump-block) */
.pump-block.flipping .pump-block-inner{
  box-shadow: 0 14px 40px rgba(0,0,0,.25) !important;
}
/* Контент прячем только после ~90° (половина 2.8s = 1.4s) */
.pump-block.flipping .pump-content,
.pump-block.flipping .pump-image-side,
.pump-block.flipping .pump-more-link,
.pump-block.flipping .pump-text-btn-wrap{
  opacity: 0 !important;
  transition: opacity 0.1s linear 0.1s !important; 
}











/* Ныряние вниз/вверх во время flip */
@keyframes pump-dive-down{
  0%   { top: 0; left: 0;}
  7%  { top: 110px; left: 3;}
  20%  { top: 120px;  left: 5px;}
  40%  { top: 5px;  left: -4;}
  60%  { top: 0px;  left: -7px;}
  100% { top: 0px;  left: 2000px;}
}

/* включаем только на время .flipping */
.pump-block.flipping{
  top: 0; /* базовое значение */
    animation: pump-dive-down 1.4s ease-in-out both;
}

















/* фикс: кнопка не должна менять свою геометрию, иначе hover/click срывается */
.pump-text-btn:hover,
.pump-text-btn:active{
  transform: none !important;
}

/* 1) Явно поднимаем левый контент над правой панелью */
.pump-content{
  position: relative;
  z-index: 5;
}

/* 2) Правая панель ниже по слоям */
.pump-image-side{
  position: absolute; /* у вас уже так, но оставим явно */
  z-index: 1;
}

/* 3) На всякий случай: фон/картинка справа не должны ловить мышь */
.pump-bg-wrapper,
.pump-bg,
.pump-bg-wrapper::after,
.inner-shadow{
  pointer-events: none;
}

/* 4) Кнопка/ссылка — ещё выше */
.pump-text-btn,
.pump-more-link{
  position: relative;
  z-index: 10;
}


@media (min-width: 901px){

  .pump-block,
  .pump-block-inner{
    height: auto;
    min-height: unset;
  }


  .pump-text{
  font-size: clamp(
    10px,
    calc((70vw - 630px) * 4 / 570 + 10px),
    14px
  );
  }
  .pump-text-btn {
  font-size: clamp(
    10px,
    calc((70vw - 630px) * 4 / 570 + 10px),
    14px
  ); 
  }
  .pump-title.desktop-title{
  font-size: clamp(
    12px,
    calc((70vw - 630px) * 16 / 570 + 12px),
    28px
  ); 
  }
  
  .pump-table{
  font-size: clamp(
    6px,
    calc((70vw - 630px) * 5 / 570 + 6px),
    11px
  );
}
 .pump-table .label{
  font-size: clamp(
    6px,
    calc((70vw - 630px) * 5 / 570 + 6px),
    11px
  );
 }
 
 :root{
    --pump-image-scale: clamp(
      0.75,
      (70vw - 960px) / 360 + 0.75,
      1
    );
     --pump-card-height: clamp(
      280px,
      calc((70vw - 960px) * 100 / 240 + 280px),
      380px
    );
  }
  
  .pump-bg-wrapper,
  .pump-image-wrapper,
  .pump-table-wrapper{
    transform: scale(var(--pump-image-scale));
    transform-origin: top center;
  }
  
    .pump-image-side{
    justify-content: flex-start;
  }
  
   .pump-image-side{
    width: clamp(
      180px,
      calc((70vw - 840px) * 60 / 360 + 250px),
      340px
    );
    height: var(--pump-card-height);
  }
  
  .pump-content{
    width: calc(100% - clamp(
      180px,
      calc((70vw - 840px) * 60 / 360 + 250px),
      340px
    ));
    height: clamp(
      280px,
      calc((70vw - 960px) * 100 / 360 + 280px),
      380px
    );
    padding: clamp(
      12px,
      calc((70vw - 630px) * 12 / 570 + 12px),
      24px
    );
  }
   .pump-image-wrapper{
    height: clamp(
      180px,
      calc((70vw - 840px) * 70 / 360 + 180px),
      250px
    );
  }
  
  .pump-block{
    height: clamp(
      280px,
      calc((70vw - 840px) * 100 / 360 + 280px),
      380px
    );
  }
  
  .pump-image{
    transform: translateY(0); /* без scale */
    height: clamp(140px, 140px + (70vw - 630px) * 80 /570, 220px);
  }
  
    .pump-block,
  .pump-block-inner{
    height: var(--pump-card-height);
    min-height: var(--pump-card-height);
  }
}
.pump-block.flipping .pump-content {
  opacity: 0 !important;
  transition: opacity 0s !important;  /* мгновенное скрытие */
}

.pump-block.flipping .pump-title {
  opacity: 0 !important;
  visibility: hidden !important;  /* двойное скрытие */
}

.pump-image img {
  filter: drop-shadow(4px 4px 7px rgba(0,0,0,0.6));
}