@charset "UTF-8";
/* CSS Document */


.box.spotlight {
    background: transparent;
  }

.spotlight-container {
}

.spotlight-container:hover > .spotlight-cell:not(:hover) {
  opacity: .05;
}
.spotlight-container:active > .spotlight-cell:not(:active) {
  opacity: 0;
}

.spotlight-cell {
  width: 50%;
  height: 0;
  padding-bottom: 40%;
  background-repeat: repeat repeat;
  background-size: 150px;
  float: left;
  transition: .2s ease-in-out;
  overflow: hidden;
  background-color: var(--accent-color);
}



.spotlight-cell.a {
  background-image: url("../../images/svg-bg-a.svg");
}

.spotlight-cell.b {
  background-image: url("../../images/svg-bg-b.svg");
}

.spotlight-cell.c {
  background-image: url("../../images/svg-bg-c.svg");
}

.spotlight-cell.d {
  background-image: url("../../images/svg-bg-d.svg");
}