:has( > [class*="grd"] ) {
	container-type: inline-size;
}

[class*="grd"] {
	--grd-itm-min: 18rem;
	--grd-itm-max: 100cqw;
	--grd-ato-f: auto-fit;
	
	display: grid;
	grid-auto-rows: max-content;
    grid-template-columns: repeat(var(--grd-ato-f), minmax(min(var(--grd-itm-min), var(--grd-itm-max)), 1fr));
    
    &[class*="gp_sp"] {
		--grd-itm-min-dyn: calc(var(--grd-itm-min) - var(--grd-sp-dyn));
		grid-template-columns: repeat(var(--grd-ato-f), minmax(min(var(--grd-itm-min-dyn), var(--grd-itm-max)), 1fr));
	}
    
	&[class*="ato-fill"] {
		--grd-ato-f: auto-fill;
	}
	
	&.mx-1 {
		--grd-itm-min: 100cqw;
	}
	
	&.mx-2 {
		--grd-itm-min: 29rem;
	}
	
	&.mx-3 {
		--grd-itm-min: 25rem;
	}
	
	&.mx-4 {
		--grd-itm-min: 21rem;
	}
	
	&.mx-6 {
		--grd-itm-min: 13rem;
		--grd-itm-max: calc(50% - var(--grd-sp-dyn));
	}
	
}