#portfolio {
	scroll-snap-align: center;

	.portfolio-items {
		display: flex;
		width: 100vw;
		gap: .5rem;
		min-height: 0;
		padding-inline: 25%;
		box-sizing: border-box;
		overflow: scroll;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		

		div.portfolio-item {
			display: grid;
			grid-template-columns: fit-content(16rem) 1fr;
			grid-template-rows: min-content min-content auto;
			width: 100%;
			flex-shrink: 0;
			column-gap: 2.5rem;
			padding: .5rem;
			box-shadow: none;
			transition: .3s;
			box-sizing: border-box;
			aspect-ratio: 9 / 7;
			scroll-snap-align: center;
			opacity: .5;
			filter: blur(5px) saturate(0.2);
			transform: scale(.9);

			&.active {
				opacity: 1;
				filter: none;
				transform: scale(1);
			}

			>* {
				text-align: left;
			}

			>video {
				grid-column: 1 / -1;
				grid-row: 1;
				width: 100%;
				min-width: 0;
				aspect-ratio: 16/9;
				margin-bottom: .5rem;
				border-radius: 3px;
			}

			>div {
				>h2 {
					font-family: Cormorant Garamond;
					font-weight: 600;
					grid-column: 1;
					grid-row: 2;
					font-size: 3.2rem;
					margin-bottom: 0;
				}

				>div {
					font-style: italic;
					grid-row: 3;
					grid-column: 1;
				}
			}

			>p {
				overflow: auto;
				margin: 0;
				font-size: 1.1rem;
				grid-row: 2 / span 2;
				grid-column: 2;
				padding-top: 1rem;
				box-sizing: border-box;
				padding-right: 1.6rem;
			}
		}
	}
}

#logo {
	mask-image: url(/icons/logo_marcom.svg);
}