.landing-home
	.page-content
		@extend .text-white
		background-color: $color-bg-dark-pages

	.jumbotron
		+media-xs
			background-position: top right
		background-position: top center
		padding-bottom: 16em
		padding-top: 8em

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

		.card-text
			@extend .text-secondary

	.node-details-description
		@extend .mx-auto
		color: #ddd
		font-size: 1.3em

		a
			color: $color-primary

	.btn-outline-primary
		border-color: $color-text-light
		color: $color-text-light

		&:hover
			border-color: transparent

	.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 60%, $color-bg-dark-pages 100%)
				display: block
				visibility: visible