/* PARTIAL: POST MEDIA TITLE
-------------------------------------------- */

.vlt-post-media-title {
	position: relative;
	overflow: hidden;
	z-index: 1;

	&__arrow {
		position: absolute;
		bottom: px2rem(50px);
		left: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: px2rem(45px);
		height: px2rem(45px);
		margin-left: calc(px2rem(45px) * -.5);
		overflow: hidden;
		font-size: px2rem(18px);
		color: var(--vlt-color-white);
		background-color: var(--vlt-color-gray-darker-0p3);
		border-radius: 50%;

		svg {
			height: 1em;
		}

		&:hover {
			color: var(--vlt-color-white);

			svg {
				animation: vlt_animate_icon_down var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
			}

		}

	}

	&__overlay {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .25);
		z-index: -1;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 150px);
		}

	}

	.swiper-container {
		overflow: unset;
	}

	.swiper-slide {
		padding-top: px2rem(480px);

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/* support for plugin https://github.com/bfred-it/object-fit-images */
			font-family: "object-fit: cover;";
			object-fit: cover;
		}

	}

}

/* SECTION: STYLE 1
-------------------------------------------- */

.vlt-post-media-title--style-1 {
	min-height: px2rem(480px);

	.swiper-slide {
		padding-top: px2rem(480px);
	}

}

/* SECTION: STYLE 2
-------------------------------------------- */

.vlt-post-media-title--style-2 {
	min-height: px2rem(530px);
	overflow: hidden;
	border-radius: var(--vlt-border-radius-lg);

	.swiper-slide {
		padding-top: px2rem(530px);
	}

}

/* SECTION: STYLE 3
-------------------------------------------- */

.vlt-post-media-title--style-3 {
	min-height: px2rem(480px);
	padding-top: px2rem(270px);
	padding-bottom: px2rem(290px);
	text-align: center;

	.vlt-post-meta,
	.vlt-post-title {
		color: var(--vlt-color-white);
	}

	.vlt-post-meta {
		margin-bottom: px2rem(15px);
	}

}