section#introdution {
	position: relative;
	width: 100%;
	height: min(500px, 45vh);
	overflow: hidden;

	>div.dots {
		--dot-bg: black;
		--dot-color: red;
		--dot-size: 3px;
		--dot-space: 8px;
		z-index: -50;
		position: absolute;
		width: 100%;
		height: 100%;
		background:
			linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
			linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color);
		mix-blend-mode: color-burn;
		filter: blur(1px);
	}

	>video:only-of-type {
		z-index: -100;
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		scale: 1.1;
		filter: blur(5px);
	}

	>div {
		position: relative;
		width: 30vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: default;

		>span#label {
			margin-top: -60px;
			margin-bottom: 20px;
			width: 320px;
			padding: 0.3em .5em 0.3em 1em;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 20px;
			font-size: 1.2rem;
			font-family: "Bahnschrift";
			font-weight: 400;
			border-radius: 1.125rem;
			border: 1px solid #8080803d;
			color: #ffe0e0;
			border: 1px solid #eeeeee1c;
			background-color: #dadada30;
			backdrop-filter: blur(2px);
		}

		>h2#title {
			margin: unset;
			width: max-content;
			padding: 0.2em 0.5em 0em;
			font-family: 'Bahnschrift';
			font-size: 2.6rem;
			font-weight: 600;
			border-radius: 0 0.75rem 0 0;
			color: #241fd3;
			background-color: #fff;
		}

		>p#team {
			margin: unset;
			width: 650px;
			height: 70px;
			box-sizing: border-box;
			padding: 0.6em 1.2em;
			text-align: center;
			font-size: 1.2rem;
			font-family: "Geologica";
			font-weight: 400;
			border-radius: 0.75rem;
			background-color: #fff;

			>span {
				color: #0ea5e9;
				font-weight: 800;
			}
		}

		>span {
			position: absolute;
			display: flex;
			padding: 0.4em 0.8rem 0.3em;
			font-size: 1.2rem;
			font-family: 'Bahnschrift';
			font-weight: 400;
			border-radius: 0.75rem;
			background-color: #fff;

			&:is(#experience) {
				bottom: -3.4rem;
				left: 0px;
				font-size: 1.4rem;
				font-weight: 600;
			}

			&:is(#anything) {
				right: -10px;
				bottom: -30px;
				font-weight: 200;
				border-radius: 0 0 0.75rem 0.75rem;
			}

			&:is(#technology) {
				left: -70px;
				top: -1.5rem;
				font-size: 1rem;
				font-weight: 600;
				border-bottom-right-radius: 0;
			}
		}
	}
}
