/*!
 * -----------------------------------------------------------------------------
 * gallery with vertical align and dynamic adjustment of the column number
 * @author: Pirogh <pierre.saramito@imag.fr> web: http://pirogh.free.fr 
 * march 2023 
 * -----------------------------------------------------------------------------
 * for the pelican template files: customized for the photo plugin
 * inspirated by: https://blog.logrocket.com/responsive-image-gallery-css-flexbox
 * adapted for mobile phone: e.g. 2160 x 1080 screen 
 */


.galleria {
  list-style: none; 	/* remove dot in item list */
  display: flex;	/* activate the flexbox style */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  flex-wrap: wrap;	/* reactive: lines continue to the next one */
  row-gap: 30px;	/* vertical   space between image+caption rows */
  column-gap: 2px;	/* horizontal space between image+caption rows */
  justify-content: space-evenly; /* left & right justified */
  padding: 0px;		/* no extra global margins */
}

.galleria img {
  max-width: 100%;
  height: auto;
  max-height: 580px;	/* the max image height, less if width is less, conserving aspect ratio */
}

/* for the last row to be left centered */
.galleria::after {
  justify-content: space-evenly; /* left & right justified */
  padding: 0px;		/* no extra global margins */
}

.galleria figure {
  display: table;
  float: left;
  border: 0px #cccccc solid;
  margin:0px;  
  padding:0px;  
}

/* caption with figure */
.galleria figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
  padding:0px;  
}