.p-hover-bg-list {
	display: flex; flex-direction: column; align-items: start; list-style: none; padding: 8vw 0 8vw;
	}

/* PORTFOLIO TITLE ALIGNMENT */
.is-p-title-align-center .p-hover-bg-list {
  	align-items: center; 
	}
.is-p-title-align-right .p-hover-bg-list {
  	align-items: flex-end; 
	}

/* INLINE LAYOUT */
.p-hover-bg-list.is-inline {
	flex-wrap: wrap; flex-direction: row; padding: 0;
	}
.p-hover-bg-list.is-inline .p-item {
	margin-right: 5vw;
	}
.is-p-title-align-center .p-hover-bg-list.is-inline {
	justify-content: center;
	}
.is-p-title-align-right .p-hover-bg-list.is-inline {
	justify-content: flex-end;
	}
.is-p-title-align-right .p-hover-bg-list.is-inline .p-item {
	margin-right: 0; margin-left: 5vw;
	}
.is-p-title-align-center .p-hover-bg-list.is-inline .p-item {
	margin-right: 2.5vw; margin-left: 2.5vw;
	}

/* HORIZONTAL LAYOUT */
.p-hover-bg-list.is-horizontal {
  	flex-direction: row; padding: 0;
	}
.p-hover-bg-list.is-horizontal .p-item {
  	margin-right: 10vw;
	}
.p-hover-bg-list.is-horizontal .p-item:last-child {
  	padding-right: 10vw;
	}
.is-p-title-align-center .p-hover-bg-list.is-horizontal .p-item:first-child {
  	margin-left: 12vw;
	}
.is-p-title-align-center .p-hover-bg-list.is-horizontal .p-item:last-child {
  	padding-right: 12vw;
	}

/* HOVER FADE SUBLINGS EFFECT */
.p-item {
  	transition: opacity .6s;
	}
.p-hover-bg-list:hover .p-item:not(:hover) {
  	opacity: 0.32;
	}
/* Prevents :hover from triggering in the gaps between items */
.p-hover-bg-list { 
	visibility: hidden; 
	}
.p-hover-bg-list > * { 
	visibility: visible; transition: opacity 300ms linear 200ms; 
	}
.p-hover-bg-list > *:hover { 
	opacity: 1; transition-delay: 0ms, 0ms;
	}

.p-item .p-title {
	margin: 0; line-height: 1.05;
	}
html:not(.dark-mode) .p-item .p-title {
	line-height: 1; padding: 0 var(--space-xl); margin-bottom: var(--space-md); transition: all 300ms; background: var(--body-bg-color); color: var(--headings-text-color); /* border-radius: min(var(--12rpx), var(--p-image-border-top-radius)) min(var(--12rpx), var(--p-image-border-top-radius)) min(var(--12rpx), var(--p-image-border-top-radius)) min(var(--12rpx), var(--p-image-border-top-radius));     */ 
	border-radius: var(--p-image-border-top-radius) var(--p-image-border-top-radius) var(--p-image-border-bottom-radius) var(--p-image-border-bottom-radius);
	backdrop-filter: blur(20px); background: rgb(255 255 255 / 36%);
	}

/* NUMBERS */
.p-item:before {
  	pointer-events: none; counter-increment: article; content: counters(article, ".", decimal-leading-zero); position: absolute; z-index: -1; left: calc( -5% - 0.28em ); transition-duration: 0.5s; transition-property: transform, opacity; opacity: 0.16; transform: translateX(-20px); line-height: 1; font-family:var(--p-title-font); font-style: italic; font-size: calc(var(--p-title-font-size) * 1.4); color: var(--p-numbers-color); margin-right: var(--space-sm);
	}
.is-portfolio-numbers-hidden .p-item::before {
	display: none;
	}
.p-item:hover:before {
  	opacity: 1; transform: translateX(0px);
	}
.p-hover-bg-list.is-inline .p-item:before {
	position: fixed; bottom: -7%; left: 50%; transform: translateX(-50%) translateY(40px); opacity: 0; font-size: calc(var(--p-title-font-size) * 1.8)
	}
.p-hover-bg-list.is-inline .p-item:hover:before {
	opacity: .36; transform: translateX(-50%) translateY(0px);
	}
.p-hover-bg-list.is-horizontal .p-item {
	position: relative;
	}
.p-hover-bg-list.is-horizontal .p-item:before {
	top: 0%; left: 50%; transform: translateX(-50%) translateY(46vh); font-size: calc(var(--p-title-font-size) * 1)
	}
.p-hover-bg-list.is-horizontal .p-item:hover:before {
	opacity: .36; transform: translateX(-50%) translateY(44vh);
	}

#wrap-texture {
  	position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: flex; align-items: center; justify-content: center;
	}
#canvas {
  	/* make the canvas wrapper fits the document */
  	position: absolute; 

	width: calc(var(--p-image-width) * 1vw);
	/* width: max(calc(var(--p-image-width) * 1vw), 100vh);  */
	height: calc(var(--p-image-height) * 1vh); 
	
	/* left: calc((100 - var(--p-image-width)) * .5vw); */ 
	border-radius: var(--p-image-border-top-radius) var(--p-image-border-top-radius) var(--p-image-border-bottom-radius) var(--p-image-border-bottom-radius); overflow: hidden;
	}

#canvas canvas {
  transform: scale(1.016); 
  /* transform: scale( calc(var(--p-image-width) / 100) );  */
  
}

.plane {
	z-index: 100; width: calc(var(--p-image-width) * 1vw); /* width: max(calc(var(--p-image-width) * 1vw), 100vh); */  /* height: clamp(10vh, calc(var(--p-image-height) * 1vh), 100vh); */ height: calc(var(--p-image-height) * 1vh);
	}
.plane img {
  	display: none;
	}
	
/* prevent canvas being too small on mobile devices */
@media screen and (max-width: 991px) {
	#canvas, 
	.plane {
		width: max(calc(var(--p-image-width) * 1vw), 100vh); 
		}
}