/* -------------------------------
   Global defaults
---------------------------------*/
:root {
  --grid-columns: 3;       /* default columns */
  --grid-justify: start;   /* default horizontal alignment */
}

.md-typeset .grid {
  display: grid !important;
  gap: 0.5rem;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  justify-content: var(--grid-justify) !important;  /* horizontal alignment */
  justify-items: stretch;  /* controls alignment inside each cell */
}

/* Large screens: use column variable */
@media screen and (min-width: 1400px) {
  .md-typeset .grid {
    grid-template-columns: repeat(var(--grid-columns), 1fr) !important;
  }
}

/* Medium screens: auto-fit columns */
@media screen and (max-width: 1399px) {
  .md-typeset .grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
}

/* Small screens: single column */
@media screen and (max-width: 768px) {
  .md-typeset .grid {
    grid-template-columns: 1fr !important;
  }
}

/* -------------------------------
   Column-specific classes
---------------------------------*/
.md-typeset .grid.one-columns { --grid-columns: 1; }
.md-typeset .grid.two-columns { --grid-columns: 2; }
.md-typeset .grid.three-columns { --grid-columns: 3; }
.md-typeset .grid.four-columns  { --grid-columns: 4; }
.md-typeset .grid.five-columns  { --grid-columns: 5; }

/* -------------------------------
   Justify-specific classes
---------------------------------*/
.md-typeset .grid.justify-start  { --grid-justify: start; }
.md-typeset .grid.justify-center { --grid-justify: center; }
.md-typeset .grid.justify-end    { --grid-justify: end; }
.md-typeset .grid.justify-between{ --grid-justify: space-between; }
.md-typeset .grid.justify-around { --grid-justify: space-around; }


/* Remove border for specific grid card */
.md-typeset .grid .grid-card.no-border {
    border: none !important;
    box-shadow: none !important; /* optional, remove shadow if present */
}


/* Only affect cards inside .content-center grids */
.md-typeset .grid.cards.content-center li {
    text-align: center;        /* centers text and inline elements */
    display: block;            /* ensure normal block flow */
}

.md-typeset .grid.cards.content-center li > * {
    display: inline-block;     /* allows icons, headings, links to center naturally */
}


.md-typeset .grid.cards.borderless li {
    border: none !important;
    box-shadow: none !important;
}