// Base
.thumbnail-gallery {
	display: inline-block;
	max-width: 300px;
	position: relative;
	overflow: hidden;
	border-radius: $border-radius;

	.thumbnail-caption {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: $white;
		background-color: rgba( $primary, .6 );
	}

	.thumbnail-title {
		display: block;
		color: inherit;
	}

	.thumbnail-link-overlay {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
}

.desktop {
	.thumbnail-gallery {
		.thumbnail-caption {
			transition: $transition-base;
			opacity: 0;
			transform: scale( .85 );
		}

		&:hover {
			.thumbnail-caption {
				transform: scale( 1 );
				opacity: 1;
			}
		}
	}

}

@include media-breakpoint-up( md ) {
	.thumbnail-gallery {
		max-width: 100%;
	}

	.thumbnail-gallery-mod-1 {
		margin-top: 53%;
	}
	.thumbnail-gallery-mod-2 {
		margin-top: px-to-rem( 30px );
	}
}