.carousel-slider {
	height: #{100vw * 9 / 16} !important;
	max-height: 70vh !important;
}

.carousel .carousel-item {
	&.loading {
		visibility: visible;
	}
}

.carousel-slide {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: relative;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}

	&-content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		text-align: left;

		padding: $navbar-height $track-padding-small $track-padding-small;

		background-image: radial-gradient(circle at 100% 0%, transparent, transparent 50%, $background-color 100%);
		background-image: radial-gradient(circle at 100% 0%, transparent, transparent 50%, $background-color 100%), linear-gradient(to top, $background-color 1%, transparent 50%);

		&.center {
			align-items: center;
		}

		.with-indicators & {
			padding-bottom: $track-padding-small * 1.5;
		}
	}

	&-title {
		font-size: 2rem;
		line-height: 1;
		margin: 0 0 10px;
		text-shadow: 0 0 2rem $background-color;

		img {
			display: inline-block;
			vertical-align: middle;
			margin-right: .5em;
			width: 1.5em;
			height: 1.5em;
			object-fit: cover;
			box-shadow: 0 0 2rem rgba($background-color,.5);
		}
	}

	&-buttons {
		margin-top: 10px;
	}
}

@media #{$medium-and-up} {

	.carousel-slide {
		&-title {
			font-size: 3rem;
			margin: 0 0 20px;
		}

		&-content {
			padding: $navbar-height 50% $track-padding-medium $track-padding-medium;

			&.center {
				padding: $navbar-height 0 $track-padding-medium;
			}
		}

		&-buttons {
			margin-top: 20px;
		}
	}

	.with-indicators {
		.carousel-slide-content {
			padding-bottom: $track-padding-medium * 1.5
		}
	}
}

@media #{$large-and-up} {

	.carousel-slide {
		&-title {
			font-size: 4rem;
		}

		&-content {
			padding: $navbar-height 50% $track-padding-large $track-padding-large;

			&.center {
				padding: $navbar-height 0 $track-padding-large;
			}
		}

		&-buttons {
			margin-top: 25px;
		}
	}

	.with-indicators {
		.carousel-slide-content {
			padding-bottom: $track-padding-large * 1.5
		}
	}
}

.carousel {
	.indicators {
		&:first-child {
			background: pink;
			display: none !important;
		}
	}

	@if( $background-image ) {
		+ div {
			background-image: linear-gradient(to bottom, $background-color $track-padding-large, rgba($background-color, 0) 50vh);
		}
	}
}