/* Sets a sitewide font */
body {
  font-family: "IBM Plex Mono", monospace;
}

/* Sets all paragraphs to justified */
p {
    text-align: justify;
}

/* Img and Txt element centering */
.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center-txt {
    text-align: center;
}

/* Gallery Lightbox Settings */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  justify-items: center;
}

.gallery img {
  max-width: 200px;
  height: auto;
  border-radius: 4px;
}

/* Make the grid work inside Material's content area */
.md-typeset .gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));  /* up to 5 across */
  justify-items: center;
  /* optional: hard cap gallery width so it never exceeds 5×200px + gaps */
  max-width: calc(5 * 200px + 4 * 12px);
  margin: 0 auto;
}

/* Flatten Markdown <p> wrappers so the <img>/<a> become grid items */
.md-typeset .gallery > p {
  display: contents;          /* key line */
  margin: 0;
  text-align: initial;        /* overrides your global p { text-align: justify } */
}

/* Thumbnails */
.md-typeset .gallery img {
  max-width: 200px;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Responsive: reduce columns on smaller viewports */
@media (max-width: 1100px) { .md-typeset .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .md-typeset .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px)  { .md-typeset .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .md-typeset .gallery { grid-template-columns: 1fr; } }

/* Caption Settings */
.md-typeset .gallery figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.md-typeset .gallery figcaption {
  font-size: 0.85rem;
  margin-top: 4px;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

.md-typeset .gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: calc(5 * 200px + 4 * 12px); /* cap width so items never exceed 200px */
  margin: 0 auto;
}
@media (max-width: 1100px) { .md-typeset .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .md-typeset .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px)  { .md-typeset .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .md-typeset .gallery { grid-template-columns: 1fr; } }

.md-typeset .gallery > p { display: contents; margin: 0; }

/* square via aspect-ratio; will size to cell width, but never exceed 200px */
.md-typeset .gallery img {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;  /* keep square */
  object-fit: cover;    /* crop edges if needed */
  object-position: center;
  display: block;
  border-radius: 4px;
}