/* ============================================
   Turn the first list after #contents-grid or .contents-grid
   into a button grid.
   Use the ID (#contents-grid) for pages with a single grid.
   Use the class (.contents-grid) for pages with multiple grids.
   ============================================ */

/* The UL immediately after the grid marker becomes the grid */
#contents-grid + ul,
.contents-grid + ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 0.75rem;

  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Remove bullets */
#contents-grid + ul > li,
.contents-grid + ul > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Style links as buttons */
#contents-grid + ul > li > a,
.contents-grid + ul > li > a {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  text-align: center;

  border-radius: 0.25rem;
  white-space: normal;

  border: 1px solid rgba(0, 0, 0, 0.18);
  background-color: rgba(0, 0, 0, 0.04);

  font-weight: 600;
  text-decoration: none;

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

#contents-grid + ul > li > a:hover,
#contents-grid + ul > li > a:focus,
.contents-grid + ul > li > a:hover,
.contents-grid + ul > li > a:focus {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.28);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* Optional emphasis for first tile */
#contents-grid + ul > li:first-child > a,
.contents-grid + ul > li:first-child > a {
  background-color: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.35);
}