/* WORK: STYLE 2
-------------------------------------------- */

.vp-portfolio__items-style-startbox_work_style_2 {

	// Links.
	--vp-items-style-startbox_work_style_2--links__text-decoration: none;
	--vp-items-style-startbox_work_style_2--links-hover__color: var(--vlt-accent-1);

	// Image.
	--vp-items-style-startbox_work_style_2--image-hover__transform: scale(1.05);

	// Transitions.
	--vp-items-style-startbox_work_style_2-transition-duration: var(--vlt-transition-duration);
	--vp-items-style-startbox_work_style_2-transition-easing: var(--vlt-transition-easing);

	// Meta Categories.
	--vp-items-style-startbox_work_style_2--meta-categories__gap: #{px2rem(8px)};
	--vp-items-style-startbox_work_style_2--meta-categories__separator: "";

	.vp-portfolio__item a {
		text-decoration: var(--vp-items-style-startbox_work_style_2--links__text-decoration);
		outline: none;
		box-shadow: none;
	}

	// Border radius
	.vp-portfolio__item-img {
		overflow: hidden;
		border-radius: var(--vp-items-style-startbox_work_style_2--image__border-radius);

		// fix for safari border-radius.
		// https://github.com/nk-crew/visual-portfolio/issues/150
		z-index: 0;
	}

	// Transitions
	.vp-portfolio__item-img img {
		transition: var(--vp-items-style-startbox_work_style_2-transition-duration) transform var(--vp-items-style-startbox_work_style_2-transition-easing), var(--vp-items-style-startbox_work_style_2-transition-duration) opacity var(--vp-items-style-startbox_work_style_2-transition-easing);
		will-change: transform, opacity;

		// Fix FireFox image blinking
		// https://github.com/nk-o/visual-portfolio/issues/92
		z-index: 1;
	}

	// Overlay
	.vp-portfolio__item:hover,
	.vp-portfolio__item-focus {

		.vp-portfolio__item-img img {
			transform: var(--vp-items-style-startbox_work_style_2--image-hover__transform);
		}

	}

	.vp-portfolio__item {
		display: flex !important;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;

		@include media-breakpoint-down(lg) {
			flex-direction: column;
			flex-wrap: wrap;
		}

	}

	.vp-portfolio__item-img-wrap {
		width: 100%;
		max-width: 100%;
		flex-shrink: 0;

		@include media-breakpoint-up(lg) {
			max-width: px2rem(500px);
		}

	}

	.vp-portfolio__item-overlay {
		width: 100%;
		margin-left: px2rem(100px);
		flex-grow: 1;

		@include media-breakpoint-down(lg) {
			margin-top: px2rem(40px);
			margin-left: 0;
		}
	}

	.vp-portfolio__item-meta-title {
		@include vlt_primary_bold_34;

		a:hover {
			color: var(--vp-items-style-startbox_work_style_2--links-hover__color);
		}

	}

	.vp-portfolio__item-meta-excerpt {
		margin-top: px2rem(35px);
	}

	.vp-portfolio__item-meta-read-more {
		margin-top: px2rem(40px);
	}

	.vp-portfolio__item-meta-categories {
		position: absolute;
		top: px2rem(20px);
		left: px2rem(20px);
		display: inline-flex;
		margin-top: calc(-1 * var(--vp-items-style-startbox_work_style_2--meta-categories__gap));
		margin-left: calc(-1 * var(--vp-items-style-startbox_work_style_2--meta-categories__gap));
		z-index: 2;
		flex-wrap: wrap;

		.vp-portfolio__item-meta-category {
			margin-top: var(--vp-items-style-startbox_work_style_2--meta-categories__gap);
			margin-left: var(--vp-items-style-startbox_work_style_2--meta-categories__gap);
			color: var(--vlt-color-white) !important;
			background-color: var(--vlt-color-dark-light) !important;
			@include badge;
			@include vlt_primary_bold_12;

			@if variable-exists(rtl) and $rtl {

				&::before {
					content: var(--vp-items-style-startbox_work_style_2--meta-categories__separator);
				}

				&:first-of-type::before {
					content: none;
				}

			}

			@else {

				&::after {
					content: var(--vp-items-style-startbox_work_style_2--meta-categories__separator);
				}

				&:last-of-type::after {
					content: none;
				}

			}

		}

	}

}