@use "../../core/functions" as function;
@use "../../core/mixin" as mixin;

.g-container {
	display: grid;
	grid-template-columns: 100%;
	// grid-template-rows: 100%;
	grid-template-rows: auto;
	gap: var(--gap);
	width: calc(100% - 2rem);
	margin-left: 1rem;
	margin-right: 1rem;
	max-width: var(--max-width);
	@include mixin.from(1200px) {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

@each $size in function.$sizes {
	@include mixin.from($size) {
		$last: 12;
		@for $i from 1 through $last {
			.gtc#{$i}-#{$size} {
				--gap: 2rem;
				grid-template-columns: repeat(
					#{$i},
					calc((100% - (var(--gap) * (#{$i} - 1))) / #{$i})
				);
			}
			.gtr#{$i}-#{$size} {
				--gap: 2rem;
				grid-template-rows: repeat(
					#{$i},
					calc((100% - (var(--gap) * (#{$i} - 1))) / #{$i})
				);
			}
			.gtca-#{$size} {
				grid-template-columns: auto;
			}
			.gtra-#{$size} {
				grid-template-rows: auto;
			}
			.gce#{$i}-#{$size} {
				grid-column-end: #{$i};
			}
			.gcs#{$i}-#{$size} {
				grid-column-start: #{$i};
			}
			.gces#{$i}-#{$size} {
				grid-column-end: span #{$i};
			}
			.gcss#{$i}-#{$size} {
				grid-column-start: span #{$i};
			}
			.gre#{$i}-#{$size} {
				grid-row-end: #{$i};
			}
			.grs#{$i}-#{$size} {
				grid-row-start: #{$i};
			}
			.gres#{$i}-#{$size} {
				grid-row-end: span #{$i};
			}
			.grss#{$i}-#{$size} {
				grid-row-start: span #{$i};
			}

			@if $i == $last {
				$higher: $last + 1;
				.gce#{$higher}-#{$size} {
					grid-column-end: #{$higher};
				}
				.gces#{$higher}-#{$size} {
					grid-column-end: span #{$higher};
				}
				.gre#{$higher}-#{$size} {
					grid-row-end: #{$higher};
				}
				.gres#{$higher}-#{$size} {
					grid-row-end: span #{$higher};
				}
			}
		}

		@for $i from 1 through 5 {
			.gg#{$i}-#{$size} {
				--gap: #{$i}rem;
				gap: var(--gap);
			}
			.grg#{$i}-#{$size} {
				--gap: #{$i}rem;
				row-gap: var(--gap);
			}
			.gcg#{$i}-#{$size} {
				--gap: #{$i}rem;
				column-gap: var(--gap);
			}
		}
	}
}