.portfolio-grid{
	display: grid;
	grid-template-columns: 2fr 1.35fr 1fr; */
	grid-auto-rows: 180px;
	gap: 18px;
}

.portfolio-item{
	display:block;
	position: relative;
	overflow:hidden;
	border-radius: 0;
}

.portfolio-item img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border-radius:9px;
}

.portfolio-item:nth-child(5n+1){
	grid-row: span 2;
	grid-column: 1;
}

.portfolio-item:nth-child(5n+2){
	grid-column: 2;
	grid-row: span 1;
}

.portfolio-item:nth-child(5n+3){
	grid-column: 3;
	grid-row: span 1;
}

.portfolio-item:nth-child(5n+4){
	grid-column: 2;
	grid-row: span 1;
}

.portfolio-item:nth-child(5n+5){
	grid-column: 3;
	grid-row: span 1;
}

.portfolio-title{
	position:absolute;
	left:24px;
	bottom:24px;
	color:#fff;
	font-size:22px;
	font-weight:600;
	line-height:1.2;
	z-index:2;
}

.portfolio-item::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(
	to top,
	rgba(0,0,0,0.45),
	rgba(0,0,0,0)
	);
	opacity:0;
	transition:.3s;
}

.portfolio-item:nth-child(5n+1)::after{
	opacity:1;
}

@media (max-width: 900px){
.portfolio-grid{
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 180px;
}
.portfolio-item:nth-child(5n+1){
	grid-column: 1 / -1;
	grid-row: span 2;
}
}

@media (max-width: 768px) {
	.portfolio-grid {
		grid-template-columns: 0fr;
	}
	
	.portfolio-grid {
		grid-template-columns: 0fr 1fr 1fr;
		gap:18px 0;
	}
	
	.portfolio-item:nth-child(5n+2),
	.portfolio-item:nth-child(5n+4) {
		margin-right:9px;
	}
	
	.portfolio-item:nth-child(5n+3),
	.portfolio-item:nth-child(5n+5) {
		margin-left:9px;
	}
}