@use "@/_styles/theme" as *;

.section
{
	@include centerTwo;

	.content
	{
		overflow-x: hidden;
		gap: $spacingM;
		@include flex(column);

		.listItem
		{
			background-position-x: right;
		}
	}

	.descriptions
	{
		@include body2($fontFamilyBaseAlt);
		display: grid;
		overflow-x: visible;
		min-height: 760px;

		img
		{
			width: 100%;
			height: auto;
		}

		.defaultImg
		{
			align-self: center;

			@include slideIn;
		}

		.mobileNav
		{
			margin-top: $spacingL;
			display: none;
			gap: $spacingMNudge;

			.next
			{
				flex-grow: 1;
			}
		}

		.projectItem
		{
			@include flex(column);
			max-width: 600px;
			justify-self: center;
			gap: $spacingM;

			@include slideIn;

			@media (prefers-color-scheme: light)
			{
				> img[data-theme=dark]
				{
					display: none;
				}
			}

			@media (prefers-color-scheme: dark)
			{
				> img[data-theme=light]
				{
					display: none;
				}
			}

			p
			{
				color: $colorNeutralForeground2;
			}

			> h4
			{
				@include subtitle1($fontFamilyBaseAlt);
			}

			.stack
			{
				@include flex(row, wrap);
				gap: $spacingL;
				@include body1;

				.item
				{
					@include flex(row);
					align-items: center;
					gap: $spacingSNudge;

					> svg
					{
						width: 24px;
						height: 24px;
					}
				}
			}
		}
	}

	.cta
	{
		align-self: flex-end;
	}

	@media screen and (max-width: 860px)
	{
		.descriptions
		{
			min-height: unset;

			.mobileNav
			{
				display: flex;
			}
		}

		.list
		{
			display: none;
		}
	}
}
