// Set the variable defaults in case they are missing in the template
$base-title-color: #4d4d4d !default;

.g-content-pro {
	&:not(.gutter-disabled) {
		margin-left: -($content-padding);
		margin-right: -($content-padding);
		> .g-grid {
			margin-bottom: ($content-padding*2);
			&:last-child {
				margin-bottom: 0;
				> .g-block {
					&:last-child {
						.g-content-pro-item {
							@include breakpoint(mobile-only) {
								margin-bottom: 0 !important;
							}
						}
					}
				}
			}
			@include breakpoint(mobile-only) {
				margin-bottom: 0;
			}
		}
		.g-content-pro-item {
			@include breakpoint(mobile-only) {
				margin-bottom: ($content-padding*2) !important;
			}
		}
	}
}

.g-content-pro, .g-content-pro-slider, .g-content-pro-slideset {
	text-align: center;
	&.g-pullup {
		margin-top: -($content-margin + $content-padding + $section-padding + rem(75px));
		position: relative;
		z-index: 21;
		.g-content-pro-item {
			border: none;
		}
	}
	&.gutter-disabled {
		.g-content-pro-item {
			border: none;
		}
		.uk-slideset {
			margin-left: 0;
			&.uk-grid {
				> * {
					padding-left: 0;
				}
			}
		}
	}
	.g-content {
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	.g-content-pro-item {
		border: 1px solid $base-border-color;
		width: 100%;
		@include breakpoint(mobile-only) {
			margin-bottom: ($content-margin + $content-padding)*2;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	.g-content-pro-image {
		width: 100%;
		background-position: center;
		background-size: cover;
		> a {
			display: block;
			width: 100%;
			height: 100%;
		}
		img {
			@include user-select(none);
		}
	}
	.g-info-container {
		padding: 20px;
		background: #ffffff;
	}
	p {
		margin: 0;
	}
	.g-content-pro-title {
		margin: 0;
		a {
			color: $base-title-color;
			&:hover {
				color: $accent-color-1;
			}
		}
	}
	.g-content-pro-desc {
		margin-top: 10px;
	}
	.g-info-container-style2 {
		&.uk-overlay-panel {
			padding: 15px;
			p {
				margin-top: 5px;
			}
			a {
				color: #ffffff;
				&:hover {
					color: $accent-color-1;
				}
			}
		}
		.g-article-details {
			color: lighten($base-text-color, 35%);
		}
	}
	.g-article-details {
		margin-top: 10px;
		font-size: 90%;
		color: lighten($base-text-color, 15%);
		> span {
			margin-right: 10px;
			&:last-child {
				margin-right: 0;
			}
			i {
				margin-right: 5px;
			}
		}
	}
	.g-article-read-more {
		margin-top: 15px;
	}
	&.style3 {
		.g-info-container-style2 {
			@include background(linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.8) 100%));
			padding: 20px;
			a {
				color: #ffffff;
				&:hover {
					color: #ffffff;
					text-decoration: underline;
				}
			}
		}
		.g-content-pro-image {
			.uk-overlay {
				img {
					@include transition(all 1s);
				}
			}
			&:hover {
				.uk-overlay {
					img {
						@include transform(scale(1.15));
					}
				}
			}
		}
	}
}