.carousel-window
{
	position: absolute;
	left: 0;
	top: 238px;
	width: 100%;
	height: 430px;
	z-index: 4;
	overflow: visible;

	.carousel-strip
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 430px;
	}

	.carousel-item
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 420px;
		height: 420px;
		flex-shrink: 0;
		overflow: visible;
		pointer-events: none;
		transition: left 0.18s ease, opacity 0.12s ease;

		&.before,
		&.after
		{
			opacity: 0.96;
		}

		&.offscreen
		{
			opacity: 0;
			pointer-events: none;
		}

		&.featured
		{
			z-index: 8;
		}

		&.featured:not(.view-more)
		{
			.carousel-card-face
			{
				top: 0;
				width: 420px;
				height: 420px;
				border-radius: 17px;
				box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.58 );
			}

			&.selected .carousel-selection-ring
			{
				left: 0;
				top: 0;
				width: 420px;
				height: 420px;
				border-radius: 17px;
			}

			.missing-icon-disc
			{
				width: 227px;
				height: 227px;
			}

			.missing-icon
			{
				font-size: 129px;
			}
		}

		&.featured.view-more
		{
			.view-more-card
			{
				left: 15px;
				top: 75px;
				width: 270px;
				height: 270px;
			}

			&.selected .carousel-selection-ring
			{
				left: 15px;
				top: 75px;
				width: 270px;
				height: 270px;
				border-radius: 100%;
			}
		}

		&.view-more .carousel-selection-ring
		{
			left: 40px;
			top: 100px;
			width: 220px;
			height: 220px;
			border-radius: 100%;
		}

		&.selected.view-more .view-more-label
		{
			opacity: 1;
		}
	}

	.carousel-card-face
	{
		position: absolute;
		left: 0;
		top: 60px;
		width: 300px;
		height: 300px;
		border-radius: 14px;
		overflow: hidden;
		background-color: #1f2228;
		box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.48 );
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		cursor: pointer;
		pointer-events: all;
		z-index: 1;
		transition: top 0.18s ease, width 0.18s ease, height 0.18s ease, border-radius 0.18s ease, box-shadow 0.18s ease;

		&.is-missing
		{
			align-items: center;
			justify-content: center;
			background-image: linear-gradient( to bottom, #9c9da2 0%, #38393d 100% );
		}
	}

	.view-more-card
	{
		position: absolute;
		left: 40px;
		top: 100px;
		width: 220px;
		height: 220px;
		cursor: pointer;
		pointer-events: all;
		z-index: 1;
		transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
	}

	.view-more-label
	{
		position: absolute;
		left: -10px;
		top: 0;
		width: 320px;
		height: 40px;
		opacity: 0;
		align-items: center;
		justify-content: center;
		font-family: Poppins;
		font-size: 30px;
		font-weight: 400;
		color: #28c6f7;
		text-align: center;
		text-shadow: 0 3px 10px rgba( 0, 0, 0, 0.64 );
		pointer-events: none;
		transition: opacity 0.08s ease;
	}

	.carousel-selection-ring
	{
		position: absolute;
		left: 0;
		top: 60px;
		width: 300px;
		height: 300px;
		opacity: 1;
		z-index: 2;
		overflow: visible;
		border-radius: 14px;
		pointer-events: none;
		transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease, border-radius 0.18s ease;
	}
}