Виталий Першин

.clients__box {
  outline: 1px solid red;
  margin: 0 40px;
  margin-bottom: 20px;
  width: calc(100% / 3 - 80px) !important;
}

.ticket__flex .ticket__item .inner__ticket {
    overflow-x: scroll;
    max-width: 1400px;
    width: 100%;
    -webkit-mask: linear-gradient( to left, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100% );
}

let el = document.querySelector('#target');
	let coords = el.getBoundingClientRect();
	window.scrollTo({
		top: coords.top + window.scrollY,
		behavior: "smooth",
	});

$("html, body").animate({
            scrollTop: $('#target').offset().top
        }
    );

<div class="main-container">
    <img class="main-container__picture" src="images/bg.png" alt="Background">
    <!-- main-container__block-1 block-1 - Это микс, блок который модифицируется элементом другого блока или другим блоком  -->
    <div class="main-container__block-1 block-1">
        <div class="block-1__content">
            <div class="block-1__text">
                <p>Your Title Goes Here Make It Long & Maybe 3 Lines</p>
            </div>
            <div class="block-1__buttons">
                <!-- block-1__btn btn - Это тоже микс  -->
                <div class="block-1__btn btn"><a class="btn__link" href="#">explore</a></div>
                <div class="block-1__btn btn"><a class="btn__link" href="#">Add to cart</a></div>
            </div>
        </div>
    </div>
</div>

возможно надо этот элемент сделать блоком, типо: list-headet или как?

<div class="header">
    <h1 class="header__title">Title</h1>
    <p class="header__desc">Description</p>
    <ul class="header__list list">
      <li class="list__item"><a href="#" class="list__link">link</a></li>
      <li class="list__item"><a href="#" class="list__link">link</a></li>
      <li class="list__item"><a href="#" class="list__link">link</a></li>
    </ul>
  </div>