/*!  SHORTCODE PORTFOLIO GRID
----------------------------------------------------------*/

// FILTERS

.vlt-portfolio-grid-filters
	margin-bottom 50px
	text-align center

	.vlt-filter-counter
		&::before
			content '('
			margin-left 4px
		&::after
			content ')'

	.cbp-filter-item
		display inline-flex
		user-select none
		cursor pointer
		font-size 12px
		line-height 1
		letter-spacing 2px
		text-transform uppercase
		padding 8px 12px 8px 14px
		margin 0 6px
		color $c1

	.cbp-filter-item
		&:hover,
		&.cbp-filter-item-active
			color $c0
		&.cbp-filter-item-active
			background-color $c8

// STYLE 1

.vlt-portfolio-style1

	.vlt-portfolio-grid-link
		display block

	.vlt-portfolio-grid-content
		padding 10px
		text-align center
		border 1px solid $c8
		border-top none
		p
			margin 0
			font-size 12px


// STYLE 2

.vlt-portfolio-style2

	.vlt-portfolio-grid-link
		display block
		position relative
		&::before
			content ''
			position absolute
			top 0
			left 0
			width 100%
			height 100%
			background-color rgba($c6, 80%)
			opacity 0
			transition all 300ms $transition

	.vlt-portfolio-grid-content
		position absolute
		top 50%
		left 0
		width 100%
		text-align center
		pointer-events none
		transform translateY(-50%)
		h5,
		p
			opacity 0
			transform translateY(10px)
			transition all .2s $transition

		p
			margin 0
			font-size 12px

	&:hover
		.vlt-portfolio-grid-link::before
			opacity 1
		.vlt-portfolio-grid-content
			h5,
			p
				opacity 1
				transform translateY(0)
			h5
				transition-delay .2s
			p
				transition-delay .3s