godsplan

Это утилитарный подход (так называемый атомарный css): один класс - (преимущественно) одно стилевое правило. Читайте документацию utility-first фреймворков. Самый крупный игрок в этой области - Tailwind CSS. Также в Bootstrap 5 появилась возможность использовать (в том числе задавать свои) классы-утилиты.

Вариантов много. Например, так.
Здесь я применил свойство aspect-ratio, просто чтобы сократить код, и побыстрее написать пример. Вы можете использовать хак с паддингом и дополнительным элементом для круга, если нужна поддержка более старых браузеров.

1) Не вижу проблем с фиксированными величинами для кастомных элементов. Несколько медиа запросов.
2) Если принципиально нужно решить в %. Делаем относительно. В внутрь текст абсолютом. Как это работает(Первая загугленая статья)

.round {
      max-width: 827px;
      height:0;
      padding-top:30%;
      width: 100%;
}

С такими вопросами еще код бы увидеть.
Попробуйте сделать так: родительскому элементу perspective: 1;
А переход сделать таким образом:

.element {
  transition: ..some values;
  will-change: transform;
  &:hover {
    transform: scale(1.2) translateZ(0);
  }
}

Это разные по сути объявления.
content: ""; - задаёт содержимое псевдоэлемента (пустую строку)
content: none; - говорит, что псевдоэлемент вообще не генерируется

Это специфичное для blockquote определение, которое Eric Meyer (автор reset.css) позаимствовал у Paul Chaplin. Первая строка content: "" делает так, чтобы у blockquote исчезли кавычки — на случай, если вторая строка content: none не поддерживается браузером, потому что первая строка — это CSS 2, а вторая — это CSS 2.1. В одну строку их записать нельзя, потому что по стандарту для свойства «content» нельзя комбинировать ключевые слова «normal» и «none» с другими значениями.

Вообще, когда встречается перечисление одного и того же свойства с разными значениями, это делается для того, чтобы обеспечить совместимость с разными браузерами. То есть, если, например, браузер не поддерживает «content: none», он применит «content: ""», а другую запись проигнорирует.

Обычно дублирующие записи располагаются в определённом порядке. Первой записью идёт самый плохой вариант, который должен сработать везде. Затем идёт вариант, который более полно описывает вашу цель. Пример:

.some-class {
    background: #e66465;
    background: linear-gradient(#e66465, #9198e5);
}

В этом коде, если браузер поддерживает градиентный фон, он сначала прочитает, что нужно использовать цвет «#e66465», а потом это перезапишется записью «linear-gradient», и итоговое значение будет «linear-gradient(#e66465, #9198e5);». Если же браузер не поддерживает градиент, он сначала прочитает, что нужно использовать «#e66465», а потом увидит неподдерживаемое определение «linear-gradient», проигнорирует его, и итоговое значение будет «#e66465».

При объявлении функции через обычный метод function execute () {} происходит hoisting, то есть поднятие функции вверх кода и она объявляется раньше всех остальных. При подходе присваивания переменной такого не будет

solvery.io
tolk-talk.ru

Устроиться на нормальную работу в офис и показывать коллеге/руководителю.
Кукоратор - это развод, ни один профессионал не будет тратить своё высокооплачиваемое время для ковыряния трейни-лапши, который за это нормально даже не заплатит.
Исключение - энтузиасты, которых много, например, тут.

// с заглавных букв ниже — сущности, которые стоит различать:

Событие (Event) и Слушатель события (Listener) — это разные штуки.

вот вы повесили два Слушателя на одно и то же Имя (или Тип) события на одном и том же Элементе. Это всё равно, что в один массив засунуть две функции. При наступлении События данного Типа, последовательно выполнятся все функции из «массива».

Юзер кликнул мышкой — браузер создал Событие с Типом "click". Клик отправляется в путешествие: начинает с document и ныряет глубже до того элемента на котором была мышка. Затем это же событие всплывает наверх, обратно, до document.

Где-то по пути Событие могут Слушать и Поймать (и не отпустить дальше). В вашем примере его поймают на document в конце обратного пути. И прогонят через строй Слушателей )

Есть такой вариант:
Получаем посты по $term

$query = new WP_Query( array(
    'post_type' 		=> $type, // Ваш тип записи
	'posts_per_page'	=> -1,        
	'tax_query' => array(
		array(
			'taxonomy' => $tax, // Такса типа записи
			'field'    => 'slug', 
			'terms'    => $term // Нужный терм
		)
	)
) );

Через цикл создаем массив id всех меток, присутствующих в полученных на предыдущем шаге постах

$all_tags = [];

if ( $query->have_posts() ) {
	while ( $query->have_posts() ) {
		$query->the_post();

	        $cur_terms = get_the_terms( $post->ID, $post_tag ); // $post_tag - нужная таксономия (если это стандартная метка поста, то $post_tag = 'post_tag')
	        if( is_array( $cur_terms ) ){
		        foreach( $cur_terms as $cur_term ){
			         $all_tags[] = $cur_term->term_id;
		       }
	        }        	
	}
}
// Возвращаем оригинальные данные поста. Сбрасываем $post.
wp_reset_postdata();

$all_tags = array_unique($all_tags); // Оставляем уникальные значения в массиве

Выводим кнопки табов

echo '<ul>';

	$i = 0;
	foreach ( $all_tags as $tag ) {
		$class_active = $i === 0 ? ' tab-active' : ''; // для первой кнопки ставим активный класс
		$tag_name = get_term( intval( $tag ) )->name; // Наименование метки
		echo '<li class="tab-caption' . $class_active . '">' . $tag_name . '</li>';
	$i++;
	}

echo '</ul>';

Выводим контент табов

echo '<div>';

	$k = 0;
	foreach ( $all_tags as $tag ) {
		$class_active = $k === 0 ? ' tab-active' : '';
		
		echo '<div class="tab-content' . $class_active . '">';
			if ( $query->have_posts() ) {
				while ( $query->have_posts() ) {
					$query->the_post();

				        if ( has_term( intval( $tag ), $post_tag ) ) { // Выводим только те посты, в которых есть текущая метка в цикле
				        	the_content(); // Здесь вывод данных поста. Как вариант - get_template_part( 'path/to/template' );
				        }    	
				}
			}
			// Возвращаем оригинальные данные поста. Сбрасываем $post.
			wp_reset_postdata();
		echo '</div>';
	$k++;
	}

echo '</div>';