Ankhena

Фанси для этого - лишнее.

Это можно сделать хоть на чистом CSS с помощью target waksoft.susu.ru/blog/2016/07/16/tvorcheskoe-ispolz...

Либо простой js/jq и data- атрибуты

На выходе получите обычный CSS.

С компиляцией потом разберетесь, когда самостоятельно начнете пользоваться.

Оберните в ссылку сами и покрасьте в желаемый цвет, пользователи и не заметят.

Вот так: https://jsfiddle.net/7d0fwpmc/
Но если ширина логотипа будет неизвестна, то абсолютом.

Если вдруг по центру оставшегося пространства https://jsfiddle.net/u13tmyhj/

Не меняя разметки, да и стили только слегка: https://codepen.io/anon/pen/EdNqjp

копать туда:
https://www.cssportal.com/style-input-range/
https://refreshless.com/nouislider/examples/
ionden.com/a/plugins/ion.rangeSlider

.input__kids:checked + span{
  background-image: url(/images/svg/cheked.svg);
}

<label class="label__kids" for="1.1">
<input name="kids" class="input__kids" type="checkbox" name="1" id="1.1">
<span></span>
</label>

и размеры, понятное дело. Сам инпут скрыть.
Либо
инпут не внутри лейбл, а лейбл после инпут, тогда будетinput:checked + label

На CSS так
https://jsfiddle.net/tqg0Le91/
или так: https://jsfiddle.net/a734zx6o/
позиционируйте как вам нравится, думаю мысль понятна.

Либо на JS. Решений в инете полным полно.

1. Ссылки внутри другой ссылки не бывает (у вас у этих ссылок еще и одинаковый href, тем более не понятно зачем 2 ссылки).
2. Затемнение это псевдоэлемент, наложенный поверх блока и имеющий фоновый цвет с нужной вам прозрачностью.
3. Показ блока при наведении на родительский:

.goods-out a:hover .hid

да, так
Как только исправите ошибки с вложенными ссылками и закроете тег img все заработает.

В вашем примере дополнительная обертка не нужна
https://codepen.io/anon/pen/dgbbNW

Она может понадобится, например, если у блока должно быть фоновое изображение на всю ширину экрана, а контентная часть при этом иметь фиксированный (ограниченный) размер.

Альтернатива это calc и media условие на 500 точках (или на 500 + запас на отступы)
https://codepen.io/anon/pen/KGPOmX

Разметка называется HTML
https://webref.ru/html/details
https://webref.ru/html/summary

1. Прозрачность:
- градиенты
- цвета в формате rgba

2. Наложение псевдоэлемента с фоновым градиентом на картинку https://jsfiddle.net/57caskbu/

3. С кнопкой тоже самое, пример у Dnebl

https://codepen.io/anon/pen/pOqqPN
с полями у картинки разберитесь, станет легче

https://jsfiddle.net/49dLtjxp/

:last-child берет последний элемент своего родителя.

Ваша структура

<li class="nav-menu__item clearfix">
  <div class="circle">
     <div class="inside-circle"></div>
  </div>
  <a href="#about-us" class="nav-menu__link">О нас</a>
 </li>

И .circle:last-child::before Последний элемент родителя элемента с классом .circle
И выходит это ссылка nav-menu__link

Вывод: начинать надо с nav-menu__item:last-child .circle::before {}

Плагин называется чистый CSS
https://webref.ru/css/object-fit