@use '../variables' as *;

.#{$prefix}navigation-menu-grid {
	display: grid;
	gap: var(--#{$prefix}navigation-menu-grid-gap, 1.5rem);
	padding: var(--#{$prefix}navigation-menu-grid-padding, 1.25rem);

	&--columns-1 {
		grid-template-columns: 1fr;
	}

	&--columns-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	&--columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	&--columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}