/*
	Thumbnails
	========================================
*/

/* Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files */

/* Make wrapper ul behave like the grid */
.thumbnails {
	margin-left: calc(var(--grid-gutter-width) * -1);
	list-style: none;
}

.thumbnails::after {
	display: table;
	content: "";
	clear: both;
}

/* Fluid rows have no left margin */
.row-fluid .thumbnails {
	margin-left: 0;
}

/* Float li to make thumbnails appear in a row */
.thumbnails > li {
	float: left; /* Explicity set the float since we don't require .span* classes */
	margin-bottom: var(--base-line-height);
	margin-left: var(--grid-gutter-width);
}

/* The actual thumbnail (can be `a` or `div`) */
.thumbnail {
	display: block;
	padding: 4px;
	line-height: var(--base-line-height);
	border: 1px solid #ddd;
	border-radius: var(--base-border-radius);
	box-shadow: 0 1px 3px rgba(0,0,0,.055);
	transition: all .2s ease-in-out;
}

/* Add a hover/focus state for linked versions only */
a.thumbnail:hover,
a.thumbnail:focus {
	border-color: var(--link-color);
	box-shadow: 0 1px 4px rgba(0,105,214,.25);
}

/* Images and captions */
.thumbnail > img {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.thumbnail .caption {
	padding: 9px;
	color: var(--gray);
}