my-website/app/_page_sections/SkillsSection.module.scss

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

.section
{
	align-items: center;

	@include centerTwo;

	.illustrations
	{
		justify-self: center;
		width: 100%;

		.item
		{
			position: relative;
			@include flex(column);
			gap: $spacingXXXL;

			@include slideIn;

			img
			{
				align-self: flex-end;
				max-height: 400px;
				width: auto;
				max-width: 100%;
				height: auto;
			}

			h3
			{
				@include subtitle1($fontFamilyBaseAlt);
				display: none;
			}

			p
			{
				@include subtitle1($fontFamilyBaseAlt);
			}
		}

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

			.next
			{
				flex-grow: 1;
				background-position-x: right;
			}
		}

		// [SPECIAL]
		.whatsThis
		{
			position: absolute;
			cursor: pointer;

			right: 214px;
			top: 81px;
			width: 60px;
			height: 25px;

			@media screen and (max-width: 573px)
			{
				right: calc(50% - 30px);
				top: calc(15vw - 7px);
			}
		}

		// [SPECIAL]
		.sus
		{
			position: absolute;
			cursor: pointer;

			left: 0;
			top: 200px;
			width: 90px;
			height: 100px;

			@media screen and (max-width: 1472px)
			{
				top: calc(15vw - 20px);
				width: calc(8vw - 24px);
				height: calc(8vw - 17px);

				@media screen and (max-width: 860px)
				{
					top: calc(35vw - 65px);
					width: 12vw;
					height: 14vw;
				}
			}

		}
	}

	.content
	{
		@include flex(column);
		gap: $spacingM;

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

	@media screen and (max-width: 860px)
	{
		.content
		{
			grid-row: 1;

			.list
			{
				display: none;
			}
		}

		.illustrations
		{
			.mobileNav
			{
				display: flex;
			}

			.item
			{
				h3
				{
					display: block;
				}

				p
				{
					@include subtitle2($fontFamilyBaseAlt);
				}
			}
		}
	}
}