:root {
  --bg-color: #0d131a;
  --card-bg: #161b22;
  --text-primary: #ffffff;
  --text-secondary: #58a6ff;
  --border-glow: #1f4068;
  --border-hover: #58a6ff;
}




.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  /* padding: 16px; */
   background-color:hsl(0, 0%, 15%); /* Adjust to match your theme */
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 1rem;
}
.card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.img-clm {
  width: 100%;
  height: 140px; /* Fixed height for image area keeps image baselines standard */
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-cls {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1; /* Pre-reserves layout space while lazy-loading */
  object-fit: contain;
}

.index-text {
  margin-top: auto; /* Pushes the text to the bottom of the card */
  /* font-size: 0.95rem; */
  text-align: center;
  color: #ffffff;
  
  /* Reserves space for 2 lines of text so single-line names 
     and two-line names share the exact same baseline height */
  min-height: 2.6em;
  line-height: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-anchor {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%; /* Ensures the link stretches to fill the grid cell */
}




.banner-text {
    display: flex;
    text-transform: capitalize;
    width: 100%;
    margin: auto;
    background-color:hsl(0, 0%, 15%);
    justify-content: center;
    margin-bottom: 1rem;
}









.pagination {
    width: fit-content;
    height: auto;
    margin: auto;
    padding: 5px 5px 50px 5px;
    display: flex;
    margin-bottom: 5px;
    text-decoration: none;
}

.pagination a {
   
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    background-color:hsl(0, 0%, 15%);
    margin-left: 2px;
    border-radius: 5px;

}

.pagination a:hover {
    background-color:hsl(227, 9%, 19%);
    border-radius: 5px;
}

.pagination-main {
    width: fit-content;
    height: 20px;
    margin: auto;
    padding: 5px 5px 5px 5px;

}

.pagination-link{
    text-decoration: none;
    color: white;
}



@media screen and (min-width: 1024px) {
  /* Desktop-specific CSS styles go here */

  .index-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    
  }


 
}