$color-background-landing: #111

.landing
	.page-content
		@extend .text-white
		background-color: $color-background-landing

	.jumbotron
		padding-bottom: 15em
		padding-top: 12em

	.card
		@extend .bg-transparent
		@extend .text-white

		.card-text
			@extend .text-secondary

	.node-details-description
		@extend .mx-auto
		color: #ddd

		a
			color: $color-primary

	.gallery
		max-width: 1024px

		.thumbnail
			float: left
			position: relative
			width: 23%
			padding-bottom: 23%
			margin: 0.83%
			overflow: hidden
			transition: box-shadow 150ms ease-in-out

			&:hover
				box-shadow: 2px 6px 50px 0 rgba(black, .2)

		.img-container
			position: absolute
			width: 100%
			height: 100%

			img
				width: 300%
				transform: translate(-20%,-10%)

		@media screen and (max-width: 992px)
			.thumbnail
				width: 22%
				padding-bottom: 22%
				margin: 1.5%

		@media screen and (max-width: 720px)
			.thumbnail
				width: 29%
				padding-bottom: 29%
				margin: 2.16%

		@media screen and (max-width: 470px)
			.thumbnail
				width: 44%
				padding-bottom: 44%
				margin: 3%

	.jumbotron
		&.jumbotron-overlay-gradient-fade-to-gray
			*
				z-index: 1
			&:after
				background-color: transparent
				background-image: linear-gradient(transparent 65%, $color-background-landing 100%)
				display: block
				visibility: visible