
:root {
	/* 	Fluid type scale calculator: Calculated font sizes
	/* @link https://utopia.fyi/type/calculator?c=360,18,1.067,1920,21,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

	/* Step -2: 15.8104px → 13.44px */
	--step--2: clamp(0.84rem, 1.0223rem + -0.152vw, 0.9882rem);
	/* Step -1: 16.8697px → 16.8px */
	--step--1: clamp(1.05rem, 1.0554rem + -0.0045vw, 1.0544rem);
	/* Step 0: 18px → 21px */
	--step-0: clamp(1.125rem, 1.0817rem + 0.1923vw, 1.3125rem);
	/* Step 1: 19.206px → 26.25px */
	--step-1: clamp(1.2004rem, 1.0988rem + 0.4515vw, 1.6406rem);
	/* Step 2: 20.4928px → 32.8125px */
	--step-2: clamp(1.2808rem, 1.1031rem + 0.7897vw, 2.0508rem);
	/* Step 3: 21.8658px → 41.0156px */
	--step-3: clamp(1.3666rem, 1.0904rem + 1.2276vw, 2.5635rem);
	/* Step 4: 23.3308px → 51.2695px */
	--step-4: clamp(1.4582rem, 1.0552rem + 1.7909vw, 3.2043rem);
	/* Step 5: 24.894px → 64.0869px */
	--step-5: clamp(1.5559rem, 0.9906rem + 2.5124vw, 4.0054rem);

	/* 	Fluid Space Calculator: Individual space values
		@link https://utopia.fyi/space/calculator?c=320,18,1.2,1920,32,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

	/* Space 3xs    : 5px → 8px */
	 --space-3xs    : clamp(0.3125rem, 0.275rem + 0.1875vw, 0.5rem);
	/* Space 2xs    : 9px → 16px */
	 --space-2xs    : clamp(0.5625rem, 0.475rem + 0.4375vw, 1rem);
	/* Space xs     : 14px → 24px */
	 --space-xs     : clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
	/* Space s      : 18px → 32px */
	 --space-s      : clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
	/* Space m      : 27px → 48px */
	 --space-m      : clamp(1.6875rem, 1.425rem + 1.3125vw, 3rem);
	/* Space l      : 36px → 64px */
	 --space-l      : clamp(2.25rem, 1.9rem + 1.75vw, 4rem);
	/* Space xl     : 54px → 96px */
	 --space-xl     : clamp(3.375rem, 2.85rem + 2.625vw, 6rem);
	/* Space 2xl    : 72px → 128px */
	 --space-2xl    : clamp(4.5rem, 3.8rem + 3.5vw, 8rem);
	/* Space 3xl    : 108px → 192px */
	 --space-3xl    : clamp(6.75rem, 5.7rem + 5.25vw, 12rem);

	/* One-up pairs */
	/* Space 3xs-2xs: 5px → 16px */
	 --space-3xs-2xs: clamp(0.3125rem, 0.175rem + 0.6875vw, 1rem);
	/* Space 2xs-xs : 9px → 24px */
	 --space-2xs-xs : clamp(0.5625rem, 0.375rem + 0.9375vw, 1.5rem);
	/* Space xs-s   : 14px → 32px */
	 --space-xs-s   : clamp(0.875rem, 0.65rem + 1.125vw, 2rem);
	/* Space s-m    : 18px → 48px */
	 --space-s-m    : clamp(1.125rem, 0.75rem + 1.875vw, 3rem);
	/* Space m-l    : 27px → 64px */
	 --space-m-l    : clamp(1.6875rem, 1.225rem + 2.3125vw, 4rem);
	/* Space l-xl   : 36px → 96px */
	 --space-l-xl   : clamp(2.25rem, 1.5rem + 3.75vw, 6rem);
	/* Space xl-2xl : 54px → 128px */
	 --space-xl-2xl : clamp(3.375rem, 2.45rem + 4.625vw, 8rem);
	/* Space 2xl-3xl: 72px → 192px */
	 --space-2xl-3xl: clamp(4.5rem, 3rem + 7.5vw, 12rem);

	/* Custom pairs */
	/* Space s-l    : 18px → 64px */
	 --space-s-l    : clamp(1.125rem, 0.55rem + 2.875vw, 4rem);
}



/*	Fluid Grid Calculator:
	@link https://utopia.fyi/grid/calculator?c=320,18,1.2,1920,32,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	--grid-max-width: 124.00rem;
	--grid-gutter   : var(--space-s-l, clamp(1.125rem, 0.5721rem + 2.7644vw, 4rem));
	--grid-columns : 12;
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}
