.cluster {
  margin: 7.4em var(--spacing) 4.5em var(--spacing);
  opacity: 0;
}

.cluster.cluster--index {
  margin-bottom: 7.4em;
  opacity: 1;
  pointer-events: none;
}

.cluster.cluster--signal .signal {
  display: none;
}

.cluster.cluster--signal .signal .signal__header a {
  color: rgba(var(--rgb-white), 0.4375);
}

.cluster.cluster--signal .signal .signal__header a dl dd {
  opacity: 0;
}

.cluster.cluster--signal .signal.signal--select {
  display: block;
  z-index: 102;
}

.cluster.cluster--loaded {
  opacity: 1;
}

@media(min-width: 64em) and (hover: hover) and (pointer: fine) {

  .cluster {
    margin-bottom: 44.4vh;
    margin-top: max(22.2vh, 5.4em);
  }

  .cluster.cluster--index {
    margin-bottom: 44.4vh;
  }

  .cluster.cluster--index:hover header a:not(:hover),
  .cluster.cluster--index:focus-within header a:not(:focus) {
    color: rgba(var(--rgb-white), 0.4375);
  }

  .cluster.cluster--signal .signal {
    display: block;
  }

  .cluster.cluster--signal .signal .signal__header a:hover,
  .cluster.cluster--signal .signal .signal__header a:focus {
    color: var(--color-white);
  }

  .cluster.cluster--signal .signal .signal__header a:hover dl dd,
  .cluster.cluster--signal .signal .signal__header a:focus dl dd {
    opacity: 1;
  }

}