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

@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, но до сих пор лежит в готовых паках до кучи.

Второй вариант верный. наведение на дочерний элемент является также наведением на родительский. Если хочется, чтобы они не сцеплялись таким образом - попробуйте поставить элементы один за другим и воспользоваться селекторами вида "соседний" (+)
Подробнее о селекторах можно почитать тут https://code.tutsplus.com/ru/tutorials/the-30-css-...

Любому из блоков задать 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/