/* grid.css */

#grid_layout {
  transition: opacity 0.5s;
}

.grid-spot {
  align-items: center;
  /* background-color: white; */
  background-color: transparent;
  color: white;
  display: flex;
  font-family: var(--mono-font);
  font-size: var(--font-size--xs);
  justify-content: center;
  flex-direction: column;
  transition: background 0.5s;
}

.grid-content {
  height: 100%;
  object-fit: cover;
  width: 100%;
  overflow: hidden;
}

.grid-content > a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.connection-spot {
  border-bottom: white solid 2px;
}
.connection-spot:last-child {
  border-right: white solid 2px;
}

.connection {
  width: 40%;
  height: 40%;
  object-fit: cover;
  transition: opacity 0.5s;
}
.interesting {
  width: 30%;
  height: 30%;
  object-fit: cover;
  transition: opacity 0.5s;
}

.info {
  font-size: var(--font-size--m);
  border: solid white 10px;
  border-bottom-left-radius: 50%;
  cursor: grab;
  /* border-bottom-right-radius: 50%; */
  /* border-top-left-radius: 50%; */
}