.container-grid {
  display: grid; /* Turns on Grid */
  gap: 1.5rem 0;   /* Sets the space between all items */

  /*
    THIS IS THE KEY:
    Create as many columns as can fit.
    Make each column at least 250px wide.
    Allow columns to wrap and be centered as a group on narrow viewports.
  */
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  justify-content: center; /* Center the whole grid content when columns don't fill the row */
  justify-items: center; /* Center items inside their grid cells */
}
.grid-item {
    /* Make grid items size themselves instead of forcing fixed width so groups of columns can be centered */
    text-align: center;
    background-color: var(--color3);
    box-shadow: 0px 0px 1px 1px black;
    color: white;
    border-radius: 15px;
    padding: 10px;
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    max-width: 17rem; /* allow shrinking on small screens */
    width: 100%; /* let grid cell determine width */
}
.grid-item a {
    padding: 10px;
}
.grid-item p { /* Add this new rule for paragraphs inside grid-item */
    word-wrap: break-word; /* This will break long words to prevent overflow */
    margin: 0; /* Remove default paragraph margins for better spacing */
    padding: 2px 0; /* Small vertical padding for text lines */
}

/* On very small screens, tighten gaps and make items a bit narrower so columns group neatly */
@media (max-width: 480px) {
  .container-grid {
    gap: 1rem 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .grid-item {
    font-size: 1.1rem;
    min-height: 120px;
    max-width: 16rem;
  }
}