.grid {
  --border: 2.5px;
  border: var(--border) solid #444444;
  line-height: 0;
  opacity: 1;
  position: relative;
}

.innerGrid {
  background-color: var(--color);
  border-bottom: var(--border) solid #999999;
  border-right: var(--border) solid #999999;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
}

.label {
  background-color: transparent;
  color: white;
  font-family: Cookbook, Georgia, 'Times New Roman', Times, serif;
  margin: 0;
  text-shadow:
    0px -1px 0px black,
    1px 0px 0px black,
    0px 1px 0px black,
    -1px 0px 0px black
  ;
}

.slot {
  border-left: var(--border) solid #999999;
  border-top: var(--border) solid #999999;
  display: inline-block;
  line-height: 0;
  padding: 0;
  &:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
  &.active {
    border: var(--border) solid yellow;
    margin-bottom: calc(-1 * var(--border));
    margin-right: calc(-1 * var(--border));
    z-index: 1;
  }
}