:has( > .grd ) {
	container-type: inline-size;
}

.grd {
	--itm-val: 100;
	--itm-w: calc(var(--itm-val) * 1%);
	--itm-grw: 1;
	
	display: flex;
	flex-wrap: wrap;
		
	&[class*="gp_sp"] {
		--itm-w: calc( var(--itm-val) * 1% - ( var(--grd-sp-dyn) * ( (100 - var(--itm-val)) * .01 ) ) );
	}
    
	&.ato-fit {
		--itm-grw: 0;
	}
	
	&.mx-6, &.mx-7 {
		--itm-val: 50;
	}
	
	> * {
		flex: var(--itm-grw) 0 var(--itm-w);
	}

	@container (width >= 35rem) {
		
		&:not([class*="mx-"]) {
			--itm-val: 50;
		}
		
		&.mx-6 {
			--itm-val: 33.333;
		}
		
		&.mx-7 {
			--itm-val: 25;
		}
			
	}
	
	@container (width >= 50rem) {
		
		&.mx-2, &.mx-3, &.mx-4 {
			--itm-val: 50;
		}
		
		&:not([class*="mx-"]) {
			--itm-val: 33.333;
		}
		
		&.mx-6 {
			--itm-val: 25;
		}
		
	}
	
	@container (width >= 78rem) {
		
		&.mx-3 {
			--itm-val: 33.333;
		}
		
		&.mx-4 {
			--itm-val: 25;
		}
		
		&:not([class*="mx-"]) {
			--itm-val: 20;
		}
		
		&.mx-6 {
			--itm-val: 16.66667;
		}
		
		&.mx-7 {
			--itm-val: 14.285;
		}
		
	}
	
}