.intro {
	width: 100%;
	height: fit-content;

	.spacer {
		width: 100%;
		height: 15vh;
	}

	.box {
		width: 100%;
		height: fit-content;
		padding: 1rem;
		padding-top: 3rem;
		background-color: var(--d);
		position: relative;

		h2 {
			background-color: var(--bk);
			display: inline-block;
			padding: 1rem;
			position: absolute;
			top: -2rem;
			left: 50%;
			translate: -50% 0;
			color: var(--l);
      
		}

		.textBox {
			p {
				padding-bottom: 1rem;
				color: var(--l);
			}
		}
	}
}

@media (min-width: 568px) {
	.intro {
		/* .spacer {
      
    } */

		.box {
			h2 {
				font-size: 180%;
			}

			.textBox {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				p {
					padding-bottom: 1rem;
					width: 48%;
					font-size: 120%;
				}
			}
		}
	}
}