@layer components {
	.site-map{
		--max-column-size: 40rem;

		padding-block: 4.375rem;
	}

	@media(min-width: 768px){
		.site-map > ul{
			columns: 2;
		}
	}

	.site-map a{
		color: black;
		text-decoration: none;
		transition: color .3s;
	}

	.site-map a:hover{
		color: hsl(var(--clr-teal));
	}

	.site-map > ul > li{
		break-inside: avoid;
		font-size: var(--fs-step-1);
		line-height: 1.75;
		font-weight: 500;
		margin-bottom: 1rem;
	}

	.site-map ul{
		list-style: none;
	}

	.site-map ul li{

	}

	.site-map ul ul{
		margin-left: 1rem;
	}

	.site-map ul ul li{
		font-size: var(--fs-step-0);
		font-weight: 300;
	}
}