:root {
	--portfolioGap	:	24px;
	--portfolioItem	:	260px;
}

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: var(--portfolioItem);
	gap: var(--portfolioGap);
	width: 100%;
}
.portfolio-item {
	position: relative;
	height: 100%;
	background: rgba(var(--revilodesign_black), 1);
	border-radius: var(--revilodesign_borderRadiusBigs);
}
.portfolio-item.size-1x1 {
	grid-column: span 1;
	grid-row: span 1;
}
.portfolio-item.size-2x1 {
	grid-column: span 2;
	grid-row: span 1;
}
.portfolio-item.size-1x2 {
	grid-column: span 1;
	grid-row: span 2;
}
.portfolio-item.size-2x2 {
	grid-column: span 2;
	grid-row: span 2;
}
.stack {
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	gap: var(--portfolioGap);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: var(--portfolioItem);
	background: none;
}
.portfolio-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.portfolio-item h3 {
	position: absolute;
	bottom: 24px;
	left: 24px;
	margin: 0;
	color: rgba( var(--revilodesign_white), 1);
	padding: 0;
	z-index: 21;
}
.portfolio-item a {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: var(--revilodesign_borderRadiusBigs);
	overflow: hidden;
}
.portfolio-item a:focus-visible {
	outline: 4px solid rgba( var(--revilodesign_primary), 1);
	outline-offset: 4px;
}
.portfolio-item a picture img {
	transition: var(--revilodesign_transition);
}
.portfolio-item a:hover picture img,
.portfolio-item a:focus-visible picture img {
	transform: scale(1.1) rotate(3deg);
}
.portfolio-item a::before {
	content: '';
	background: rgba( var(--revilodesign_black), .42);
	transition: var(--revilodesign_transition);
	border-radius: var(--revilodesign_borderRadiusBigs);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 19;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}
.portfolio-item a:hover::before {
	opacity: 1;
}
/*--------*/
/* !ARROW */
/*--------*/
.portfolio-item span.arrow {
	position: absolute;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 24px;
}
.portfolio-item span.arrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	background: rgba( var(--revilodesign_white), 1);
	width: 100%;
	height: 2px;
	transform: translateY(-50%) translateX(-24px);
	opacity: 0;
	transition: var(--revilodesign_transition);
}
.portfolio-item:hover span.arrow::before {
	transform: translateY(-50%);
	opacity: 1;
}
.portfolio-item span.arrow span {
	width: 24px;
	height: 24px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.portfolio-item span.arrow span::before,
.portfolio-item span.arrow span::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-12px) rotate(45deg) translateX(-12px);
	background: rgba( var(--revilodesign_white), 1);
	width: 12px;
	height: 2px;
	opacity: 0;
	transition: var(--revilodesign_transition);
}
.portfolio-item span.arrow span::after {
	transform: translateY(12px) rotate(-45deg) translateX(-12px);
}
.portfolio-item:hover span.arrow span::before {
	transform: translateY(-6px) rotate(45deg) translateX(1px);
	opacity: 1;
}
.portfolio-item:hover span.arrow span::after {
	transform: translateY(4px) rotate(-45deg) translateX(1px);
	opacity: 1;
}
@media (max-width: 768px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 150px;
	}
}
@media ( max-width: 768px ) {
	.portfolio-item.size-1x1,
	.portfolio-item.size-1x2 {
		grid-column: span 2;
		grid-row: span 2;
	}	
	.portfolio-item.stack {
		grid-column: span 2;
		grid-row: span 4;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 150px;
	}
	
	.portfolio-item.stack .portfolio-item {
		grid-column: span 2;
		grid-row: span 2;
	}
}