xdevelx

https://codepen.io/xdevelx/pen/XWpyXpW

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

Тогда делайте круг с градиентом в svg и размещайте его в html или на фон псевдоэлемента. Ну и применяйте анимацию к свг или псевдоэлементу -

0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);

Если есть возможность экспортируйте svg из макета. Ели нет, то придется нарисовать.

Вот пример svg - там 2 варианта с инлайн свг и псевдоэлемент с фоном
https://codepen.io/xdevelx/pen/RwKVWgQ

3й вариант - структура классов точно отображает вложенность элементов

Не пойдет - пункты меню отдельно от меню никто не переиспользует, да и li вне ul не возможны. Такое только возможно, если элементы имеют "богатый внутренний мир" (достаточно сложны, чтобы их вынести в отдельные блоки). Но здесь не тот случай.

1 и 2 варианты практически идентичны и оба применимы, но я бы выбрал 2 вариант, так как меню все таки лучше вынести в отдельный блок.

Ну и про миксы не забывайте - блок main-nav может быть и элементом родителя main__nav и вся внешняя геометрия (внешние отступы и позиционирование) применится к элементу .main__nav, а не к блоку .main-nav

<div class="main">
  <nav class="main-nav main__nav">
    <ul class="main-nav__list">
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Home</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Work</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

Прочитайте про стилизацию input type file https://tech.geekjob.ru/css-file-input-styling/
или https://dev.to/bugs_bunny/custom-file-upload-button-6nc

А почему у вас контентная картинка сделана фоном? Она должна быть img. Как бы и логично, что изображение иллюстрирует качели для ребенка рядом с соответствующим текстом. Вот и позиционируйте круг относительно самого изображения или враппера для img тега.

У swiper есть методы https://swiperjs.com/api/#methods update() (либо addSlide() и removeSlide()).
По клику на slider-filter__item фильтруете swiper-slide и потом вызываете update()

MDN https://developer.mozilla.org/ru/

if ($result == $email)
Вы сравниваете в условии равенство объекта https://www.php.net/manual/ru/class.mysqli-result.php или false и строки, условие никогда true не будет.

sass здесь не при чем. Он должен скомпилировать как положено. А вот clean-css может и преобразовала правило или перенесла в другой селектор.
попробуйте без clean-css

gulp.task("scss", function () {
  return gulp
    .src("./css/scss/pages/*.scss")
    .pipe(scss())
    .pipe(gulp.dest("./css/"));
});

1. Стили регистрировать и добавлять нужно в wp_enqueue_scripts а не в wp_head
https://wp-kama.ru/function/wp_enqueue_style
https://wp-kama.ru/function/wp_register_style
2. в wp_register_style() третий параметр $deps(массив) - у вас false
3. Если все равно не работает, то нужен дебаг кода. Смотрите, что выводит var_dump($css_files)
4. Интерполяция работает только со строками в двойных кавычках. В одинарных - {$file} воспринимается как строка без интерпретации переменной. В итоге вы регистрируете один и тот же стиль.
5. Зачем и wp_register_style и wp_enqueue_style?
Достаточно внутри итерации цикла

wp_enqueue_style($file, get_template_directory_uri() . '/css/' . $file);