/* ============================================================================
 * image gallery
 * ============================================================================
 * Sketch Club Theme
 *
 * used by sketch assistant global > includes-other/sag_image_gallery.php
 *
 * derived from: https://codepen.io/93lucasp/pen/LYYMYoB
 */


/* ----------------------------------------------------------------------------
 * card container
 * ----------------------------------------------------------------------------
 * .sb_gallery (not required), but to set columns
 *
 * set the column layout on desktop depending on whether there are up to 5 
 * 5 images, or more than 5 images
 *
 * .sb_columms-1-2-3 & .sb_columns-1-2-2
 */

@media screen and (max-width: 600px) {

	.sb_columms-1-2-2, .sb_columms-1-2-3 { columns: 1; }

	}

@media screen and (min-width: 601px) and (max-width: 768px) {

	.sb_columms-1-2-2, .sb_columms-1-2-3 { columns: 2; }

	}

@media screen and (min-width: 769px) {

	.sb_columms-1-2-3 { columns: 3; }
	.sb_columms-1-2-2 { columns: 2; }

	}


/* ----------------------------------------------------------------------------
 * card and contents
 * ----------------------------------------------------------------------------
 * .sb_gallery-card
 */

.sb_gallery-card {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--30);
	width: 100%;
	}

.sb_gallery-card figcaption {
	font-size: var(--wp--preset--font-size--fs-normal);
	line-height: var(--wp--custom--lh-normal);
	margin: var(--wp--preset--spacing--30) 0;
	}

.sb_gallery-card picture, .sb_gallery-card img { width: 100%; }