assets/scss/base/_placeholder.scss
/* --- Box Shadow --- */
// -- Placeholder -- box shadow default
%box-shadow { 
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); 
}
%box-shadow-hover { 
	@extend %box-shadow;
	transition: box-shadow .5s ease;
	&:hover {
		box-shadow: .15rem .25rem .75rem rgba(0, 0, 0, .10); 
	}
}
// -- Placeholder -- box shadow dark
%box-shadow-dark {
	box-shadow: 3px 3px 11px -3px rgba(0, 0, 0, .25);
}
// -- Placeholder -- box shadow image
%box-shadow-img {
	box-shadow: 5px 5px 0 #EDEDED;
}
/* --- Shadow --- */
%shadow-md {
	transition: box-shadow .5s ease;
	box-shadow: 0 .175rem .92rem rgba(0, 0, 0, .075) !important;
	&:hover {
		box-shadow: 0 .375rem 1.2rem rgba(0, 0, 0, .18) !important;    
	}
}
%shadow-md-dark {
	transition: box-shadow .5s ease;
	box-shadow: 0 .175rem .92rem rgba(0, 0, 0, .45) !important;
	&:hover {
		box-shadow: 0 .375rem 1.2rem rgba(0, 0, 0, .75) !important;    
	}
}
// -- Bg Overlay setup
%bg-overlay {
	position: absolute;
	top:0 ;
	bottom: 0;
	left:0;
	right: 0;
	// z-index: 0;
	height: 110vh;
}
// Overlay Placeholder
%overlay {
	content: " ";
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	overflow: hidden;
}
%overlay-parent {
	background-size: cover;
	position: relative;
	> img {
        z-index: -1
	}
}
// Default text transform
%uppercase { text-transform: uppercase; }
%lowercase { text-transform: lowercase; }
/* --- 1. Filter Grayscale --- */
/* --- 1.1 Variables - grayscale image filter --- */
/* --- 1.1.1 Variable Default --- */
%ilist {
//   -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
%ilist:hover {
//   -webkit-filter: none;
  filter: none;
}
/* --- 1.1.2 Variable Invert --- */
%ilist-inv {
	// -webkit-filter: none;
	filter: none;
}
%ilist-inv:hover {
	// -webkit-filter: grayscale(1);
	filter: grayscale(1);
	transition: .40s both;
}
/* --- 2. Filter Invisible --- */
/* --- 2.1 Variables - invisible image filter --- */
/* --- 2.1.1 Variable Default --- */
%ilist-i {
	-webkit-filter: none;
	filter: none;
}
%ilist-i:hover {
	-webkit-filter: opacity(.5);
	filter: opacity(.5);
}
/* --- 2.1.2 Variable Invert --- */
%ilist-i-inv {
	-webkit-filter: opacity(.5);
	filter: opacity(.5);
}
%ilist-i-inv:hover {
	-webkit-filter: none;
	filter: none;
}
/* --- 3. Filter Blur --- */
/* --- 3.1 Variables - blur image filter --- */
/* --- 3.1.1 Variable Default --- */
%ilist-b {
//   -webkit-filter: none;
  filter: none;
}
%ilist-b:hover {
//   -webkit-filter: blur(1px);
  filter: blur(2px);
}
/* --- 3.1.2 Variable Invert --- */
%ilist-b-inv {
	// -webkit-filter: blur(1px);
	filter: blur(2px);
}
%ilist-b-inv:hover {
	// -webkit-filter: none;
	filter: none;
}
/* --- 4. Filter Contrast --- */
/* --- 4.1 Variables - contrast image filter --- */
/* --- 4.1.1 Variable Default --- */
%ilist-c {
	// -webkit-filter: none;
	filter: none;
}
%ilist-c:hover {
	// -webkit-filter: contrast(1.3);
	filter: contrast(1.3);
}
/* --- 4.1.2 Variable Invert --- */
%ilist-c-inv {
	// -webkit-filter: contrast(1.3);
	filter: contrast(1.3);
}
%ilist-c-inv:hover {
	// -webkit-filter: none;
  	filter: none;
}