@function selectorBuilder($count) {
  $selector: '';
  @for $i from 1 through $count {
    $selector: $selector + "+ div ";
  }
  @return $selector;
}

body {
  background: #222;
}

.container {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  margin: 0 auto;
  width: min(100vw, 1000px);
}

.container div {
  --r: 255;
  --g: 255;
  --b: 255;
  --opacity: 0.1;
  aspect-ratio: 1;
  background-color: rgba(var(--r), var(--g), var(--b), var(--opacity));
  border: 1px solid #222;
  grid-column: span 1;
  width: 100%;
}

.container div {
  
  // pre hover selectors
  &:has(+ div:hover),
  &:has(#{selectorBuilder(1)} + div:hover),
  &:has(#{selectorBuilder(17)} + div:hover),
  &:has(#{selectorBuilder(18)} + div:hover),
  &:has(#{selectorBuilder(19)} + div:hover),
  &:has(#{selectorBuilder(20)} + div:hover),
  &:has(#{selectorBuilder(21)} + div:hover),
  &:has(#{selectorBuilder(38)} + div:hover),
  &:has(#{selectorBuilder(39)} + div:hover),
  &:has(#{selectorBuilder(40)} + div:hover) {
    --opacity: 0.5;
  }
  &:has(#{selectorBuilder(2)} + div:hover),
  &:has(#{selectorBuilder(16)} + div:hover),
  &:has(#{selectorBuilder(22)} + div:hover),
  &:has(#{selectorBuilder(37)} + div:hover),
  &:has(#{selectorBuilder(41)} + div:hover),
  &:has(#{selectorBuilder(58)} + div:hover),
  &:has(#{selectorBuilder(59)} + div:hover),
  &:has(#{selectorBuilder(60)} + div:hover) {
    --opacity: 0.25;
  }
  &:has(#{selectorBuilder(3)} + div:hover),
  &:has(#{selectorBuilder(15)} + div:hover),
  &:has(#{selectorBuilder(23)} + div:hover),
  &:has(#{selectorBuilder(36)} + div:hover),
  &:has(#{selectorBuilder(42)} + div:hover),
  &:has(#{selectorBuilder(56)} + div:hover),
  &:has(#{selectorBuilder(57)} + div:hover),
  &:has(#{selectorBuilder(61)} + div:hover),
  &:has(#{selectorBuilder(62)} + div:hover),
  &:has(#{selectorBuilder(78)} + div:hover),
  &:has(#{selectorBuilder(79)} + div:hover),
  &:has(#{selectorBuilder(80)} + div:hover) {
    --opacity: 0.125;
  }
  
  &:hover {
    --opacity: 1;
    
    // post hover selectors
    + div,
    + div + div,
    #{selectorBuilder(18)},
    #{selectorBuilder(19)},
    #{selectorBuilder(20)},
    #{selectorBuilder(21)},
    #{selectorBuilder(22)},
    #{selectorBuilder(39)},
    #{selectorBuilder(40)},
    #{selectorBuilder(41)} {
      --opacity: 0.5;
    }
    
    + div + div + div,,
    #{selectorBuilder(17)},
    #{selectorBuilder(23)},
    #{selectorBuilder(38)},
    #{selectorBuilder(42)},
    #{selectorBuilder(59)},
    #{selectorBuilder(60)},
    #{selectorBuilder(61)} {
      --opacity: 0.25;
    }

    #{selectorBuilder(4)},
    #{selectorBuilder(16)},
    #{selectorBuilder(24)},
    #{selectorBuilder(37)},
    #{selectorBuilder(43)},
    #{selectorBuilder(57)},
    #{selectorBuilder(58)},
    #{selectorBuilder(62)},
    #{selectorBuilder(63)},
    #{selectorBuilder(79)},
    #{selectorBuilder(80)},
    #{selectorBuilder(81)} {
      --opacity: 0.125;
    }
  }
}