Как при наведении на один блок изменять стили другого, когда блоки находятся в разных местах?
Чтобы сработало, фигуры должны быть расположены в коде после списка
Причем списка не должно быть =)

пример

<div class="hover_1">2321321
<div class="hover_2">2321321
<div class="hover_3">2321321

<div class="hovered_1">
<div class="hovered_2">
<div class="hovered_3">

.hover_1:hover ~ .hovered_1 {}
.hover_2:hover ~ .hovered_2 {}
.hover_3:hover ~ .hovered_3 {}

Фигуры могут располагаться в своем контейнере:
<div class="hover_1">2321321
<div class="hover_2">2321321
<div class="hover_3">2321321

<div class="container">
  <div class="hovered_1">
  <div class="hovered_2">
  <div class="hovered_3">
</div>

.hover_1:hover ~ .container .hovered_1 {}
.hover_2:hover ~ .container .hovered_2 {}
.hover_3:hover ~ .container .hovered_3 {}
В styled components данная возможность реализована.
https://styled-components.com/docs/advanced#referr...