MrColdCoffee

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

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

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

Редирект с http на https настройте правильно и всё будет работать

удалить overflow: visible;

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

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

Итак, вот как можно отследить клик по псевдоэлементу:

HTML:

<!-- Наш элемент, у которого есть псевдоэлемент after -->
<div class="element-for-click">
  <span>Текст</span>
</div>

CSS:

.element-for-click{
    position: relative;
    pointer-events: none;
   background:red;
   padding:20px;
}

.element-for-click:after {
    content: 'Псевдоэлемент';
    position: absolute;
    padding:20px;
    background-color: #4caf50;
    cursor: pointer;
    pointer-events: auto;
    text-align: center;
    top: 0;
    right:10%;
    color: #FFF;
    font-weight: bold;
}

JS:

document.querySelector('.element-for-click').addEventListener('click', ()=>{
   alert('Клик по псевдоэлементу');
});

При помощи CSS мы отключаем у родителя события указателя ( pointer-events: none; ) , а у псевдоэлемента устанавливаем pointer-events: auto; / pointer-events: all;

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

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

<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  );
	});
}

классы одного блока же

.element-animation.element-show.singl::after {
  transition:2s;
  right: -20%;
}

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

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

transform-origin: 50% 100%;
transform: perspective(300px) rotateX(25deg);

const navLink = document.querySelectorAll('.m_scrollspy ul .nav-link');
console.log(navLink);


for (let i = 0; i < navLink.length; i++) {
    navLink[i].onclick = () => {
// Удаляем класс у всех
       navLink.forEach(function(el){
           el.classList.remove('active');
       });
//Добавляем класс выбранному
   if (!navLink[i].classList.contains('active')) {
            navLink[i].classList.add('active')
        }
    }
    
}

вы забыли точку перед b в .b::after

<div class="circle" ></div>

.circle{
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-color: #000;
  border: 5px solid #FFF;
  outline: 5px solid green;
}

body{
   overflow-x: hidden;
   margin: 0;
}

.element {
  height: 70px;
  width: 270px;
  border-radius: 15px;
  margin-top: 10px;
  background-color: red;
  transform: translateX(-100%);
  animation: nudge 5s linear;
}

.element:nth-child(2){
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}
.element:nth-child(3){
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    animation-delay: 10s;
}

@keyframes nudge {
  100% { transform: translateX(100vw); }
}

У Вас #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 случай)

тык