info {
	"name": "g-l",
	"type": "component"
}

template {
	<div class="grid-layout">
		<slot />
	</div>	
}

style {
	.grid-layout {
		display: flex;

		flex-direction: column;

		height: 100%;

		&.space {
			padding: calc(var(--base-size) / 2);
			height: calc(100% - var(--base-size));

			> .grid-row, > .grid-column {
				> .grid-row, > .grid-column {
					> .card, > .space {
						margin: calc(var(--base-size) / 2);
					}
				}
			}
		}
	}
}