.portfolio-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 65px;

	li {
		margin: 0 20px;
		position: relative;
		@media (max-width: 1024px) {
			margin: 5px 20px;
		}

		&:not(:first-child) {
			::after {
				position: absolute;
				content: "/";
				left: -24px;
			}
		}
		a {
			font-family: var(--wc-heading-font);
			font-weight: 500;
			color: var(--wc-dark-gray-color);

			&:hover {
				color: var(--wc-primary-color);
			}
		}
	}
	&.portfolio-filter-vertical {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		margin-bottom: 20px;
		li {
			margin: 0 0 20px;
			position: relative;
			@media (max-width: 1024px) {
				margin: 0 0 10px;
			}
			&:not(:first-child) {
				::after {
					content: "";
				}
			}
			a {
				span {
					background-color: transparent;
					transition: all 0.3s ease;
					position: relative;
					&::before {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 0%;
						height: 100%;
						transition: all 0.3s ease;
						background-color: var(--wc-primary-color);
						opacity: 0;
						visibility: hidden;
						z-index: -1;
					}
				}
				&:hover {
					color: var(--wc-dark-gray-color);
					span {
						color: #fff;
						&::before {
							width: 100%;
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}
			&.active {
				a {
					color: var(--wc-dark-gray-color);
					span {
						color: #fff;
						&::before {
							width: 100%;
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}
		}
	}
}

.portfolio-items-wrapper {
	.portfolio-item {
		width: 100%;

		@media (min-width: 768px) {
			width: 50%;
		}
		@media (min-width: 1024px) {
			width: 25%;
		}

		&:hover {
			.portfolio-description {
				opacity: 1;
				visibility: visible;
				transform: translate(-50%, -50%);
			}
		}
	}
	.portfolio-item-2x {
		width: 100%;
		@media (min-width: 768px) {
			width: 50%;
		}
	}
	.portfolio-item-content {
		position: relative;
	}
	.portfolio-description {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -30%);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease-in-out;
		.portfolio-lightbox {
			color: #fff;
			width: 60px;
			height: 60px;
			display: grid;
			place-items: center;
			background: var(--wc-primary-color);
			border-radius: 50%;

			&:hover {
				background-color: var(--pure-white-color);
				color: var(--wc-primary-color);
			}
		}
	}
	.item-thumbnail {
		img {
			width: 100%;
		}
	}
}

.portfolio-gutter {
	margin: 0 -10px;
	.portfolio-item {
		padding: 0 10px;
		margin-bottom: 20px;
	}
}

.portfolio-style-2 {
	&.portfolio-items-wrapper {
		.portfolio-item-2x {
			width: 100%;
			@media (min-width: 768px) {
				width: 50%;
			}
			@media (min-width: 991px) {
				width: 75%;
			}
		}
	}
}

// Portfolio slider style
.wc-portfolio-slider-wrapper {
	.wc-portfolio-slider-image {
		img {
			width: 100%;
		}
	}
	&.swiper-container {
		width: 100%;
		max-width: 775px;
		margin: 0 auto;
		overflow: visible;
		@media (max-width: 1440px) {
			max-width: 100%;
			overflow: hidden;
			padding: 0;
		}
	}
	.swiper-slide-active {
		&:hover {
			.wc-portfolio-slider-content {
				opacity: 1;
				visibility: visible;
				bottom: 55px;
				@media (max-width: 767px) {
					bottom: 20px;
				}
			}
		}
	}
}

.wc-portfolio-slider-item-wrapper {
	position: relative;
	.wc-portfolio-slider-content {
		display: flex;
		position: absolute;
		bottom: 50px;
		align-items: center;
		background-color: var(--wc-primary-color);
		width: calc(100% - 160px);
		left: 80px;
		justify-content: space-between;
		padding: 50px;
		border: 20px solid var(--wc-dark-gray-color);
		transition: all 0.3s ease;
		opacity: 0;
		visibility: hidden;
		@media (max-width: 767px) {
			bottom: 15px;
			width: calc(100% - 40px);
			left: 20px;
			padding: 30px 20px;
			border: 10px solid var(--wc-dark-gray-color);
		}
	}
	.wc-portfolio-title {
		font-size: 2rem;
		@media (max-width: 767px) {
			font-size: 1.5rem;
		}
		font-weight: 600;
		a {
			color: var(--pure-white-color);
		}
	}
	.wc-portfolio-category {
		margin: 0;
		a {
			color: var(--pure-white-color);
		}
	}
}