<div class="container">
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

.container div { 
  border: calc(sibling-index() * 2px) solid;
  opacity: calc(sibling-index() / sibling-count());
}

.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N sibling-count() i sibling-index(); /* работают с текущим div */
}

@function --N() {
  result: sibling-count();
}
@function --i() {
  result: calc(sibling-index() - 1); /* начинаем с нуля, а не с единицы */
}

.container div { 
  border: calc(--i() * 2px) solid;
  opacity: calc(--i() / --N());
}

.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N --N() i --i();
}

/* Новый способ с использованием синтаксиса диапазонов */
@media (width >= 300px) {}
@media (width < 1000px) {}
@media (640px <= width < 768px) {}

/* Классический способ */
@media (min-width: 300px) {}
@media (max-width: 1000px) {}
@media (min-width: 640px) and (max-width: 768px) {}

npx unlighthouse --site <твой-сайт>