/* ==========================================================
BAHAMON.DEV — MASTER
Global design system and reusable infrastructure
========================================================== */

/* ==========================================================
	01. DESIGN TOKENS
	========================================================== */

	:root {

		/* ----------------------------------------------------------
		Typography
		---------------------------------------------------------- */

		--font-inter: "Inter", sans-serif;
		--font-cormorant: "Cormorant Garamond", serif;

		--font-display: var(--font-cormorant);
		--font-heading: var(--font-cormorant);
		--font-body: var(--font-inter);
		--font-label: var(--font-inter);

		--lh-tight: 100%;
		--lh-base: 110%;
		--lh-loose: 120%;

		/* ----------------------------------------------------------
		Colors
		---------------------------------------------------------- */

		--color-cream: #F6F2EA;
		--color-cream-alt: #E9DFCF;
		--color-cream-header: #FCFAF6;

		--color-ink: #201E1C;
		--color-text: #3D3935;

		--color-gold: #C2A675;
		--color-gold-dark: #9A7B4F;
		--color-gold-light: #E5D3B3;

		--color-wine: #542D38;

		--color-border: rgba(32, 30, 28, 0.14);
		--color-faded: rgba(61, 57, 53, 0.62);
		--color-overlay: rgba(18, 16, 14, 0.55);


		/* Semantic theme tokens */

		--theme-bg: var(--color-cream);
		--theme-surface: var(--color-cream-alt);

		--theme-heading: var(--color-ink);
		--theme-text: var(--color-text);
		--theme-muted: var(--color-faded);
		--theme-faded: var(--color-faded);
		--theme-rule: var(--color-border);

		--theme-primary: var(--color-gold);
		--theme-primary-dark: var(--color-gold-dark);
		--theme-secondary: var(--color-wine);
		--theme-overlay: var(--color-overlay);
		/* ----------------------------------------------------------
		   Theme — Light
		   ---------------------------------------------------------- */

		[data-theme="light"] {
		  --theme-bg: #F2EEE8;
		  --theme-surface: #E8E3DC;

		  --theme-heading: #0D0D0C;
		  --theme-text: #383633;
		  --theme-muted: #6F6A64;
		  --theme-faded: #817C75;
		  --theme-rule: #D3CDC5;

		  --theme-signal: var(--theme-primary);
		}
		
		/* Temporary legacy aliases.
		Remove once the site no longer uses them. */

		--color-chocolat: var(--color-900);
		--color-orange: var(--color-wild-pulse);
		--color-tumeric: var(--color-300);
		--color-ivory: var(--color-inner-glow);
		--color-light-ivory: var(--color-100);
		--color-dark-ivory: var(--color-200);


		/* ----------------------------------------------------------
		Spacing
		---------------------------------------------------------- */

		--space-0: 0.4vw;
		--space-1: 1vw;
		--space-2: 1.4vw;
		--space-3: 2vw;
		--space-4: 2.35vw;
		--space-5: 2.81vw;
		--space-6: 3.3vw;
		--space-7: 5.1vw;

		--space-section: 6vw;
		--space-header: 6vw;
		--space-title: 1.5vw;


		/* ----------------------------------------------------------
		Gaps
		---------------------------------------------------------- */

		--gap-sm: 0.5vw;
		--gap-i: 1vw;
		--gap-ii: 1.5vw;
		--gap-iii: 2vw;


		/* ----------------------------------------------------------
		Radius
		---------------------------------------------------------- */

		--radius-i: 0.5vw;
		--radius-ii: 0.8vw;
		--radius-iii: 1vw;
		--radius-iv: 1.6vw;
		--radius-v: 2.15vw;
		--radius-vi: 0.3vw;


		/* ----------------------------------------------------------
		Buttons
		---------------------------------------------------------- */

		--button-size-sm: 1.1vw;
		--button-size-md: 1.3vw;
		--button-size: 1.1vw;


		/* ----------------------------------------------------------
		Icons
		---------------------------------------------------------- */

		--icon-size-2xs: 0.8vw;
		--icon-size-xs: 1vw;
		--icon-size-sm: 1.2vw;
		--icon-size-md: 1.4vw;
		--icon-size-lg: 2vw;
		--icon-size-xl: 3vw;


		/* ----------------------------------------------------------
		Motion
		---------------------------------------------------------- */

		--motion-fast: 0.25s;
		--motion-normal: 0.45s;
		--motion-slow: 0.65s;

		--ease-standard: cubic-bezier(.4, 0, .2, 1);
		--ease-premium: cubic-bezier(.22, 1, .36, 1);
		--ease-panel: cubic-bezier(.76, 0, .24, 1);
		--ease-emphasis: cubic-bezier(.34, 1.56, .64, 1);
	}


/* ==========================================================
	02. DOCUMENT
	========================================================== */

	html {
		width: 100%;
		min-height: 100%;
		scroll-behavior: auto;
	}

	body {
	  width: 100%;
	  min-height: 100%;
	  margin: 0;
	  padding: 0;

	  background-color: var(--theme-bg);
	  color: var(--theme-text);

	  font-family: var(--font-body);

	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;

	  transition:
		background-color var(--motion-normal) var(--ease-premium),
		color var(--motion-normal) var(--ease-premium);
	}


/* ==========================================================
	03. BOX MODEL
	========================================================== */

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	  color: var(--theme-heading);
	}

	hr,
	.divider,
	.rule {
	  border-color: var(--theme-rule);
	}

	.signal {
  		color: var(--theme-primary);
	}

	.bg-surface {
	  background-color: var(--theme-surface);
	}

	.text-muted {
	  color: var(--theme-muted);
	}

	.text-faded {
	  color: var(--theme-faded);
	}


/* ==========================================================
	04. GLOBAL ELEMENTS
	========================================================== */

	img,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	figure {
		margin-bottom: 0;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	ul {
		padding-left: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.h1,
	.h2,
	.h3,
	.h4,
	.h5,
	.h6 {
		margin-bottom: 0;
		padding: 0;
	}

	button {
		border: 0;
		background: none;
		cursor: pointer;
	}

	/* ----------------------------------------------------------
	   Selection
	   ---------------------------------------------------------- */

	::selection {
		background-color: var(--theme-primary);
		color: var(--color-ink);
	}

	::-moz-selection {
		background-color: var(--theme-primary);
		color: var(--color-ink);
	}
	/* ----------------------------------------------------------
	   Native interaction colors
	   ---------------------------------------------------------- */

	html {
		accent-color: var(--theme-primary);
	}

	body {
		caret-color: var(--theme-primary);
	}

	a,
	button,
	input,
	textarea,
	select,
	[role="button"] {
		-webkit-tap-highlight-color: color-mix(
			in srgb,
			var(--theme-primary) 20%,
			transparent
		);
	}

	input,
	textarea {
		caret-color: var(--theme-primary);
	}

	input::selection,
	textarea::selection {
		background-color: var(--theme-primary);
		color: var(--color-ink);
	}

	input::-moz-selection,
	textarea::-moz-selection {
		background-color: var(--theme-primary);
		color: var(--color-ink);
	}
/* ==========================================================
	05. LENIS
	========================================================== */

	html.lenis,
	html.lenis body {
		height: auto;
	}

	.lenis.lenis-smooth {
		scroll-behavior: auto !important;
	}

	.lenis.lenis-smooth [data-lenis-prevent] {
		overscroll-behavior: contain;
	}

	.lenis.lenis-stopped {
		overflow: hidden;
	}

	.lenis.lenis-smooth iframe {
		pointer-events: none;
	}


/* ==========================================================
	06. BARBA
	========================================================== */

	[data-barba="container"] {
		width: 100%;
	}

/* ==========================================================
   07. TYPOGRAPHY SYSTEM
   ========================================================== */


	/* ----------------------------------------------------------
	   Headings
	   ---------------------------------------------------------- */

	.he-xxl,
	.he-xxl *,
	.he-xl,
	.he-xl *,
	.he-l,
	.he-l *,
	.he-m,
	.he-m *,
	.he-s,
	.he-s *,
	.he-xs,
	.he-xs *,
	.he-xxs,
	.he-xxs * {
		font-family: var(--font-heading);
		line-height: var(--lh-tight);
		letter-spacing: 0;
	}



	/* ----------------------------------------------------------
	   Body
	   ---------------------------------------------------------- */

	.bo-xxl,
	.bo-xxl *,
	.bo-xl,
	.bo-xl *,
	.bo-l,
	.bo-l *,
	.bo-m,
	.bo-m *,
	.bo-s,
	.bo-s *,
	.bo-xs,
	.bo-xs *,
	.bo-xxs,
	.bo-xxs *,
	.bo-xxxs,
	.bo-xxxs * {
		font-family: var(--font-body);
		line-height: var(--lh-loose);
	}


	/* ----------------------------------------------------------
	   Special / Labels
	   ---------------------------------------------------------- */

	.sp-xl,
	.sp-xl *,
	.sp-l,
	.sp-l *,
	.sp-m,
	.sp-m *,
	.sp-s,
	.sp-s *,
	.sp-xs,
	.sp-xs *,
	.sp-xxs,
	.sp-xxs * {
		font-family: var(--font-label);
		line-height: var(--lh-loose);
		letter-spacing: 1px;
	}



	/* ----------------------------------------------------------
	   Numbers / Display
	   ---------------------------------------------------------- */

	.font-heading,
	.font-heading * {
		font-family: var(--font-heading);
	}

	.font-display,
	.font-display * {
		font-family: var(--font-display);
	}

	.font-body,
	.font-body * {
		font-family: var(--font-body);
	}

	.font-label,
	.font-label * {
		font-family: var(--font-label);
	}

/* ==========================================================
	08. LINKS
	========================================================== */

	.link-i,
	.link-ii,
	.link-iii {
		font-family: var(--font-body);
		position: relative;
		display: inline-flex;
		align-items: center;
		width: max-content;
		color: var(--color-ink);

		cursor: pointer;
	}

	.link-i::after,
	.link-ii::after,
	.link-iii::after {
		content: "";

		position: absolute;
		left: 0;
		bottom: -0.2em;

		width: 100%;
		height: 1px;

		background-color: var(--theme-primary);

		transform: scaleX(0);
		transform-origin: right center;

		transition:
			transform var(--motion-normal) var(--ease-premium);
	}

	.link-i:hover::after,
	.link-ii:hover::after,
	.link-iii:hover::after {
		transform: scaleX(1);
		transform-origin: left center;
	}

	.link-i i.fa-arrow-right,
	.link-ii i.fa-arrow-right,
	.link-iii i.fa-arrow-right {
		color:var(--theme-primary);
		transform: rotate(-45deg);
		transition: transform 0.24s var(--ease-premium);
	}
	.link-i:hover i.fa-arrow-right,
	.link-ii:hover i.fa-arrow-right,
	.link-iii:hover i.fa-arrow-right {
		transform: rotate(0);
	}
	/* Full clickable overlay */

	.linkhide-i {
		position: absolute;
		inset: 0;

		width: 100%;
		height: 100%;

		z-index: 1;
	}


/* ==========================================================
	09. BUTTONS
	========================================================== */

	.btn-i,
	.btn-ii,
	.btn-iii {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: max-content;
		font-family: var(--font-body);
		line-height: 1.4;
		text-align: center;
		cursor: pointer;
		will-change: transform;
		transition:
			transform var(--motion-normal) var(--ease-premium),
			background-color var(--motion-normal) var(--ease-premium),
			color var(--motion-normal) var(--ease-premium),
			border-color var(--motion-normal) var(--ease-premium);
	}

	.btn-i *,
	.btn-ii *,
	.btn-iii * {
		font-family: inherit;
	}

	.btn-i .btn-icon,
	.btn-ii .btn-icon,
	.btn-iii .btn-icon {
		position: relative;
		margin-left: calc(var(--gap-i) / 2);
		transition:
			transform var(--motion-normal) var(--ease-premium),
			opacity var(--motion-normal) var(--ease-premium);
	}


	.fw-thin,
	.fw-thin>*{
		font-weight:100;
	}
	.fw-extralight,
	.fw-extralight>*{
		font-weight:200;
	}
	.fw-light,
	.fw-light>*{
		font-weight:300;
	}
	.fw-regular,
	.fw-regular>*{
		font-weight:400;
	}
	.fw-medium,
	.fw-medium>*{
		font-weight:500;
	}
	.fw-semibold,
	.fw-semibold>*{
		font-weight:600;
	}
	.fw-bold,
	.fw-bold>*{
		font-weight:700;
	}
	.fw-black,
	.fw-black>*{
		font-weight:800;
	}
	.fw-extrablack,
	.fw-extrablack>*{
		font-weight:900;
	}

/* ==========================================================
   10. LAYOUT UTILITIES
   ========================================================== */
	.w-100 {
		width: 100%;
	}
	.h-100 {
		height: 100%;
	}
	.fullsize {
		width: 100%;
		height: 100%;
	}


	.flex-i {
		display: flex;
		flex-wrap: wrap;
	}

	.flex-row {
		flex-direction: row;
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-start {
		justify-content: flex-start;
	}

	.flex-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.space-between {
		justify-content: space-between;
	}

	.align-start {
		align-items: flex-start;
	}

	.align-center {
		align-items: center;
	}

	.align-end {
		align-items: flex-end;
	}


	/* Text */

	.uppercase,
	.uppercase * {
		text-transform: uppercase;
	}


	/* Emoji */

	.emojis {
		font-family:
			-apple-system,
			BlinkMacSystemFont,
			"Segoe UI",
			"Apple Color Emoji",
			"Segoe UI Emoji",
			"Noto Color Emoji",
			sans-serif;
	}



/* ==========================================================
   12. SPACING UTILITIES
   ========================================================== */

	.space-0 {
		padding-block: var(--space-0);
	}

	.space-1 {
		padding-block: var(--space-1);
	}

	.space-2 {
		padding-block: var(--space-2);
	}

	.space-3 {
		padding-block: var(--space-3);
	}

	.space-4 {
		padding-block: var(--space-4);
	}

	.space-5 {
		padding-block: var(--space-5);
	}

	.space-6 {
		padding-block: var(--space-6);
	}

	.space-7 {
		padding-block: var(--space-7);
	}

	.space-section {
		padding-block: var(--space-section);
	}





/* ==========================================================
   13. RESPONSIVE SYSTEM
   ========================================================== */


/* ==========================================================
   XXL — 1600px ↑
   ========================================================== */
@media (min-width: 1600px) {

	:root {
		--gap-sm: 0.4vw;
		--gap-i: 0.8vw;
		--gap-ii: 1.2vw;
		--gap-iii: 1.6vw;

		--radius-i: 0.4vw;
		--radius-ii: 0.65vw;
		--radius-iii: 0.8vw;
		--radius-iv: 1.3vw;
		--radius-v: 1.75vw;
		--radius-vi: 0.25vw;

		--button-size-sm: 0.9vw;
		--button-size-md: 1.05vw;
		--button-size: 0.9vw;

		--icon-size-2xs: 0.65vw;
		--icon-size-xs: 0.8vw;
		--icon-size-sm: 1vw;
		--icon-size-md: 1.15vw;
		--icon-size-lg: 1.6vw;
		--icon-size-xl: 2.4vw;

		--space-0: 0.3vw;
		--space-1: 0.8vw;
		--space-2: 1.1vw;
		--space-3: 1.6vw;
		--space-4: 1.9vw;
		--space-5: 2.25vw;
		--space-6: 2.65vw;
		--space-7: 4.1vw;

		--space-section: 4.8vw;
		--space-header: 4.8vw;
		--space-title: 1.2vw;
	}
	.he-xxl,
	.he-xxl * {
		font-size: 5vw;
	}

	.he-xl,
	.he-xl * {
		font-size: 4.4vw;
	}

	.he-l,
	.he-l * {
		font-size: 3.7vw;
	}

	.he-m,
	.he-m * {
		font-size: 2.5vw;
	}

	.he-s,
	.he-s * {
		font-size: 1.55vw;
	}

	.he-xs,
	.he-xs * {
		font-size: 1.35vw;
	}

	.he-xxs,
	.he-xxs * {
		font-size: 1.15vw;
	}

	.bo-xxl,
	.bo-xxl * {
		font-size: 1.7vw;
	}

	.bo-xl,
	.bo-xl * {
		font-size: 1.25vw;
	}

	.bo-l,
	.bo-l * {
		font-size: 0.95vw;
	}

	.bo-m,
	.bo-m * {
		font-size: 0.85vw;
	}

	.bo-s,
	.bo-s * {
		font-size: 0.75vw;
	}

	.bo-xs,
	.bo-xs * {
		font-size: 0.65vw;
	}

	.bo-xxs,
	.bo-xxs * {
		font-size: 0.6vw;
	}

	.bo-xxxs,
	.bo-xxxs * {
		font-size: 0.5vw;
	}

	.sp-xl,
	.sp-xl * {
		font-size: 1.05vw;
	}

	.sp-l,
	.sp-l * {
		font-size: 0.9vw;
	}

	.sp-m,
	.sp-m * {
		font-size: 0.8vw;
	}

	.sp-s,
	.sp-s * {
		font-size: 0.7vw;
	}

	.sp-xs,
	.sp-xs * {
		font-size: 0.6vw;
	}

	.sp-xxs,
	.sp-xxs * {
		font-size: 0.5vw;
	}

	.link-i,
	.link-i * {
		font-size: 1vw;
	}

	.link-ii,
	.link-ii * {
		font-size: 0.9vw;
	}

	.link-iii,
	.link-iii * {
		font-size: 0.8vw;
	}

	.btn-i {
		padding: 0.3vw 1.6vw;
	}

	.btn-i,
	.btn-i * {
		font-size: 0.85vw;
	}

	.btn-ii {
		padding: 0.5vw 0.8vw;
		border-radius: var(--radius-vi);
	}

	.btn-ii,
	.btn-ii * {
		font-size: 0.85vw;
	}

	.btn-iii {
		padding: 0.4vw 0.4vw 1.2vw;
		border-radius: var(--radius-vi);
	}

	.btn-iii,
	.btn-iii * {
		font-size: 0.75vw;
	}

}

/* ==========================================================
   XL — 1200px → 1599px
   ========================================================== */

@media (min-width: 1200px) and (max-width: 1599px) {

	:root {
		--gap-sm: 0.5vw;
		--gap-i: 1vw;
		--gap-ii: 1.5vw;
		--gap-iii: 2vw;

		--radius-i: 0.5vw;
		--radius-ii: 0.8vw;
		--radius-iii: 1vw;
		--radius-iv: 1.6vw;
		--radius-v: 2.5vw;
		--radius-vi: 0.3vw;

		--space-0: 0.4vw;
		--space-1: 1vw;
		--space-2: 1.4vw;
		--space-3: 2vw;
		--space-4: 2.35vw;
		--space-5: 2.81vw;
		--space-6: 3.3vw;
		--space-7: 5.1vw;

		--space-section: 6vw;
		--space-header: 6vw;
		--space-title: 1.5vw;
	}

	.container-i-fix {
		width: 90%;
	}

	.container-i {
		width: 96%;
	}

	.container-ii {
		width: 86%;
	}

	.container-iii {
		width: 76%;
	}
	.he-xxl,
	.he-xxl * {
		font-size: 6vw;
	}

	.he-xl,
	.he-xl * {
		font-size: 5.3vw;
	}

	.he-l,
	.he-l * {
		font-size: 4.5vw;
	}

	.he-m,
	.he-m * {
		font-size: 3.5vw;
	}

	.he-s,
	.he-s * {
		font-size: 2.2vw;
	}

	.he-xs,
	.he-xs * {
		font-size: 1.67vw;
	}

	.he-xxs,
	.he-xxs * {
		font-size: 1.4vw;
	}

	.bo-xxl,
	.bo-xxl * {
		font-size: 2.1vw;
	}

	.bo-xl,
	.bo-xl * {
		font-size: 1.7vw;
	}

	.bo-l,
	.bo-l * {
		font-size: 1.2vw;
	}

	.bo-m,
	.bo-m * {
		font-size: 1.12vw;
	}

	.bo-s,
	.bo-s * {
		font-size: 1vw;
	}

	.bo-xs,
	.bo-xs * {
		font-size: 0.9vw;
	}

	.bo-xxs,
	.bo-xxs * {
		font-size: 0.8vw;
	}

	.bo-xxxs,
	.bo-xxxs * {
		font-size: 0.7vw;
	}

	.sp-xl,
	.sp-xl * {
		font-size: 1.3vw;
	}

	.sp-l,
	.sp-l * {
		font-size: 1.1vw;
	}

	.sp-m,
	.sp-m * {
		font-size: 0.95vw;
	}

	.sp-s,
	.sp-s * {
		font-size: 0.85vw;
	}

	.sp-xs,
	.sp-xs * {
		font-size: 0.75vw;
	}

	.sp-xxs,
	.sp-xxs * {
		font-size: 0.65vw;
	}

	.link-i,
	.link-i * {
		font-size: 1.2vw;
	}

	.link-ii,
	.link-ii * {
		font-size: 1.1vw;
	}

	.link-iii,
	.link-iii * {
		font-size: 1vw;
	}

	.btn-i {
		padding: 0.4vw 2vw;
	}

	.btn-i,
	.btn-i * {
		font-size: 1vw;
	}

	.btn-ii {
		padding: 0.6vw 1.4vw;
	}

	.btn-ii,
	.btn-ii * {
		font-size: 1vw;
	}

	.btn-iii {
		padding: 0.5vw 0.5vw 1.5vw;
	}

	.btn-iii,
	.btn-iii * {
		font-size: 0.9vw;
	}

	.number-i,
	.number-i * {
		font-size: 5.2vw;
	}
}


/* ==========================================================
   LG — 992px → 1199px
   ========================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

	:root {
		--gap-sm: 0.7vw;
		--gap-i: 1vw;
		--gap-ii: 1.5vw;
		--gap-iii: 2vw;

		--radius-i: 0.5vw;
		--radius-ii: 0.8vw;
		--radius-iii: 1vw;
		--radius-iv: 1.6vw;
		--radius-v: 3.15vw;
		--radius-vi: 0.4vw;

		--space-0: 0.8vw;
		--space-1: 1.4vw;
		--space-2: 1.8vw;
		--space-3: 2.4vw;
		--space-4: 2.75vw;
		--space-5: 3.21vw;
		--space-6: 3.7vw;
		--space-7: 5.5vw;

		--space-section: 6.4vw;
		--space-header: 5.4vw;
		--space-title: 1.5vw;
	}

	.container-i-fix {
		width: 90%;
	}

	.container-i {
		width: 96%;
	}

	.container-ii {
		width: 86%;
	}

	.container-iii {
		width: 76%;
	}
	.he-xxl,
	.he-xxl * {
		font-size: 6vw;
	}

	.he-xl,
	.he-xl * {
		font-size: 5.3vw;
	}

	.he-l,
	.he-l * {
		font-size: 4.5vw;
	}

	.he-m,
	.he-m * {
		font-size: 3.5vw;
	}

	.he-s,
	.he-s * {
		font-size: 2.2vw;
	}

	.he-xs,
	.he-xs * {
		font-size: 1.67vw;
	}

	.he-xxs,
	.he-xxs * {
		font-size: 1.45vw;
	}

	.bo-xxl,
	.bo-xxl * {
		font-size: 2.1vw;
	}

	.bo-xl,
	.bo-xl * {
		font-size: 1.7vw;
	}

	.bo-l,
	.bo-l * {
		font-size: 1.4vw;
	}

	.bo-m,
	.bo-m * {
		font-size: 1.2vw;
	}

	.bo-s,
	.bo-s * {
		font-size: 1.1vw;
	}

	.bo-xs,
	.bo-xs * {
		font-size: 1vw;
	}

	.bo-xxs,
	.bo-xxs * {
		font-size: 0.9vw;
	}

	.bo-xxxs,
	.bo-xxxs * {
		font-size: 0.8vw;
	}

	.sp-xl,
	.sp-xl * {
		font-size: 1.3vw;
	}

	.sp-l,
	.sp-l * {
		font-size: 1.1vw;
	}

	.sp-m,
	.sp-m * {
		font-size: 0.95vw;
	}

	.sp-s,
	.sp-s * {
		font-size: 0.85vw;
	}

	.sp-xs,
	.sp-xs * {
		font-size: 0.75vw;
	}

	.sp-xxs,
	.sp-xxs * {
		font-size: 0.65vw;
	}

	.link-i,
	.link-i * {
		font-size: 1.2vw;
	}

	.link-ii,
	.link-ii * {
		font-size: 1.1vw;
	}

	.link-iii,
	.link-iii * {
		font-size: 1vw;
	}

	.btn-i {
		padding: 0.4vw 2vw;
	}

	.btn-i,
	.btn-i * {
		font-size: 1.5vw;
	}

	.btn-ii {
		padding: 0.6vw 1.4vw;
	}

	.btn-ii,
	.btn-ii * {
		font-size: 1vw;
	}

	.btn-iii {
		padding: 0.5vw 0.5vw 1.5vw;
	}

	.btn-iii,
	.btn-iii * {
		font-size: 1.4vw;
	}

	.number-i,
	.number-i * {
		font-size: 5.2vw;
	}
}


/* ==========================================================
   MD — 768px → 991px
   ========================================================== */

@media (min-width: 768px) and (max-width: 991px) {

	:root {
		--gap-sm: 0.8vw;
		--gap-i: 1.35vw;
		--gap-ii: 2vw;
		--gap-iii: 2.7vw;

		--radius-i: 0.7vw;
		--radius-ii: 1.1vw;
		--radius-iii: 1.35vw;
		--radius-iv: 2.15vw;
		--radius-v: 3.15vw;
		--radius-vi: 0.75vw;

		--space-0: 0.8vw;
		--space-1: 1.4vw;
		--space-2: 1.8vw;
		--space-3: 2.4vw;
		--space-4: 2.75vw;
		--space-5: 3.21vw;
		--space-6: 3.7vw;
		--space-7: 5.5vw;

		--space-section: 6.4vw;
		--space-header: 5.4vw;
		--space-title: 1.5vw;
	}

	.container-i-fix {
		width: 90%;
	}

	.container-i {
		width: 90%;
	}

	.container-ii {
		width: 78%;
	}

	.container-iii {
		width: 78%;
	}
	.he-xxl,
	.he-xxl * {
		font-size: 7.8vw;
	}

	.he-xl,
	.he-xl * {
		font-size: 7.2vw;
	}

	.he-l,
	.he-l * {
		font-size: 6vw;
	}

	.he-m,
	.he-m * {
		font-size: 4.75vw;
	}

	.he-s,
	.he-s * {
		font-size: 3vw;
	}

	.he-xs,
	.he-xs * {
		font-size: 2.55vw;
	}

	.he-xxs,
	.he-xxs * {
		font-size: 2.2vw;
	}

	.bo-xxl,
	.bo-xxl * {
		font-size: 4.2vw;
	}

	.bo-xl,
	.bo-xl * {
		font-size: 3vw;
	}

	.bo-l,
	.bo-l * {
		font-size: 2.45vw;
	}

	.bo-m,
	.bo-m * {
		font-size: 1.8vw;
	}

	.bo-s,
	.bo-s * {
		font-size: 1.4vw;
	}

	.bo-xs,
	.bo-xs * {
		font-size: 1.2vw;
	}

	.bo-xxs,
	.bo-xxs * {
		font-size: 1.05vw;
	}

	.bo-xxxs,
	.bo-xxxs * {
		font-size: 0.9vw;
	}

	.sp-xl,
	.sp-xl * {
		font-size: 2.3vw;
	}

	.sp-l,
	.sp-l * {
		font-size: 2vw;
	}

	.sp-m,
	.sp-m * {
		font-size: 1.5vw;
	}

	.sp-s,
	.sp-s * {
		font-size: 1.4vw;
	}

	.sp-xs,
	.sp-xs * {
		font-size: 1.3vw;
	}

	.sp-xxs,
	.sp-xxs * {
		font-size: 1.2vw;
	}

	.link-i,
	.link-i * {
		font-size: 1.6vw;
	}

	.link-ii,
	.link-ii * {
		font-size: 1.5vw;
	}

	.link-iii,
	.link-iii * {
		font-size: 1.35vw;
	}

	.btn-i,
	.btn-ii {
		padding: 0.8vw 1.9vw;
	}

	.btn-i,
	.btn-i *,
	.btn-ii,
	.btn-ii *,
	.btn-iii,
	.btn-iii * {
		font-size: 1.5vw;
	}

	.btn-iii {
		padding: 0.65vw 1.35vw 2vw;
	}

	.number-i,
	.number-i * {
		font-size: 7vw;
	}
}


/* ==========================================================
   SM — 576px → 767px
   ========================================================== */

@media (min-width: 576px) and (max-width: 767px) {

	:root {
		--gap-sm: 1.2vw;
		--gap-i: 1.8vw;
		--gap-ii: 2.7vw;
		--gap-iii: 3.6vw;

		--radius-i: 0.9vw;
		--radius-ii: 1.45vw;
		--radius-iii: 1.8vw;
		--radius-iv: 2.9vw;
		--radius-v: 4.15vw;
		--radius-vi: 0.75vw;

		--space-0: 1.5vw;
		--space-1: 2.1vw;
		--space-2: 2.5vw;
		--space-3: 3.1vw;
		--space-4: 3.45vw;
		--space-5: 3.91vw;
		--space-6: 4.4vw;
		--space-7: 6.2vw;

		--space-section: 7.1vw;
		--space-header: 6.1vw;
		--space-title: 1.5vw;
	}

	.container-i-fix {
		width: 90%;
	}

	.container-i {
		width: 90%;
	}

	.container-ii,
	.container-iii {
		width: 84%;
	}
	.he-xxl,
	.he-xxl * {
		font-size: 13.3vw;
	}

	.he-xl,
	.he-xl * {
		font-size: 11vw;
	}

	.he-l,
	.he-l * {
		font-size: 9.9vw;
	}

	.he-m,
	.he-m * {
		font-size: 9vw;
	}

	.he-s,
	.he-s * {
		font-size: 7vw;
		line-height: 1.2;
	}

	.he-xs,
	.he-xs * {
		font-size: 6vw;
	}

	.he-xxs,
	.he-xxs * {
		font-size: 5vw;
	}

	.bo-xxl,
	.bo-xxl * {
		font-size: 7.4vw;
	}

	.bo-xl,
	.bo-xl * {
		font-size: 5.2vw;
	}

	.bo-l,
	.bo-l * {
		font-size: 5vw;
	}

	.bo-m,
	.bo-m * {
		font-size: 4vw;
	}

	.bo-s,
	.bo-s * {
		font-size: 3vw;
	}

	.bo-xs,
	.bo-xs * {
		font-size: 2.5vw;
	}

	.bo-xxs,
	.bo-xxs * {
		font-size: 2.2vw;
	}

	.bo-xxxs,
	.bo-xxxs * {
		font-size: 1.9vw;
	}

	.sp-xl,
	.sp-xl * {
		font-size: 3.8vw;
	}

	.sp-l,
	.sp-l * {
		font-size: 3.4vw;
	}

	.sp-m,
	.sp-m * {
		font-size: 3vw;
	}

	.sp-s,
	.sp-s * {
		font-size: 2.7vw;
	}

	.sp-xs,
	.sp-xs * {
		font-size: 2.4vw;
	}

	.sp-xxs,
	.sp-xxs * {
		font-size: 2.1vw;
	}

	.link-i,
	.link-i * {
		font-size: 2.15vw;
	}

	.link-ii,
	.link-ii * {
		font-size: 2vw;
	}

	.link-iii,
	.link-iii * {
		font-size: 1.8vw;
	}

	.btn-i,
	.btn-ii {
		padding: 1.1vw 2.5vw;
	}

	.btn-i,
	.btn-i * {
		font-size: 3.3vw;
	}

	.btn-ii,
	.btn-ii *,
	.btn-iii,
	.btn-iii * {
		font-size: 3vw;
	}

	.btn-iii {
		padding: 0.9vw 1.8vw 2.7vw;
	}

	.number-i,
	.number-i * {
		font-size: 9.35vw;
	}
}


/* ==========================================================
   XS — 340px → 575px
   ========================================================== */

@media (min-width: 340px) and (max-width: 575px) {

	:root {
		--gap-sm: 1.8vw;
		--gap-i: 2.6vw;
		--gap-ii: 3.9vw;
		--gap-iii: 5.2vw;

		--radius-i: 1.3vw;
		--radius-ii: 2.1vw;
		--radius-iii: 2.6vw;
		--radius-iv: 4.15vw;
		--radius-v: 4.15vw;
		--radius-vi: 0.75vw;

		--space-0: 0.8vw;
		--space-1: 2vw;
		--space-2: 2.8vw;
		--space-3: 4vw;
		--space-4: 4.7vw;
		--space-5: 5.42vw;
		--space-6: 6.6vw;
		--space-7: 10.2vw;

		--space-section: 6vw;
		--space-header: 5vw;
		--space-title: 1.5vw;
	}

	.container-i-fix,
	.container-i,
	.container-ii,
	.container-iii {
		width: 90%;
	}
	.he-xxl,
	.he-xxl * {
		font-size: 14.6vw;
	}

	.he-xl,
	.he-xl * {
		font-size: 13.74vw;
	}

	.he-l,
	.he-l * {
		font-size: 11.1vw;
	}

	.he-m,
	.he-m * {
		font-size: 9.07vw;
	}

	.he-s,
	.he-s * {
		font-size: 7.7vw;
	}

	.he-xs,
	.he-xs * {
		font-size: 6vw;
	}

	.he-xxs,
	.he-xxs * {
		font-size: 5.2vw;
	}

	.bo-xxl,
	.bo-xxl * {
		font-size: 7.7vw;
	}

	.bo-xl,
	.bo-xl * {
		font-size: 5.5vw;
	}

	.bo-l,
	.bo-l * {
		font-size: 4.8vw;
	}

	.bo-m,
	.bo-m * {
		font-size: 4vw;
	}

	.bo-s,
	.bo-s * {
		font-size: 3.6vw;
	}

	.bo-xs,
	.bo-xs * {
		font-size: 3.3vw;
	}

	.bo-xxs,
	.bo-xxs * {
		font-size: 3vw;
	}

	.bo-xxxs,
	.bo-xxxs * {
		font-size: 2.8vw;
	}

	.sp-xl,
	.sp-xl * {
		font-size: 4vw;
	}

	.sp-l,
	.sp-l * {
		font-size: 3.5vw;
	}

	.sp-m,
	.sp-m * {
		font-size: 3.2vw;
	}

	.sp-s,
	.sp-s * {
		font-size: 2.9vw;
	}

	.sp-xs,
	.sp-xs * {
		font-size: 2.6vw;
	}

	.sp-xxs,
	.sp-xxs * {
		font-size: 2.3vw;
	}

	.link-i,
	.link-i * {
		font-size: 3.1vw;
	}

	.link-ii,
	.link-ii * {
		font-size: 2.85vw;
	}

	.link-iii,
	.link-iii * {
		font-size: 2.6vw;
	}

	.btn-i,
	.btn-ii {
		padding: 1.55vw 3.63vw;
	}

	.btn-i,
	.btn-i * {
		font-size: 3.3vw;
	}

	.btn-ii,
	.btn-ii * {
		font-size: 4.1vw;
	}

	.btn-iii {
		padding: 1.3vw 2.6vw 3.9vw;
	}

	.btn-iii,
	.btn-iii * {
		font-size: 2.33vw;
	}

	.number-i,
	.number-i * {
		font-size: 13.48vw;
	}
}


/* ==========================================================
   XXS — 339px ↓
   ========================================================== */

@media (max-width: 339px) {

	:root {
		--gap-sm: 2vw;
		--gap-i: 3vw;
		--gap-ii: 4.5vw;
		--gap-iii: 6vw;

		--radius-i: 1.5vw;
		--radius-ii: 2.4vw;
		--radius-iii: 3vw;
		--radius-iv: 4.8vw;
		--radius-v: 4.15vw;
		--radius-vi: 0.9vw;

		--space-0: 0.8vw;
		--space-1: 2vw;
		--space-2: 2.8vw;
		--space-3: 4vw;
		--space-4: 4.7vw;
		--space-5: 5.42vw;
		--space-6: 6.6vw;
		--space-7: 10.2vw;

		--space-section: 6vw;
		--space-header: 5vw;
		--space-title: 1.5vw;
	}

	.container-i-fix,
	.container-i {
		width: 90%;
	}

	.container-ii,
	.container-iii {
		width: 92%;
	}
	.he-xxl,
	.he-xxl * {
		font-size: 16.7vw;
	}

	.he-xl,
	.he-xl * {
		font-size: 15.9vw;
	}

	.he-l,
	.he-l * {
		font-size: 12.8vw;
	}

	.he-m,
	.he-m * {
		font-size: 10.5vw;
	}

	.he-s,
	.he-s * {
		font-size: 7.7vw;
	}

	.he-xs,
	.he-xs * {
		font-size: 5vw;
	}

	.he-xxs,
	.he-xxs * {
		font-size: 4.5vw;
	}

	.bo-xxl,
	.bo-xxl * {
		font-size: 7.7vw;
	}

	.bo-xl,
	.bo-xl * {
		font-size: 6.5vw;
	}

	.bo-l,
	.bo-l * {
		font-size: 6.1vw;
	}

	.bo-m,
	.bo-m * {
		font-size: 4.95vw;
	}

	.bo-s,
	.bo-s * {
		font-size: 4.2vw;
	}

	.bo-xs,
	.bo-xs * {
		font-size: 3.5vw;
	}

	.bo-xxs,
	.bo-xxs * {
		font-size: 3.1vw;
	}

	.bo-xxxs,
	.bo-xxxs * {
		font-size: 2.8vw;
	}

	.sp-xl,
	.sp-xl * {
		font-size: 4vw;
	}

	.sp-l,
	.sp-l * {
		font-size: 3.5vw;
	}

	.sp-m,
	.sp-m * {
		font-size: 3.1vw;
	}

	.sp-s,
	.sp-s * {
		font-size: 2.8vw;
	}

	.sp-xs,
	.sp-xs * {
		font-size: 2.5vw;
	}

	.sp-xxs,
	.sp-xxs * {
		font-size: 2.2vw;
	}

	.link-i,
	.link-i * {
		font-size: 3.6vw;
	}

	.link-ii,
	.link-ii * {
		font-size: 3.3vw;
	}

	.link-iii,
	.link-iii * {
		font-size: 3vw;
	}

	.btn-i,
	.btn-ii {
		padding: 1.8vw 4.2vw;
	}

	.btn-i,
	.btn-i * {
		font-size: 3vw;
	}

	.btn-ii,
	.btn-ii * {
		font-size: 4vw;
	}

	.btn-iii {
		padding: 1.5vw 3vw 4.5vw;
	}

	.btn-iii,
	.btn-iii * {
		font-size: 2.7vw;
	}

	.number-i,
	.number-i * {
		font-size: 15.6vw;
	}
}


/* ==========================================================
   14. GAP UTILITIES
   ========================================================== */

.gap-sm {
	gap: var(--gap-sm);
}
.gap-i {
	gap: var(--gap-i);
}
.gap-ii {
	gap: var(--gap-ii);
}
.gap-iii {
	gap: var(--gap-iii);
}

.w-1 { width: 8.333333%; }
.w-2 { width: 16.666667%; }
.w-3 { width: 25%; }
.w-4 { width: 33.333333%; }
.w-5 { width: 41.666667%; }
.w-6 { width: 50%; }
.w-7 { width: 58.333333%; }
.w-8 { width: 66.666667%; }
.w-9 { width: 75%; }
.w-10 { width: 83.333333%; }
.w-11 { width: 91.666667%; }
.w-12 { width: 100%; }
.w-full { width: 100%; }
.w-auto { width: auto; }


@media (min-width: 576px) {
	.w-sm-1 { width: 8.333333%; }
	.w-sm-2 { width: 16.666667%; }
	.w-sm-3 { width: 25%; }
	.w-sm-4 { width: 33.333333%; }
	.w-sm-5 { width: 41.666667%; }
	.w-sm-6 { width: 50%; }
	.w-sm-7 { width: 58.333333%; }
	.w-sm-8 { width: 66.666667%; }
	.w-sm-9 { width: 75%; }
	.w-sm-10 { width: 83.333333%; }
	.w-sm-11 { width: 91.666667%; }
	.w-sm-12 { width: 100%; }
	.w-sm-full { width: 100%; }
	.w-sm-auto { width: auto; }
}


@media (min-width: 768px) {
	.w-md-1 { width: 8.333333%; }
	.w-md-2 { width: 16.666667%; }
	.w-md-3 { width: 25%; }
	.w-md-4 { width: 33.333333%; }
	.w-md-5 { width: 41.666667%; }
	.w-md-6 { width: 50%; }
	.w-md-7 { width: 58.333333%; }
	.w-md-8 { width: 66.666667%; }
	.w-md-9 { width: 75%; }
	.w-md-10 { width: 83.333333%; }
	.w-md-11 { width: 91.666667%; }
	.w-md-12 { width: 100%; }
	.w-md-full { width: 100%; }
	.w-md-auto { width: auto; }
}


@media (min-width: 992px) {
	.w-lg-1 { width: 8.333333%; }
	.w-lg-2 { width: 16.666667%; }
	.w-lg-3 { width: 25%; }
	.w-lg-4 { width: 33.333333%; }
	.w-lg-5 { width: 41.666667%; }
	.w-lg-6 { width: 50%; }
	.w-lg-7 { width: 58.333333%; }
	.w-lg-8 { width: 66.666667%; }
	.w-lg-9 { width: 75%; }
	.w-lg-10 { width: 83.333333%; }
	.w-lg-11 { width: 91.666667%; }
	.w-lg-12 { width: 100%; }
	.w-lg-full { width: 100%; }
	.w-lg-auto { width: auto; }
}

@media (min-width: 1200px) {
	.w-xl-1 { width: 8.333333%; }
	.w-xl-2 { width: 16.666667%; }
	.w-xl-3 { width: 25%; }
	.w-xl-4 { width: 33.333333%; }
	.w-xl-5 { width: 41.666667%; }
	.w-xl-6 { width: 50%; }
	.w-xl-7 { width: 58.333333%; }
	.w-xl-8 { width: 66.666667%; }
	.w-xl-9 { width: 75%; }
	.w-xl-10 { width: 83.333333%; }
	.w-xl-11 { width: 91.666667%; }
	.w-xl-12 { width: 100%; }
	.w-xl-full { width: 100%; }
	.w-xl-auto { width: auto; }
}

.flex-i > .w-1 { width: calc(8.333333% - (var(--gap-i) * 11 / 12)); }
.flex-i > .w-2 { width: calc(16.666667% - (var(--gap-i) * 10 / 12)); }
.flex-i > .w-3 { width: calc(25% - (var(--gap-i) * 9 / 12)); }
.flex-i > .w-4 { width: calc(33.333333% - (var(--gap-i) * 8 / 12)); }
.flex-i > .w-5 { width: calc(41.666667% - (var(--gap-i) * 7 / 12)); }
.flex-i > .w-6 { width: calc(50% - (var(--gap-i) / 2)); }
.flex-i > .w-7 { width: calc(58.333333% - (var(--gap-i) * 5 / 12)); }
.flex-i > .w-8 { width: calc(66.666667% - (var(--gap-i) * 4 / 12)); }
.flex-i > .w-9 { width: calc(75% - (var(--gap-i) * 3 / 12)); }
.flex-i > .w-10 { width: calc(83.333333% - (var(--gap-i) * 2 / 12)); }
.flex-i > .w-11 { width: calc(91.666667% - (var(--gap-i) * 1 / 12)); }
.flex-i > .w-12 { width: calc(100% - 0px); }
.flex-i > .w-full { width: calc(100% - 0px); }

@media (min-width: 576px) {
	.flex-i > .w-sm-1 { width: calc(8.333333% - (var(--gap-i) * 11 / 12)); }
	.flex-i > .w-sm-2 { width: calc(16.666667% - (var(--gap-i) * 10 / 12)); }
	.flex-i > .w-sm-3 { width: calc(25% - (var(--gap-i) * 9 / 12)); }
	.flex-i > .w-sm-4 { width: calc(33.333333% - (var(--gap-i) * 8 / 12)); }
	.flex-i > .w-sm-5 { width: calc(41.666667% - (var(--gap-i) * 7 / 12)); }
	.flex-i > .w-sm-6 { width: calc(50% - (var(--gap-i) / 2)); }
	.flex-i > .w-sm-7 { width: calc(58.333333% - (var(--gap-i) * 5 / 12)); }
	.flex-i > .w-sm-8 { width: calc(66.666667% - (var(--gap-i) * 4 / 12)); }
	.flex-i > .w-sm-9 { width: calc(75% - (var(--gap-i) * 3 / 12)); }
	.flex-i > .w-sm-10 { width: calc(83.333333% - (var(--gap-i) * 2 / 12)); }
	.flex-i > .w-sm-11 { width: calc(91.666667% - (var(--gap-i) * 1 / 12)); }
	.flex-i > .w-sm-12 { width: calc(100% - 0px); }
	.flex-i > .w-sm-full { width: calc(100% - 0px); }
}

@media (min-width: 768px) {
	.flex-i > .w-md-1 { width: calc(8.333333% - (var(--gap-i) * 11 / 12)); }
	.flex-i > .w-md-2 { width: calc(16.666667% - (var(--gap-i) * 10 / 12)); }
	.flex-i > .w-md-3 { width: calc(25% - (var(--gap-i) * 9 / 12)); }
	.flex-i > .w-md-4 { width: calc(33.333333% - (var(--gap-i) * 8 / 12)); }
	.flex-i > .w-md-5 { width: calc(41.666667% - (var(--gap-i) * 7 / 12)); }
	.flex-i > .w-md-6 { width: calc(50% - (var(--gap-i) / 2)); }
	.flex-i > .w-md-7 { width: calc(58.333333% - (var(--gap-i) * 5 / 12)); }
	.flex-i > .w-md-8 { width: calc(66.666667% - (var(--gap-i) * 4 / 12)); }
	.flex-i > .w-md-9 { width: calc(75% - (var(--gap-i) * 3 / 12)); }
	.flex-i > .w-md-10 { width: calc(83.333333% - (var(--gap-i) * 2 / 12)); }
	.flex-i > .w-md-11 { width: calc(91.666667% - (var(--gap-i) * 1 / 12)); }
	.flex-i > .w-md-12 { width: calc(100% - 0px); }
	.flex-i > .w-md-full { width: calc(100% - 0px); }
}

@media (min-width: 992px) {
	.flex-i > .w-lg-1 { width: calc(8.333333% - (var(--gap-i) * 11 / 12)); }
	.flex-i > .w-lg-2 { width: calc(16.666667% - (var(--gap-i) * 10 / 12)); }
	.flex-i > .w-lg-3 { width: calc(25% - (var(--gap-i) * 9 / 12)); }
	.flex-i > .w-lg-4 { width: calc(33.333333% - (var(--gap-i) * 8 / 12)); }
	.flex-i > .w-lg-5 { width: calc(41.666667% - (var(--gap-i) * 7 / 12)); }
	.flex-i > .w-lg-6 { width: calc(50% - (var(--gap-i) / 2)); }
	.flex-i > .w-lg-7 { width: calc(58.333333% - (var(--gap-i) * 5 / 12)); }
	.flex-i > .w-lg-8 { width: calc(66.666667% - (var(--gap-i) * 4 / 12)); }
	.flex-i > .w-lg-9 { width: calc(75% - (var(--gap-i) * 3 / 12)); }
	.flex-i > .w-lg-10 { width: calc(83.333333% - (var(--gap-i) * 2 / 12)); }
	.flex-i > .w-lg-11 { width: calc(91.666667% - (var(--gap-i) * 1 / 12)); }
	.flex-i > .w-lg-12 { width: calc(100% - 0px); }
	.flex-i > .w-lg-full { width: calc(100% - 0px); }
}

@media (min-width: 1200px) {
	.flex-i > .w-xl-1 { width: calc(8.333333% - (var(--gap-i) * 11 / 12)); }
	.flex-i > .w-xl-2 { width: calc(16.666667% - (var(--gap-i) * 10 / 12)); }
	.flex-i > .w-xl-3 { width: calc(25% - (var(--gap-i) * 9 / 12)); }
	.flex-i > .w-xl-4 { width: calc(33.333333% - (var(--gap-i) * 8 / 12)); }
	.flex-i > .w-xl-5 { width: calc(41.666667% - (var(--gap-i) * 7 / 12)); }
	.flex-i > .w-xl-6 { width: calc(50% - (var(--gap-i) / 2)); }
	.flex-i > .w-xl-7 { width: calc(58.333333% - (var(--gap-i) * 5 / 12)); }
	.flex-i > .w-xl-8 { width: calc(66.666667% - (var(--gap-i) * 4 / 12)); }
	.flex-i > .w-xl-9 { width: calc(75% - (var(--gap-i) * 3 / 12)); }
	.flex-i > .w-xl-10 { width: calc(83.333333% - (var(--gap-i) * 2 / 12)); }
	.flex-i > .w-xl-11 { width: calc(91.666667% - (var(--gap-i) * 1 / 12)); }
	.flex-i > .w-xl-12 { width: calc(100% - 0px); }
	.flex-i > .w-xl-full { width: calc(100% - 0px); }
}