#link-grid {
  display: grid;
  grid-template-columns: 15px repeat(4, minmax(0, 1fr)); 
  gap: 20px;
  margin: -30px auto 0 auto; 
  padding: 0 20px 60px 20px;
  max-width: 1000px; 
  align-items: center;
  
  /* Adjusted Math: (15px column + 20px gap) / 2 = 17.5px */
  transform: translateX(-17.5px); 
  
  box-sizing: border-box;
}

/* --- Coordinate Labels --- */
.grid-label {
  font-family: inherit;
  color: #000;
  font-size: 0.75rem; 
  font-weight: bold;
  
  /* Hover Logic */
  opacity: 0; 
  transition: opacity 0.3s ease;
  pointer-events: none; 
}

/* Reveal on hover */
#link-grid:hover .grid-label {
  opacity: 1;
}

.col-label {
  text-align: center;
  /* Negative margin pulls the top numbers DOWN towards the buttons */
  margin-bottom: -18px; 
  z-index: 2; /* Ensures they sit 'above' the button area if they overlap */
}

.row-label {
  text-align: right;
  /* Negative margin pulls the side numbers RIGHT towards the buttons */
  margin-right: -12px; 
  z-index: 2;
}

/* --- The Buttons (Solid Border) --- */
.gradient-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  width: 100%;
  aspect-ratio: 1 / 1; 
  border-radius: 12px; 
  
  /* CLEAN SOLID BORDER */
  border: 3.7px solid #ff5a5a; 
  background-color: #fff;
  
  /* Font settings */
  font-family: inherit; 
  font-size: clamp(1rem, 1.77vw, 1.27rem); 
  font-weight: 700;
  color: #333 !important;
  text-decoration: none !important;
  line-height: 1.2;
  overflow: hidden;
  word-wrap: break-word;
  
  transition: all 0.3s ease;
}

.gradient-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(255, 90, 90, 0.15);
}