.portfolio {
		background: #07080d;
		color: white;
	}

	.portfolio-head {
		display: grid;
		grid-template-columns: minmax(0, 0.72fr) minmax(18rem, 0.38fr);
		gap: 2rem;
		align-items: end;
		margin-bottom: 2rem;
	}

	.portfolio-head .lead {
		margin: 0;
		color: #a8b0c2;
	}

	.work-grid {
		display: grid;
		grid-template-columns: 1.25fr 0.85fr 1fr;
		grid-auto-rows: 220px;
		gap: 1rem;
	}

	.work-card {
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(255, 255, 255, 0.13);
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.075);
		text-decoration: none;
		box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
	}

	.work-card:first-child {
		grid-row: span 2;
	}

	.work-card:nth-child(4) {
		grid-column: span 2;
	}

	.work-card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		filter: saturate(0.86) contrast(1.07);
		transition: transform 520ms ease, filter 520ms ease;
	}

	.work-card::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 46%, rgba(7, 8, 13, 0.78));
	}

	.work-card:hover img {
		transform: scale(1.045);
		filter: saturate(1.04) contrast(1.08);
	}

	.work-card span {
		position: absolute;
		left: 1rem;
		bottom: 1rem;
		z-index: 1;
		padding: 0.52rem 0.72rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12);
		backdrop-filter: blur(16px);
		color: white;
		font-size: 0.78rem;
		font-weight: 900;
		text-decoration: none;
	}

	.portfolio-foot {
		margin-top: 2rem;
		display: flex;
		justify-content: flex-end;
	}

	@media (max-width: 860px) {
		.portfolio-head {
			grid-template-columns: 1fr;
		}

		.work-grid {
			grid-template-columns: 1fr 1fr;
			grid-auto-rows: 190px;
		}

		.work-card:first-child,
		.work-card:nth-child(4) {
			grid-column: auto;
			grid-row: auto;
		}
	}

	@media (max-width: 560px) {
		.work-grid {
			grid-template-columns: 1fr;
			grid-auto-rows: 260px;
		}

		.portfolio-foot {
			justify-content: flex-start;
		}
	}