/* =================== Grid Container Styles =================== */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 4.6875rem;
  height: 4.6875rem;
  background-color: transparent;
  position: relative;
  cursor: pointer;
}

/* 1. Pause the animation on hover */
.grid-container:hover .blink {
  animation-play-state: paused;
  opacity: 0.3;
}

/* 2. Show the tooltip on hover */
.grid-container:hover::after {
  opacity: 1;
}

/* =================== Square Styles =================== */
.square {
  /* =================== Blink Animation Keyframes =================== */
  width: 1.5625rem;
  height: 1.5625rem;
  transition: opacity 0.3s ease;
}

@keyframes slow-blink {
  0%,
  25%,
  100% {
    background-color: #fff;
  }

  12.5% {
    background-color: #88c540;
  }
}

.blink {
  animation: slow-blink 4s ease-in-out infinite;
}

/* =================== Timing offsets =================== */
.sq-1 {
  animation-delay: 0s;
}

.sq-6 {
  animation-delay: 1s;
}

.sq-9 {
  animation-delay: 2s;
}

.sq-8 {
  animation-delay: 3s;
}



  /* =================== MOBILE VIEW (768px and below) =================== */
  @media (max-width: 768px) {
    .grid-container {
  width: 3.75rem;
  height: 3.75rem;
}
.square {
  width: 1.25rem;
  height: 1.25rem;
}
}