Шохрух Шаймардонов

Не благодарите
https://stackoverflow.com/a/4126871/8728290

Вот вам подсказка

Используйте localStorage для обмена данными между страницами. Самый простой костыль

Читайте оф.доки

А чтобы направлялось с текущего места до точки А, напишите скрипт, который получает разрешение на определение местоположения пользователя и передает в качестве параметра к ссылке

Готовый пример тут

elem.getElementsByClassName() возвращает кошлекцию, а не конкретный элемент. Т.е. массив.

function createSmallField() {
    const card = document.createElement('div')
          card.className = 'field-card'

    for(let i = 0; i < SMALL_FIELD; i++) {
        const   insideExistDiv = document.getElementsByClassName('field')[0];
                insideExistDiv.appendChild(card)
    }
}

Основные советы уже выше даны. А также данная верстка не проходит по нынешним стандартам "адаптивного" сайта, поэтому дополню ссылками на темы, которые стоит изучить как начинающему верстальщику/фронтендеру:
1. Основы отзывчивого (адаптивного) дизайна [Google Developers]
2. Медиа запросы [MDN]
3. Базисно о понятиях адаптивного, отзывчивого и рези... [VYSOKOFF Blog]

tr - строка
td - столбец

И как вы себе представляете 2 строки внутри строки?

Почему не работает display на радио-кнопке по селектору :checked?

Потому что селектор неверный.
С вашей разметкой не получится добиться желаемого без js. Ибо вы хотите достучаться до элемента, который по факту находится выше чем целевой элемент.
А ваш нынешний селектор ишет вложенный в инпут заголовок(т.е. дочерний), а его как видим нет там, и не может быть

У вас проблема в sibling. Вы задаете условие видимости для следующего за инпутом блока, но там стоит лэйбл.
Решение: оберните инпут лэйблом и уже потом регулируйте

/* Внутри этого блока вставьте иконку */
.social-icon-round-wrapper {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #999;
}

Поменяй порядок вложенности тегов. a вынеси из div и div оберни a