@use "@gloria/layout/_mixins.scss" as *;

.c-columns {
	display: grid;
	grid-template-columns: repeat(var(--columns-count, 2), 1fr);
	gap: var(--columns-gap, var(--spacing-4));
	width: 100%;

	&:not(:last-child) {
		margin-bottom: var(--spacing-3);
	}
  
	// Responsive behavior
	@include mobile {
	  grid-template-columns: 1fr;
	  --columns-count: 1;
	}
  
	// Column size variants
	&--2 {
	  @include desktop {
		--columns-count: 2;
	  }
	}
  
	&--3 {
	  @include desktop {
		--columns-count: 3;
	  }
	}
  
	&--4 {
	  @include min-width($breakpoint-lg) {
		--columns-count: 4;
	  }
	}
  
	// Gap size variants
	&--gap-sm {
	  --columns-gap: var(--spacing-2);
	}
  
	&--gap-md {
	  --columns-gap: var(--spacing-4);
	}
  
	&--gap-lg {
	  --columns-gap: var(--spacing-8);
	}
  
	&--gap-xl {
	  --columns-gap: var(--spacing-12);
	}
  }
