Ольга

Любому из блоков задать relative
внутрь добавить псевдоэлемент в виде круга,получится что-то типа

.item-1{position:relative;}
.item-1::after{
  content:'';
  width:50px;
  height:50px;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:100%;
  transfrom:translate(-50%, -50%);
  background:red;
}

про css фигуры можно почитать тут https://html5book.ru/css-figury/
про псевдоклассы https://html5book.ru/psevdoklassy/

На странице есть svg, в котором содержится элемент с id="logo-5play" . В этом элементе идет описание вектора изображения.
Вот тут подробнее dreamhelg.ru/2017/02/symbol-svg-sprite-detail-guide

так что либо поменять базовый svg либо просто вставить вместо тега внутри логотипа сразу картинку, при помощи обычного <img src=""/>

Самый нормальный вариант : делать через htaccess редиректы.
Если путь "только js":

let links=document.querySelectorAll('a');//находим все ссылки
for(var i = 0; i < links.length; i++) {//проходимся циклом
  links[i].href="https://anotherLink.com"; //заменяем ссылки
}

можно рамкой

.button::before{
  content:'';
  display:inline-block;
  border-right:10px solid red;
  border-top:10px solid transparent;
  height:0;
  width:0;
}

можно картинкой(фоновой или псевдоэлемент, если мутно - заюзать svg),
можно через новое свойство css clip-path https://webformyself.com/znakomstvo-s-css-svojstvo...

Для начала вы бы определились,а как оно будет выглядеть на мобильной версии, как будет выглядеть при переполнении(несколько записей в одной ячейке), а потом уже определяться с версткой.
ИМХО(да и не только мое), верстать нужно всегда с мобильной версии, с оглядкой на десктопную,а не наоборот. И дело не только в принципе Mobile First от Google, но и в том,что в мобильном варианте элементы идут в порядке потока информации,а на декстопе уже перемешиваются(перескакивают вправо-лево). если делать в обратном порядке, придется идти более сложным путем, т.к. придется менять элементы по вертикали, если изначальный порядок не был правильно угадан.

Если предугадать высоту ячеек нельзя, то лучший способ-это таблицы. Да и в целом - он самый простой. На мобильной версии либо добавляется скролл, либо творится непотребство в виде задания ячейкам и строкам display:block (вполне ходовой вариант,не стоит бояться). Основная проблема таблиц: в ячейках не совсем одинаково может работать position:absolute.

Для изменения жирности нужно подгрузить шрифт с этой жирностью. Браузер сам, конечно, может некоторым образом симулировать жирность или курсив, но если шрифт не системный для каждой жирности, начертания и их сочетаний нужно подгружать свои файлы. При этом их нужно еще корректно объявлять, например:

@font-face {
	font-family: 'Commissioner';
	src: url('fonts/Commissioner/Commissioner-Regular.eot');
	src: local('Commissioner Regular'), local('Commissioner-Regular'),
		url('fonts/Commissioner/Commissioner-Regular.eot?#iefix') format('embedded-opentype'),
		url('fonts/Commissioner/Commissioner-Regular.woff2') format('woff2'),
		url('fonts/Commissioner/Commissioner-Regular.woff') format('woff'),
		url('fonts/Commissioner/Commissioner-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Commissioner';
	src: url('fonts/Commissioner/Commissioner-Medium.eot');
	src: local('Commissioner Medium'), local('Commissioner-Medium'),
		url('fonts/Commissioner/Commissioner-Medium.eot?#iefix') format('embedded-opentype'),
		url('fonts/Commissioner/Commissioner-Medium.woff2') format('woff2'),
		url('fonts/Commissioner/Commissioner-Medium.woff') format('woff'),
		url('fonts/Commissioner/Commissioner-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

имя у шрифта одно, а вот жирность разная. При этом лучше не забывать о разных браузерах а также о том,что шрифты могут быть в системе пользователя(в этом случае ничего грузиться не будет). В целом, формат .eot - это атавизм для IE, но до сих пор лежит в готовых паках до кучи.

Тут скорее вопрос личного выбора и того,как изначально разрабатывался сайт. теги типа article и figure относятся к семантической верстке стандарта html5 , подробнее можно почитать тут https://htmlacademy.ru/blog/boost/frontend/semantics. Если сайт уже придерживается стратегии использования семантики - этому нужно продолжать следовать.

Сбрось стили кнопки:

border:none;
background:none;

Как вариант создать обработчик,который будет регистрироваться в момент открытия модального окна (либо вешать на событие открытия,либо разместить в самой модалке).
в итоге скрипт будет выглядеть как-то так:

let elements = document.querySelectorAll('.modal-body li a');//делаем выборку строк,на которых нужна обработка клика
elements.onclick = function() { //вешаем обработчик
    let id=this.id; //забираем id
    let inp=document.querySelectorAll('.form-group [name="parent_id"]'); //находим инпут
    inp.value=id; //втавляем id  в значение инпута
};

есть пара замечаний по верстке:

• использовать тег <a> не для ссылок - плохая практика, теги нужно использовать по назначению
  
• для верстки и скриптов лучше использовать классы либо id, привязка тегам в обоих случаях ведет к проблемам в будущем.
  
• для хранения данных(в данном случае id) лучше использовать атрибуты data, которые были придуманы как раз для этого
  

задай блоку отрицательный margin-top
или картинку опусти

Самый простой способ: для section прописать в стилях overflow:hidden, ну и див должен лежать в соответствующей ему секции

Например,можно запретить выполнение Вашего скрипта,пока нижний край экрана не достигнет конца слайда(или offset().Top следующего),т.е.

function getWinHeight(){//получаем высоту экрана
	if($(window).height()<document.body.clientHeight) winHeight=$(window).height();
	else winHeight=document.body.clientHeight;
}
getWinHeight();
window.onresize = function(){/*ON RESIZE*/
	getWinHeight()
}
var curElemID=0;
var scrollTop=0;
$(document).on('mousewheel DOMMouseScroll', function(event) {
	var scroll=$(window).scrollTop();
	var delta=((scrollTop-scroll)>0)?true:false;
	scrollTop=scroll;
	if(((winHeight+scrollTop) > a[curElemID+1].offsetTop) && delta){
		//движемся вниз,не достигли конца слайда
		return;
	}else{
			event.preventDefault();
			if(delay) return;

			/*--/ваш код/---*/
			
			$('html,body').animate({
				scrollTop: a[i].offsetTop
			});
			curElemID=i;
	}
});//