.c-thumbnail__link {
	display: block;
	text-decoration: none;
	width: 100%; // Make sure its wide enough, also when there is little text
}

.c-thumbnail__frame {
	position: relative;
	width: 100%;
	padding-bottom: 66.67%;
	height: 0;
	overflow: hidden;

	// Extra class that adds a hover effect
	&.has-hover-effect {
		position: relative;

		&::after {
			$self: &;
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: radial-gradient(rgba(palette(action), 0.2), rgba(palette(action), 0.6));
			opacity: 0;
			transition-property: opacity;
			transition-duration: 0.4s;

			@at-root .c-thumbnail__link:hover #{$self}{
				opacity: 1;

			}
		}
	}
}

.c-thumbnail__image {
	$self: &;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: palette('neutral', 100);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;

	// Give a little hover effect when needed
	.c-thumbnail__frame.has-hover-effect & {
		transform: scale(1);
		transition-property: transform, filter;
		transition-duration: 0.4s;

		@at-root .c-thumbnail__link.has-hover:hover #{$self} {
			transform: scale(1.06);
			filter: saturate(0%);
		}
	}
}

.c-thumbnail__content {
	margin-top: 20px;
}

.c-thumbnail__caption {
	@include font(mid, 28, 500);
	color: palette(text);
	transition: color .25s;
}

.c-thumbnail__button {
	margin-top: 30px;
}

/**
 * Modifier of the thumbnail where the figure gets a little extra styling
 */
.c-thumbnail--pop {
	.c-thumbnail__frame {
		@include border-radius(large);
		@include box-shadow;
		overflow: hidden;
	}
	.c-thumbnail__content {
		margin-top: 30px;
	}
}


// Group styling when hovered
.c-thumbnail__link[href]:hover {

	.c-thumbnail__caption {
		color: palette(action);
	}
}