Andrew

<meta name="viewport" content="width=device-width, initial-scale=1.0">

блока-попапа где то на главной странице(где лучше всего?) и скрывать его через css

const details = document.querySelectorAll('.dt');
    details.forEach(el => {
      el.addEventListener('click', () => {
        details.forEach(target => {
          target.removeAttribute('open');
        })
      });
    });

<div class="row">
 <div class="col-7">
  <div class="block1"></div>
  <div class="block2"></div>
 </div>
 <div class="col-5"></div>
</div>

.center-footer-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items:center;
}

var lastScrollTop = 0,
      scrollDirection = 0;
    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        if (st > lastScrollTop){
                scrollDirection = 1;
        } else {
                scrollDirection = 2;
        }
        lastScrollTop = st;
    console.log(scrollDirection);

    });

.single-goods h3{
//че угодно
}
.single-goods p{
//че угодно
}
.single-goods img{
//че угодно
}
.single-goods button{
//че угодно
}

var date_pub = new Date(document.querySelector("meta[property='article:published_time']").content).toUTCString();
window._io_config["0.2.0"].push({
      page_type: "article",
      page_language: "ru",
      article_publication_date: date_pub
    });

одинаковые тайтлы, сабтайтлы, текстовые блоки, ссылки и так далее

отличаются лишь размером шрифта или цветом