/* ============================================================================
 * 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
 * ----------------------------------------------------------------------------
 * .tff_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
 *
 * .tff_columms-1-2-3 & .tff_columns-1-2-2
 */

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

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

	}

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

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

	}

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

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

	}


/* ----------------------------------------------------------------------------
 * card and contents
 * ----------------------------------------------------------------------------
 * .tff_gallery-card
 */

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

.tff_gallery-card figcaption {
	font-size: var(--wp--preset--font-size--fs-small);
	line-height: var(--wp--custom--lh-small);
	}

.tff_gallery-card picture, .tff_gallery-card img {
	width: 100%;
	height: auto;
	}

	.tff_gallery-card img { border-radius: var(--wp--preset--spacing--10); }