MrColdCoffee

<object type="image/svg+xml" data="demo.svg"></object>

использовать Unicode в стилях

div[data-tag*="\0410 \043A \0446 \0438 \044F " i] .el-item

удалить overflow: visible;

а для многоточия у класса qwe нужно делать обрезание текста

.second__wrapper .qwe{ ... }
.second__wrapper.open .qwe{ ... }

Если у карусели есть кнопки вперёд/назад (в случае с модалкой - кнопка закрытия), то можно отловить нажатие на физические кнопки стрелок/esc и имитировать нажатие на кнопки.
Ещё можно вызывать ту же функцию, что привязана к событию клика по кнопкам

1) id должны быть уникальными! замените "id" на "class" в разметке и "#" на "." в стилях (если они будут нужны)
2) Удалите width:100%; в table и все стили для #img , #nazv, #cost и #buy

const qty = document.querySelectorAll('.quantity');
	  for(let i=0;i<qty.length;i++){
		    let amount = qty[i].nextElementSibling;
		    let price = +amount.textContent;
		    qty[i].addEventListener('input', () => amount.textContent = qty[i].value*price);
	  }

<a href="#item1" onclick="activeList(event,this)" > add class to text 1 </a>
  <a href="#item2" onclick="activeList(event,this)"> add class to text 2 </a>
  <a href="#item3" onclick="activeList(event,this)" > add class to text 3 </a>

function activeList(e,element) {
	e.preventDefault();
	let li_id = element.getAttribute('href').substr(1);		
	document.querySelectorAll('.list li').forEach( (item)=>{		
		item.classList.toggle("active", item.id == li_id  );
	});
}

для nav добавить

overflow: scroll;
height: 100vh;
margin:0;
padding-top: 0;

У Вас #connect_phrase и #celebrity_phrase имеют position: relative; и отрицательный right
замените на left с положительным (вместо right:-250px; -> left:250px; )

переместите <style> в head или body, а то у Вас где-то между
уберите required у input type="submit"

в css:
#link_1:hover {
text-decoration-line: underline;
text-decoration-thickness: ???
cursor: pointer;
}

вот тут 1 в 1 случай)

тык

где стили для .header__arrow?
можно так:

.header__arrow{
    display: table;
    margin: 0 auto;
}

так?

для .slidingVertical span добавил
left:0; right:0; width:100%;

а для родителя position:relative;

<div style="min-height: 46px;<b>position:relative;margin-top: -12px; text-align: center;">

$('.experts_name').click(function() {
	$(this).next('.experts_data').css("display", $(this).next('.experts_data').css("display")=='none' ? 'block' : 'none' );
})

html

<div class="wrapper">

  <div class="left-block">
    1
  </div>
  
  <div class="right-block">
    2
  </div>

</div>

css

*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:0;
	padding:0;	
}
.wrapper{
  display: table;
  width: 100%;
  min-height:100vh;
  height:100%;
}
.left-block,.right-block{
  display: inline-block;
  min-height:100%;  
}
.left-block{width: 68%;background:green;}
.right-block{width: 32%;background:red;}