.html-block {
  all:revert;
  padding-block: var(--section-padding-block);
}

html {
  font-family: var(--font-text);
  font-size: var(--font-size);
  font-weight: var(--text-default);
  color: var(--shade-text);
  line-height: var(--line-height-md);
}

/* Sections pages internes v1 */

.ac-doubleColonne,
.ac-include .html-block {
  padding-block: calc(var(--section-padding-block) / 2);
}

/* ================ */
/* === SPACINGS === */
/* ================ */

:root {
  --spacing-base: 4px;
  --spacing0: calc(var(--spacing-base) * 0); /* 0px */
  --spacing0-5: calc(var(--spacing-base) * .5); /* 2px */
  --spacing1: calc(var(--spacing-base) * 1); /* 4px */
  --spacing1-5: calc(var(--spacing-base) * 1.5); /* 6px */
  --spacing2: calc(var(--spacing-base) * 2); /* 8px */
  --spacing2-5: calc(var(--spacing-base) * 2.5); /* 10px */
  --spacing3: calc(var(--spacing-base) * 3); /* 12px */
  --spacing3-5: calc(var(--spacing-base) * 3.5); /* 14px */
  --spacing4: calc(var(--spacing-base) * 4); /* 16px */
  --spacing4-5: calc(var(--spacing-base) * 4.5); /* 18px */
  --spacing5: calc(var(--spacing-base) * 5); /* 20px */
  --spacing6: calc(var(--spacing-base) * 6); /* 24px */
  --spacing7: calc(var(--spacing-base) * 7); /* 28px */
  --spacing8: calc(var(--spacing-base) * 8); /* 32px */
  --spacing10: calc(var(--spacing-base) * 10); /* 40px */
  --spacing12: calc(var(--spacing-base) * 12); /* 48px */
  --spacing14: calc(var(--spacing-base) * 14); /* 56px */
  --spacing16: calc(var(--spacing-base) * 16); /* 64px */
  --spacing20: calc(var(--spacing-base) * 20); /* 80px */
  --spacing24: calc(var(--spacing-base) * 24); /* 96px */
  --spacing30: calc(var(--spacing-base) * 30); /* 120px */
  --spacing32: calc(var(--spacing-base) * 32); /* 128px */
  --spacing40: calc(var(--spacing-base) * 40); /* 160px */
  --spacing48: calc(var(--spacing-base) * 48); /* 192px */
  --spacing56: calc(var(--spacing-base) * 56); /* 224px */
  --spacing64: calc(var(--spacing-base) * 64); /* 256px */

  /* Section */
  --section-gap-sm: var(--spacing4);
  --section-gap-md: var(--spacing6);
  --section-padding-block: var(--spacing10);

  /* Grid */
  --grid-margin: var(--spacing4);
  --grid-gutter: var(--spacing6);

  /* Text gap */
  --paragraph-gap-xs: var(--spacing0);
  --paragraph-gap-sm: var(--spacing2);
  --paragraph-gap-md: var(--spacing3);
  --paragraph-gap-lg: var(--spacing5);
  --text-list-gap-sm: var(--spacing3);
  --text-list-gap-md: var(--spacing4);
  --text-list-gap-lg: var(--spacing5);
  --text-icon-gap-sm: var(--spacing1);
  --text-icon-gap-md: var(--spacing1-5);
  --text-icon-gap-lg: var(--spacing2);

  /* Button */
  --button-sm-padding-block: var(--spacing1-5);
  --button-sm-padding-inline: var(--spacing3);
  --button-sm-gap: var(--spacing1);
  --button-md-padding-block: var(--spacing2-5);
  --button-md-padding-inline: var(--spacing4-5);
  --button-md-gap: var(--spacing1-5);
  --button-lg-padding-block: var(--spacing3);
  --button-lg-padding-inline: var(--spacing6);
  --button-lg-gap: var(--spacing2);
  --button-icon-font-size-base: calc(var(--text-md) * 1.5);

  /* Tag - Badge */
  --tag-sm-padding-block: var(--spacing1);
  --tag-sm-padding-inline: var(--spacing2);
  --tag-sm-gap: var(--spacing0-5); 
  --tag-md-padding-block: var(--spacing1);
  --tag-md-padding-inline: var(--spacing3);
  --tag-md-gap: var(--spacing1);
  --tag-lg-padding-block: var(--spacing1);
  --tag-lg-padding-inline: var(--spacing4);
  --tag-lg-gap: var(--spacing1-5); 

  /* Header - Footer */
  --header-gap: var(--spacing3);
  --header-padding-topbar: var(--spacing1-5);
  --header-padding: var(--spacing2);
  --footer-gap: var(--spacing3);
  --footer-padding: var(--spacing6); 

  /* Card */  
  --card-gap: var(--spacing5);
  --card-icon-size: var(--spacing8);

  /* Component */
  --component-padding-sm: var(--spacing3);  
  --component-padding-md: var(--spacing5);
  --component-padding-lg: var(--spacing6);
  --component-padding-xl: var(--spacing12);    

  /* Form gap */
  --form-gap-sm: var(--spacing3);
  --form-gap-md: var(--spacing4);

  /* contact infos list */
  --contact-infos-list-gap: var(--spacing3);
}

@media screen and (992px <= width) {
  :root {
    /* Section */
    --section-gap-sm: var(--spacing8);
    --section-gap-md: var(--spacing12);
    --section-padding-block: var(--spacing30);
    /* Header - Footer */
    --header-gap: var(--spacing6);
    --header-padding: var(--spacing2);    
  }  
}

.spacings-sm {
  /* Section */
  --section-gap-sm: var(--spacing3);
  --section-gap-md: var(--spacing5);
  --section-padding-block: var(--spacing8);

  /* Grid */
  --grid-margin: var(--spacing4);
  --grid-gutter: var(--spacing6);

  /* Text gap */
  --paragraph-gap-xs: var(--spacing0);
  --paragraph-gap-sm: var(--spacing1);
  --paragraph-gap-md: var(--spacing2);
  --paragraph-gap-lg: var(--spacing4);
  --text-list-gap-sm: var(--spacing2);
  --text-list-gap-md: var(--spacing3);
  --text-list-gap-lg: var(--spacing4);
  --text-icon-gap-sm: var(--spacing0-5);
  --text-icon-gap-md: var(--spacing1);
  --text-icon-gap-lg: var(--spacing1-5);

  /* Button */
  --button-sm-padding-block: var(--spacing1-5);
  --button-sm-padding-inline: var(--spacing3);
  --button-sm-gap: var(--spacing1);
  --button-md-padding-block: var(--spacing2);
  --button-md-padding-inline: var(--spacing4);
  --button-md-gap: var(--spacing1-5);
  --button-lg-padding-block: var(--spacing2-5);
  --button-lg-padding-inline: var(--spacing5);
  --button-lg-gap: var(--spacing2);

  /* Tag - Badge */
  --tag-sm-padding-block: var(--spacing0-5);
  --tag-sm-padding-inline: var(--spacing1-5);
  --tag-sm-gap: var(--spacing0-5);
  --tag-md-padding-block: var(--spacing0-5);
  --tag-md-padding-inline: var(--spacing2-5);
  --tag-md-gap: var(--spacing1);
  --tag-lg-padding-block: var(--spacing0-5);
  --tag-lg-padding-inline: var(--spacing3);  
  --tag-lg-gap: var(--spacing1-5);

  /* Header - Footer */
  --header-gap: var(--spacing2);
  --header-padding-topbar: var(--spacing1-5);
  --header-padding: var(--spacing2);
  --footer-gap: var(--spacing4);
  --footer-padding: var(--spacing5); 
 
  /* Card */  
  --card-gap: var(--spacing4);
  --card-icon-size: var(--spacing6);

  /* Component */
  --component-padding-sm: var(--spacing2);  
  --component-padding-md: var(--spacing4);
  --component-padding-lg: var(--spacing6);
  --component-padding-xl: var(--spacing10);    

  /* Form gap */
  --form-gap-sm: var(--spacing2);
  --form-gap-md: var(--spacing3);
}

@media screen and (992px <= width) {
  .spacings-sm {
    /* Section */
    --section-gap-sm: var(--spacing6);
    --section-gap-md: var(--spacing10);
    --section-padding-block: var(--spacing20);
    /* Header - Footer */
    --header-gap: var(--spacing4);
    --header-padding: var(--spacing2);    
  }  
}

.spacings-lg {
  /* Section */
  --section-gap-sm: var(--spacing5);
  --section-gap-md: var(--spacing7);
  --section-padding-block: var(--spacing12);

  /* Grid */
  --grid-margin: var(--spacing4);
  --grid-gutter: var(--spacing6);

  /* Text gap */
  --paragraph-gap-xs: var(--spacing1);
  --paragraph-gap-sm: var(--spacing3);
  --paragraph-gap-md: var(--spacing4);
  --paragraph-gap-lg: var(--spacing8);
  --text-list-gap-sm: var(--spacing4);
  --text-list-gap-md: var(--spacing5);
  --text-list-gap-lg: var(--spacing6);
  --text-icon-gap-sm: var(--spacing1-5);
  --text-icon-gap-md: var(--spacing2);
  --text-icon-gap-lg: var(--spacing3);

  /* Button */
  --button-sm-padding-block: var(--spacing2);
  --button-sm-padding-inline: var(--spacing4);
  --button-sm-gap: var(--spacing1-5);
  --button-md-padding-block: var(--spacing3);
  --button-md-padding-inline: var(--spacing6);
  --button-md-gap: var(--spacing2);
  --button-lg-padding-block: var(--spacing3-5);
  --button-lg-padding-inline: var(--spacing7);
  --button-lg-gap: var(--spacing2);

  /* Tag - Badge */
  --tag-sm-padding-block: var(--spacing1-5);
  --tag-sm-padding-inline: var(--spacing3);
  --tag-sm-gap: var(--spacing1); 
  --tag-md-padding-block: var(--spacing1-5);
  --tag-md-padding-inline: var(--spacing4);
  --tag-md-gap: var(--spacing1-5);
  --tag-lg-padding-block: var(--spacing1-5);
  --tag-lg-padding-inline: var(--spacing4);
  --tag-lg-gap: var(--spacing2); 

  /* Header - Footer */
  --header-gap: var(--spacing3);
  --header-padding-topbar: var(--spacing2);
  --header-padding: var(--spacing3);
  --footer-gap: var(--spacing8);
  --footer-padding: var(--spacing7); 
 
  /* Card */  
  --card-gap: var(--spacing6);
  --card-icon-size: var(--spacing10);

  /* Component */
  --component-padding-sm: var(--spacing4);  
  --component-padding-md: var(--spacing6);
  --component-padding-lg: var(--spacing8);
  --component-padding-xl: var(--spacing14);    

  /* Form gap */
  --form-gap-sm: var(--spacing4);
  --form-gap-md: var(--spacing5);
}

@media screen and (992px <= width) {
  .spacings-lg {
    /* Section */
    --section-gap-sm: var(--spacing10);
    --section-gap-md: var(--spacing14);
    --section-padding-block: var(--spacing40);
    /* Header - Footer */
    --header-gap: var(--spacing8);
    --header-padding: var(--spacing3);    
  }  
}

.spacings-xl {
  /* Section */
  --section-gap-sm: var(--spacing6);
  --section-gap-md: var(--spacing8);
  --section-padding-block: var(--spacing14);

  /* Grid */
  --grid-margin: var(--spacing4);
  --grid-gutter: var(--spacing6);

  /* Text gap */
  --paragraph-gap-xs: var(--spacing1);
  --paragraph-gap-sm: var(--spacing5);
  --paragraph-gap-md: var(--spacing5);
  --paragraph-gap-lg: var(--spacing10);
  --text-list-gap-sm: var(--spacing5);
  --text-list-gap-md: var(--spacing6);
  --text-list-gap-lg: var(--spacing7);
  --text-icon-gap-sm: var(--spacing2);
  --text-icon-gap-md: var(--spacing3);
  --text-icon-gap-lg: var(--spacing4);

  /* Button */
  --button-sm-padding-block: var(--spacing2);
  --button-sm-padding-inline: var(--spacing4);
  --button-sm-gap: var(--spacing1-5);
  --button-md-padding-block: var(--spacing4);
  --button-md-padding-inline: var(--spacing7);
  --button-md-gap: var(--spacing2);
  --button-lg-padding-block: var(--spacing4);
  --button-lg-padding-inline: var(--spacing8);
  --button-lg-gap: var(--spacing2);

  /* Tag - Badge */
  --tag-sm-padding-block: var(--spacing2);
  --tag-sm-padding-inline: var(--spacing3-5);
  --tag-sm-gap: var(--spacing1-5); 
  --tag-md-padding-block: var(--spacing2);
  --tag-md-padding-inline: var(--spacing4);
  --tag-md-gap: var(--spacing2);
  --tag-lg-padding-block: var(--spacing2);
  --tag-lg-padding-inline: var(--spacing5);
  --tag-lg-gap: var(--spacing2); 

  /* Header - Footer */
  --header-gap: var(--spacing4);
  --header-padding-topbar: var(--spacing2);
  --header-padding: var(--spacing3);
  --footer-gap: var(--spacing10);
  --footer-padding: var(--spacing8); 
 
  /* Card */  
  --card-gap: var(--spacing8);
  --card-icon-size: var(--spacing12);

  /* Component */
  --component-padding-sm: var(--spacing6);  
  --component-padding-md: var(--spacing8);
  --component-padding-lg: var(--spacing10);
  --component-padding-xl: var(--spacing16);    

  /* Form gap */
  --form-gap-sm: var(--spacing5);
  --form-gap-md: var(--spacing6);
}

@media screen and (992px <= width) {
  .spacings-xl {
    /* Section */
    --section-gap-sm: var(--spacing12);
    --section-gap-md: var(--spacing16);
    --section-padding-block: var(--spacing48);
    /* Header - Footer */
    --header-gap: var(--spacing10);
    --header-padding: var(--spacing3);    
  }  
}

/* ===================== */
/* === BORDER-RADIUS === */
/* ===================== */

:root {
  --radius-base: 4px;
  --radius0: calc(var(--radius-base) * 0); /* 0px */
  --radius0-5: calc(var(--radius-base) * .5); /* 2px */
  --radius1: calc(var(--radius-base) * 1); /* 4px */
  --radius1-5: calc(var(--radius-base) * 1.5); /* 6px */
  --radius2: calc(var(--radius-base) * 2); /* 8px */
  --radius2-5: calc(var(--radius-base) * 2.5); /* 10px */
  --radius3: calc(var(--radius-base) * 3); /* 12px */
  --radius4: calc(var(--radius-base) * 4); /* 16px */
  --radius5: calc(var(--radius-base) * 5); /* 20px */
  --radius6: calc(var(--radius-base) * 6); /* 24px */
  --radius8: calc(var(--radius-base) * 8); /* 32px */
  --radius10: calc(var(--radius-base) * 10); /* 40px */
  --radius12: calc(var(--radius-base) * 12); /* 48px */
  --radius14: calc(var(--radius-base) * 14); /* 56px */
  --radius16: calc(var(--radius-base) * 16); /* 64px */
  --radius20: calc(var(--radius-base) * 20); /* 80px */
  --radius24: calc(var(--radius-base) * 24); /* 96px */
}

.roundings-sm {
  --button-radius: var(--radius1);
  --img-radius: var(--radius6);
  --count-radius: var(--radius0-5);
  --tag-radius: var(--radius1);
  --icon-radius: var(--radius0-5);
  --card-radius: var(--radius2);
  --card-inner-img-radius: var(--radius0-5);
  --input-radius: var(--radius1);
}

.roundings-md {
  --button-radius: var(--radius4);
  --img-radius: var(--radius16);
  --count-radius: var(--radius1);
  --tag-radius: var(--radius2);
  --icon-radius: var(--radius1);
  --card-radius: var(--radius4);
  --card-inner-img-radius: var(--radius1);
  --input-radius: var(--radius1-5);
}

.roundings-lg {
  --button-radius: var(--radius24);
  --img-radius: var(--radius20);
  --count-radius: var(--radius24);
  --tag-radius: var(--radius24);
  --icon-radius: var(--radius2);
  --card-radius: var(--radius6);
  --card-inner-img-radius: var(--radius2);
  --input-radius: var(--radius2);
}

/* ================== */
/* === TRANSITION === */
/* ================== */

:root {
  --transition-duration-base: .5s;
  --transition-duration0: calc(var(--transition-duration-base) * 0); /* 0s */
  --transition-duration0-5: calc(var(--transition-duration-base) * .5); /* .25s */
  --transition-duration1: calc(var(--transition-duration-base) * 1); /* .5s */
  --transition-duration1-5: calc(var(--transition-duration-base) * 1.5); /* .75s */
  --transition-duration2: calc(var(--transition-duration-base) * 2); /* 1s */
  --transition-duration3: calc(var(--transition-duration-base) * 3); /* 1.5s */
  --transition-duration4: calc(var(--transition-duration-base) * 4); /* 2s */
  --transition-duration6: calc(var(--transition-duration-base) * 6); /* 3s */
  --transition-duration8: calc(var(--transition-duration-base) * 8); /* 4s */
  --transition-duration10: calc(var(--transition-duration-base) * 10); /* 5s */
}

.transition-short {
  --transition-duration-xs: var(--transition-duration0-5);
  --transition-duration-sm: var(--transition-duration1);
  --transition-duration-md: var(--transition-duration1-5);
  --transition-duration-lg: var(--transition-duration3);
  --transition-duration-xl: var(--transition-duration6);
}

/* ================== */
/* === TYPOGRAPHY === */
/* ================== */

:root {
  --font-size-sm: 14px;
  --font-size-md: 16px;

  --minor-third: 1.2;
  --major-third: 1.25;
  --golden-ratio: 1.3;
  --perfect-fourth: 1.333333;

  --text-md: calc(var(--font-size) * 1);
  --text-sm: calc(var(--text-md) / var(--font-ratio));
  --text-xs: calc(var(--text-sm) / var(--font-ratio));
  --text-lg: calc(var(--text-md) * var(--font-ratio));
  
  --display-xs: calc(var(--text-md) * var(--font-ratio));
  --display-sm: calc(var(--display-xs) * var(--font-ratio));
  --display-md: calc(var(--display-sm) * var(--font-ratio));
  --display-lg: calc(var(--display-md) * var(--font-ratio));
  --display-xl: calc(var(--display-lg) * var(--font-ratio));
  --display-2xl: calc(var(--display-xl) * var(--font-ratio));
  
  --line-height-sm: 1.2;
  --line-height-md: 1.4;
  --line-height-lg: 1.5;

  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
}

:where(h1, .title-1, .display-xxl, h2, .title-2, .display-xl, h3, .title-3, .display-lg, h4, .title-4, .display-md, h5, .title-5, .display-sm, h6, .title-6, .display-xs) {
  font-family: var(--font-display);
  font-weight: var(--display-font-weight);
  line-height: var(--line-height-sm);
}

.text-md {
  font-size: var(--text-md);
  line-height: var(--line-height-lg);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--line-height-md);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--line-height-sm);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--line-height-lg);
}

.display-xs {
  font-size: var(--display-xs);
  line-height: var(--line-height-sm);
}

.display-sm {
  font-size: var(--display-sm);
  line-height: var(--line-height-sm);
}

.display-md {
  font-size: var(--display-md);
  line-height: var(--line-height-sm);
}

.display-lg {
  font-size: var(--display-lg);
  line-height: var(--line-height-sm);
}

.display-xl {
  font-size: var(--display-xl);
  line-height: var(--line-height-sm);
}

.display-2xl {
  font-size: var(--display-2xl);
  line-height: var(--line-height-sm);
}

h1, .title-1 {font-size: var(--h1-font-size);}
h2, .title-2 {font-size: var(--h2-font-size);}
h3, .title-3 {font-size: var(--h3-font-size);}
h4, .title-4 {font-size: var(--h4-font-size);}
h5, .title-5 {font-size: var(--h5-font-size);}
h6, .title-6 {font-size: var(--h6-font-size);}

@media (width < 992px) {
  :root {--display-sm: var(--display-xs);}  
  h1, .title-1 {font-size: var(--h1-mobile-font-size);}
  h2, .title-2 {font-size: var(--h2-mobile-font-size);}
  h3, .title-3 {font-size: var(--h3-mobile-font-size);}
  h4, .title-4 {font-size: var(--h4-mobile-font-size);}
  h5, .title-5 {font-size: var(--h5-mobile-font-size);}
  h6, .title-6 {font-size: var(--h6-mobile-font-size);}
}

/* ============== */
/* === COLORS === */
/* ============== */

:root {
  --success: hsl(137, 64%, 40%);
  --danger: hsl(3, 87%, 49%);
  --warning: hsl(34, 94%, 53%);
  --info: hsl(215, 87%, 51%);
  --visited-link: var(--button-default-color);

  --base-gray: var(--gray, color-mix(in srgb, var(--brand) 20%, gray));
  --gray0: color-mix(in srgb, var(--base-gray) 0%, white);
  --gray50: color-mix(in srgb, var(--base-gray) 10%, white);
  --gray100: color-mix(in srgb, var(--base-gray) 20%, white);
  --gray200: color-mix(in srgb, var(--base-gray) 40%, white);
  --gray300: color-mix(in srgb, var(--base-gray) 60%, white);
  --gray400: color-mix(in srgb, var(--base-gray) 80%, white);
  --gray500: var(--base-gray);
  --gray600: color-mix(in srgb, var(--base-gray) 80%, black);
  --gray700: color-mix(in srgb, var(--base-gray) 60%, black);
  --gray800: color-mix(in srgb, var(--base-gray) 40%, black);
  --gray900: color-mix(in srgb, var(--base-gray) 20%, black);

  --brand50: color-mix(in srgb, var(--brand) 10%, white);
  --brand100: color-mix(in srgb, var(--brand) 20%, white);
  --brand200: color-mix(in srgb, var(--brand) 40%, white);
  --brand300: color-mix(in srgb, var(--brand) 60%, white);
  --brand400: color-mix(in srgb, var(--brand) 80%, white);
  --brand500: var(--brand);
  --brand600: color-mix(in srgb, var(--brand) 80%, black);
  --brand700: color-mix(in srgb, var(--brand) 60%, black);
  --brand800: color-mix(in srgb, var(--brand) 40%, black);
  --brand900: color-mix(in srgb, var(--brand) 20%, black);

  --accent50: color-mix(in srgb, var(--accent) 10%, white);
  --accent100: color-mix(in srgb, var(--accent) 20%, white);
  --accent200: color-mix(in srgb, var(--accent) 40%, white);
  --accent300: color-mix(in srgb, var(--accent) 60%, white);
  --accent400: color-mix(in srgb, var(--accent) 80%, white);
  --accent500: var(--accent);
  --accent600: color-mix(in srgb, var(--accent) 80%, black);
  --accent700: color-mix(in srgb, var(--accent) 60%, black);
  --accent800: color-mix(in srgb, var(--accent) 40%, black);
  --accent900: color-mix(in srgb, var(--accent) 20%, black);

  --info50: color-mix(in srgb, var(--info) 10%, white);
  --info100: color-mix(in srgb, var(--info) 20%, white);
  --info200: color-mix(in srgb, var(--info) 40%, white);
  --info300: color-mix(in srgb, var(--info) 60%, white);
  --info400: color-mix(in srgb, var(--info) 80%, white);
  --info500: var(--info);
  --info600: color-mix(in srgb, var(--info) 80%, black);
  --info700: color-mix(in srgb, var(--info) 60%, black);
  --info800: color-mix(in srgb, var(--info) 40%, black);
  --info900: color-mix(in srgb, var(--info) 20%, black);

  --shade-background: var(--gray50);
  --shade-text: var(--gray800);
}

/* =============== */
/* === SHADOWS === */
/* =============== */

:root {
  --shadow-gray: color-mix(in srgb, var(--gray700) 16%, transparent);
  --gray-xs: 0 1px 2px 0 var(--shadow-gray);
  --gray-sm: 0 3px 4px 0 var(--shadow-gray);
  --gray-md: 0 6px 10px -2px var(--shadow-gray);
  --gray-lg: 0 12px 16px -4px var(--shadow-gray);
  --gray-xl: 0 20px 24px -4px var(--shadow-gray);
  --gray-2xl: 0 24px 48px -12px var(--shadow-gray);
  --gray-3xl: 0 32px 64px -12px var(--shadow-gray);

  --shadow-brand: color-mix(in srgb, var(--brand700) 16%, transparent);
  --brand-xs: 0 1px 2px 0 var(--shadow-brand);
  --brand-sm: 0 3px 4px 0 var(--shadow-brand);
  --brand-md: 0 6px 10px -2px var(--shadow-brand);
  --brand-lg: 0 12px 16px -4px var(--shadow-brand);
  --brand-xl: 0 20px 24px -4px var(--shadow-brand);
  --brand-2xl: 0 24px 48px -12px var(--shadow-brand);
  --brand-3xl: 0 32px 64px -12px var(--shadow-brand);

  --shadow-accent: color-mix(in srgb, var(--accent700) 16%, transparent);
  --accent-xs: 0 1px 2px 0 var(--shadow-accent);
  --accent-sm: 0 3px 4px 0 var(--shadow-accent);
  --accent-md: 0 6px 10px -2px var(--shadow-accent);
  --accent-lg: 0 12px 16px -4px var(--shadow-accent);
  --accent-xl: 0 20px 24px -4px var(--shadow-accent);
  --accent-2xl: 0 24px 48px -12px var(--shadow-accent);
  --accent-3xl: 0 32px 64px -12px var(--shadow-accent);
}


/* ============ */
/* === GRID === */
/* ============ */

.html-block .grid {
  --grid-columns: 6;
  --grid-gutter: var(--spacing6);
  --container: calc(100% - var(--grid-gutter) * 2);
  --subgrid-width: calc((var(--container) - (var(--grid-gutter) * (var(--grid-columns) - 1))) / var(--grid-columns));
  display: grid;
  grid-template-columns: [columns-start] 1fr [grid-start] repeat(var(--grid-columns), [col-start] var(--subgrid-width)) [grid-end] 1fr [columns-end];
  grid-template-rows: [rows-start] repeat(12, [row-start] min-content) [rows-end];
  column-gap: var(--grid-gutter); 
}

.html-block .grid .container {
  display: grid;
  grid-column: grid-start / grid-end;
  grid-row: rows-start / rows-end;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid; 
}

.html-block .grid .cell {
  grid-column: var(--col-start, columns-start) / var(--col-end, columns-end);
  grid-row: var(--row-start) / var(--row-end); 
}

.html-block .grid .container .cell { grid-column: var(--col-start, grid-start) / var(--col-end, grid-end); }

.html-block .grid .col-start-1 { --col-start: 1; }
.html-block .grid .col-start-2 { --col-start: 2; }
.html-block .grid .col-start-3 { --col-start: 3; }
.html-block .grid .col-start-4 { --col-start: 4; }
.html-block .grid .col-start-5 { --col-start: 5; }
.html-block .grid .col-start-6 { --col-start: 6; }
.html-block .grid .col-start-7 { --col-start: 7; }
.html-block .grid .col-start-8 { --col-start: 8; }

.html-block .grid .col-end-2 { --col-end: 2; }
.html-block .grid .col-end-3 { --col-end: 3; }
.html-block .grid .col-end-4 { --col-end: 4; }
.html-block .grid .col-end-5 { --col-end: 5; }
.html-block .grid .col-end-6 { --col-end: 6; }
.html-block .grid .col-end-7 { --col-end: 7; }
.html-block .grid .col-end-8 { --col-end: 8; }
.html-block .grid .col-end-9 { --col-end: 9; }
.html-block .grid .col-end-10 { --col-end: 10; }

.html-block .grid .row-start-1 { --row-start: 1; }
.html-block .grid .row-start-2 { --row-start: 2; }
.html-block .grid .row-start-3 { --row-start: 3; }
.html-block .grid .row-start-4 { --row-start: 4; }
.html-block .grid .row-start-5 { --row-start: 5; }
.html-block .grid .row-start-6 { --row-start: 6; }
.html-block .grid .row-start-7 { --row-start: 7; }
.html-block .grid .row-start-8 { --row-start: 8; }
.html-block .grid .row-start-9 { --row-start: 9; }
.html-block .grid .row-start-10 { --row-start: 10; }
.html-block .grid .row-start-11 { --row-start: 11; }
.html-block .grid .row-start-12 { --row-start: 12; }

.html-block .grid .row-end-2 { --row-end: 2; }
.html-block .grid .row-end-3 { --row-end: 3; }
.html-block .grid .row-end-4 { --row-end: 4; }
.html-block .grid .row-end-5 { --row-end: 5; }
.html-block .grid .row-end-6 { --row-end: 6; }
.html-block .grid .row-end-7 { --row-end: 7; }
.html-block .grid .row-end-8 { --row-end: 8; }
.html-block .grid .row-end-9 { --row-end: 9; }
.html-block .grid .row-end-10 { --row-end: 10; }
.html-block .grid .row-end-11 { --row-end: 11; }
.html-block .grid .row-end-12 { --row-end: 12; }
.html-block .grid .row-end-13 { --row-end: 13; }

@media screen and (576px <= width) {
  .html-block .grid .sm-col-start-1 { --col-start: 1; }
  .html-block .grid .sm-col-start-2 { --col-start: 2; }
  .html-block .grid .sm-col-start-3 { --col-start: 3; }
  .html-block .grid .sm-col-start-4 { --col-start: 4; }
  .html-block .grid .sm-col-start-5 { --col-start: 5; }
  .html-block .grid .sm-col-start-6 { --col-start: 6; }
  .html-block .grid .sm-col-start-7 { --col-start: 7; }
  .html-block .grid .sm-col-start-8 { --col-start: 8; }

  .html-block .grid .sm-col-end-2 { --col-end: 2; }
  .html-block .grid .sm-col-end-3 { --col-end: 3; }
  .html-block .grid .sm-col-end-4 { --col-end: 4; }
  .html-block .grid .sm-col-end-5 { --col-end: 5; }
  .html-block .grid .sm-col-end-6 { --col-end: 6; }
  .html-block .grid .sm-col-end-7 { --col-end: 7; }
  .html-block .grid .sm-col-end-8 { --col-end: 8; }
  .html-block .grid .sm-col-end-9 { --col-end: 9; }

  .html-block .grid .sm-row-start-1 { --row-start: 1; }
  .html-block .grid .sm-row-start-2 { --row-start: 2; }
  .html-block .grid .sm-row-start-3 { --row-start: 3; }
  .html-block .grid .sm-row-start-4 { --row-start: 4; }
  .html-block .grid .sm-row-start-5 { --row-start: 5; }
  .html-block .grid .sm-row-start-6 { --row-start: 6; }
  .html-block .grid .sm-row-start-7 { --row-start: 7; }
  .html-block .grid .sm-row-start-8 { --row-start: 8; }
  .html-block .grid .sm-row-start-9 { --row-start: 9; }
  .html-block .grid .sm-row-start-10 { --row-start: 10; }
  .html-block .grid .sm-row-start-11 { --row-start: 11; }
  .html-block .grid .sm-row-start-12 { --row-start: 12; }

  .html-block .grid .sm-row-end-2 { --row-end: 2; }
  .html-block .grid .sm-row-end-3 { --row-end: 3; }
  .html-block .grid .sm-row-end-4 { --row-end: 4; }
  .html-block .grid .sm-row-end-5 { --row-end: 5; }
  .html-block .grid .sm-row-end-6 { --row-end: 6; }
  .html-block .grid .sm-row-end-7 { --row-end: 7; }
  .html-block .grid .sm-row-end-8 { --row-end: 8; }
  .html-block .grid .sm-row-end-9 { --row-end: 9; }
  .html-block .grid .sm-row-end-10 { --row-end: 10; }
  .html-block .grid .sm-row-end-11 { --row-end: 11; }
  .html-block .grid .sm-row-end-12 { --row-end: 12; }
  .html-block .grid .sm-row-end-13 { --row-end: 13; } 
}

@media screen and (576px <= width < 768px) {
  .html-block .grid { --container: 540px; } 
}

@media screen and (768px <= width) {
  .html-block .grid .md-col-start-1 { --col-start: 1; }
  .html-block .grid .md-col-start-2 { --col-start: 2; }
  .html-block .grid .md-col-start-3 { --col-start: 3; }
  .html-block .grid .md-col-start-4 { --col-start: 4; }
  .html-block .grid .md-col-start-5 { --col-start: 5; }
  .html-block .grid .md-col-start-6 { --col-start: 6; }
  .html-block .grid .md-col-start-7 { --col-start: 7; }
  .html-block .grid .md-col-start-8 { --col-start: 8; }

  .html-block .grid .md-col-end-2 { --col-end: 2; }
  .html-block .grid .md-col-end-3 { --col-end: 3; }
  .html-block .grid .md-col-end-4 { --col-end: 4; }
  .html-block .grid .md-col-end-5 { --col-end: 5; }
  .html-block .grid .md-col-end-6 { --col-end: 6; }
  .html-block .grid .md-col-end-7 { --col-end: 7; }
  .html-block .grid .md-col-end-8 { --col-end: 8; }
  .html-block .grid .md-col-end-9 { --col-end: 9; }
  .html-block .grid .md-col-end-10 { --col-end: 10; }
  .html-block .grid .md-col-end-11 { --col-end: 11; }
  .html-block .grid .md-col-end-12 { --col-end: 12; }

  .html-block .grid .md-row-start-1 { --row-start: 1; }
  .html-block .grid .md-row-start-2 { --row-start: 2; }
  .html-block .grid .md-row-start-3 { --row-start: 3; }
  .html-block .grid .md-row-start-4 { --row-start: 4; }
  .html-block .grid .md-row-start-5 { --row-start: 5; }
  .html-block .grid .md-row-start-6 { --row-start: 6; }
  .html-block .grid .md-row-start-7 { --row-start: 7; }
  .html-block .grid .md-row-start-8 { --row-start: 8; }
  .html-block .grid .md-row-start-9 { --row-start: 9; }
  .html-block .grid .md-row-start-10 { --row-start: 10; }
  .html-block .grid .md-row-start-11 { --row-start: 11; }
  .html-block .grid .md-row-start-12 { --row-start: 12; }

  .html-block .grid .md-row-end-2 { --row-end: 2; }
  .html-block .grid .md-row-end-3 { --row-end: 3; }
  .html-block .grid .md-row-end-4 { --row-end: 4; }
  .html-block .grid .md-row-end-5 { --row-end: 5; }
  .html-block .grid .md-row-end-6 { --row-end: 6; }
  .html-block .grid .md-row-end-7 { --row-end: 7; }
  .html-block .grid .md-row-end-8 { --row-end: 8; }
  .html-block .grid .md-row-end-9 { --row-end: 9; }
  .html-block .grid .md-row-end-10 { --row-end: 10; }
  .html-block .grid .md-row-end-11 { --row-end: 11; }
  .html-block .grid .md-row-end-12 { --row-end: 12; }
  .html-block .grid .md-row-end-13 { --row-end: 13; } 
}

@media screen and (768px <= width < 992px) {
  .html-block .grid { --container: 720px; } 
}

@media screen and (992px <= width) {
  .html-block .grid { --grid-columns: 12; }

  .html-block .grid .lg-col-start-1 { --col-start: 1; }
  .html-block .grid .lg-col-start-2 { --col-start: 2; }
  .html-block .grid .lg-col-start-3 { --col-start: 3; }
  .html-block .grid .lg-col-start-4 { --col-start: 4; }
  .html-block .grid .lg-col-start-5 { --col-start: 5; }
  .html-block .grid .lg-col-start-6 { --col-start: 6; }
  .html-block .grid .lg-col-start-7 { --col-start: 7; }
  .html-block .grid .lg-col-start-8 { --col-start: 8; }
  .html-block .grid .lg-col-start-9 { --col-start: 9; }
  .html-block .grid .lg-col-start-10 { --col-start: 10; }
  .html-block .grid .lg-col-start-11 { --col-start: 11; }
  .html-block .grid .lg-col-start-12 { --col-start: 12; }
  .html-block .grid .lg-col-start-13 { --col-start: 13; }
  .html-block .grid .lg-col-start-14 { --col-start: 14; }

  .html-block .grid .lg-col-end-2 { --col-end: 2; }
  .html-block .grid .lg-col-end-3 { --col-end: 3; }
  .html-block .grid .lg-col-end-4 { --col-end: 4; }
  .html-block .grid .lg-col-end-5 { --col-end: 5; }
  .html-block .grid .lg-col-end-6 { --col-end: 6; }
  .html-block .grid .lg-col-end-7 { --col-end: 7; }
  .html-block .grid .lg-col-end-8 { --col-end: 8; }
  .html-block .grid .lg-col-end-9 { --col-end: 9; }
  .html-block .grid .lg-col-end-10 { --col-end: 10; }
  .html-block .grid .lg-col-end-11 { --col-end: 11; }
  .html-block .grid .lg-col-end-12 { --col-end: 12; }
  .html-block .grid .lg-col-end-13 { --col-end: 13; }
  .html-block .grid .lg-col-end-14 { --col-end: 14; }
  .html-block .grid .lg-col-end-15 { --col-end: 15; }

  .html-block .grid .lg-row-start-1 { --row-start: 1; }
  .html-block .grid .lg-row-start-2 { --row-start: 2; }
  .html-block .grid .lg-row-start-3 { --row-start: 3; }
  .html-block .grid .lg-row-start-4 { --row-start: 4; }
  .html-block .grid .lg-row-start-5 { --row-start: 5; }
  .html-block .grid .lg-row-start-6 { --row-start: 6; }
  .html-block .grid .lg-row-start-7 { --row-start: 7; }
  .html-block .grid .lg-row-start-8 { --row-start: 8; }
  .html-block .grid .lg-row-start-9 { --row-start: 9; }
  .html-block .grid .lg-row-start-10 { --row-start: 10; }
  .html-block .grid .lg-row-start-11 { --row-start: 11; }
  .html-block .grid .lg-row-start-12 { --row-start: 12; }

  .html-block .grid .lg-row-end-2 { --row-end: 2; }
  .html-block .grid .lg-row-end-3 { --row-end: 3; }
  .html-block .grid .lg-row-end-4 { --row-end: 4; }
  .html-block .grid .lg-row-end-5 { --row-end: 5; }
  .html-block .grid .lg-row-end-6 { --row-end: 6; }
  .html-block .grid .lg-row-end-7 { --row-end: 7; }
  .html-block .grid .lg-row-end-8 { --row-end: 8; }
  .html-block .grid .lg-row-end-9 { --row-end: 9; }
  .html-block .grid .lg-row-end-10 { --row-end: 10; }
  .html-block .grid .lg-row-end-11 { --row-end: 11; }
  .html-block .grid .lg-row-end-12 { --row-end: 12; }
  .html-block .grid .lg-row-end-13 { --row-end: 13; } 
}

@media screen and (992px <= width < 1200px) {
  .html-block .grid { --container: 942px; }
}

@media screen and (1200px <= width) {
  .html-block .grid .xl-col-start-1 { --col-start: 1; }
  .html-block .grid .xl-col-start-2 { --col-start: 2; }
  .html-block .grid .xl-col-start-3 { --col-start: 3; }
  .html-block .grid .xl-col-start-4 { --col-start: 4; }
  .html-block .grid .xl-col-start-5 { --col-start: 5; }
  .html-block .grid .xl-col-start-6 { --col-start: 6; }
  .html-block .grid .xl-col-start-7 { --col-start: 7; }
  .html-block .grid .xl-col-start-8 { --col-start: 8; }
  .html-block .grid .xl-col-start-9 { --col-start: 9; }
  .html-block .grid .xl-col-start-10 { --col-start: 10; }
  .html-block .grid .xl-col-start-11 { --col-start: 11; }
  .html-block .grid .xl-col-start-12 { --col-start: 12; }
  .html-block .grid .xl-col-start-13 { --col-start: 13; }
  .html-block .grid .xl-col-start-14 { --col-start: 14; }

  .html-block .grid .xl-col-end-2 { --col-end: 2; }
  .html-block .grid .xl-col-end-3 { --col-end: 3; }
  .html-block .grid .xl-col-end-4 { --col-end: 4; }
  .html-block .grid .xl-col-end-5 { --col-end: 5; }
  .html-block .grid .xl-col-end-6 { --col-end: 6; }
  .html-block .grid .xl-col-end-7 { --col-end: 7; }
  .html-block .grid .xl-col-end-8 { --col-end: 8; }
  .html-block .grid .xl-col-end-9 { --col-end: 9; }
  .html-block .grid .xl-col-end-10 { --col-end: 10; }
  .html-block .grid .xl-col-end-11 { --col-end: 11; }
  .html-block .grid .xl-col-end-12 { --col-end: 12; }
  .html-block .grid .xl-col-end-13 { --col-end: 13; }
  .html-block .grid .xl-col-end-14 { --col-end: 14; }
  .html-block .grid .xl-col-end-15 { --col-end: 15; }

  .html-block .grid .xl-row-start-1 { --row-start: 1; }
  .html-block .grid .xl-row-start-2 { --row-start: 2; }
  .html-block .grid .xl-row-start-3 { --row-start: 3; }
  .html-block .grid .xl-row-start-4 { --row-start: 4; }
  .html-block .grid .xl-row-start-5 { --row-start: 5; }
  .html-block .grid .xl-row-start-6 { --row-start: 6; }
  .html-block .grid .xl-row-start-7 { --row-start: 7; }
  .html-block .grid .xl-row-start-8 { --row-start: 8; }
  .html-block .grid .xl-row-start-9 { --row-start: 9; }
  .html-block .grid .xl-row-start-10 { --row-start: 10; }
  .html-block .grid .xl-row-start-11 { --row-start: 11; }
  .html-block .grid .xl-row-start-12 { --row-start: 12; }

  .html-block .grid .xl-row-end-2 { --row-end: 2; }
  .html-block .grid .xl-row-end-3 { --row-end: 3; }
  .html-block .grid .xl-row-end-4 { --row-end: 4; }
  .html-block .grid .xl-row-end-5 { --row-end: 5; }
  .html-block .grid .xl-row-end-6 { --row-end: 6; }
  .html-block .grid .xl-row-end-7 { --row-end: 7; }
  .html-block .grid .xl-row-end-8 { --row-end: 8; }
  .html-block .grid .xl-row-end-9 { --row-end: 9; }
  .html-block .grid .xl-row-end-10 { --row-end: 10; }
  .html-block .grid .xl-row-end-11 { --row-end: 11; }
  .html-block .grid .xl-row-end-12 { --row-end: 12; }
  .html-block .grid .xl-row-end-13 { --row-end: 13; } 
}

@media screen and (1200px <= width < 1400px) {
  .html-block .grid { --container: 1140px; } 
}

@media screen and (1400px <= width) {
  .html-block .grid { --container: 1320px; }

  .html-block .grid .xxl-col-start-1 { --col-start: 1; }
  .html-block .grid .xxl-col-start-2 { --col-start: 2; }
  .html-block .grid .xxl-col-start-3 { --col-start: 3; }
  .html-block .grid .xxl-col-start-4 { --col-start: 4; }
  .html-block .grid .xxl-col-start-5 { --col-start: 5; }
  .html-block .grid .xxl-col-start-6 { --col-start: 6; }
  .html-block .grid .xxl-col-start-7 { --col-start: 7; }
  .html-block .grid .xxl-col-start-8 { --col-start: 8; }
  .html-block .grid .xxl-col-start-9 { --col-start: 9; }
  .html-block .grid .xxl-col-start-10 { --col-start: 10; }
  .html-block .grid .xxl-col-start-11 { --col-start: 11; }
  .html-block .grid .xxl-col-start-12 { --col-start: 12; }
  .html-block .grid .xxl-col-start-13 { --col-start: 13; }
  .html-block .grid .xxl-col-start-14 { --col-start: 14; }

  .html-block .grid .xxl-col-end-2 { --col-end: 2; }
  .html-block .grid .xxl-col-end-3 { --col-end: 3; }
  .html-block .grid .xxl-col-end-4 { --col-end: 4; }
  .html-block .grid .xxl-col-end-5 { --col-end: 5; }
  .html-block .grid .xxl-col-end-6 { --col-end: 6; }
  .html-block .grid .xxl-col-end-7 { --col-end: 7; }
  .html-block .grid .xxl-col-end-8 { --col-end: 8; }
  .html-block .grid .xxl-col-end-9 { --col-end: 9; }
  .html-block .grid .xxl-col-end-10 { --col-end: 10; }
  .html-block .grid .xxl-col-end-11 { --col-end: 11; }
  .html-block .grid .xxl-col-end-12 { --col-end: 12; }
  .html-block .grid .xxl-col-end-13 { --col-end: 13; }
  .html-block .grid .xxl-col-end-14 { --col-end: 14; }
  .html-block .grid .xxl-col-end-15 { --col-end: 15; }

  .html-block .grid .xxl-row-start-1 { --row-start: 1; }
  .html-block .grid .xxl-row-start-2 { --row-start: 2; }
  .html-block .grid .xxl-row-start-3 { --row-start: 3; }
  .html-block .grid .xxl-row-start-4 { --row-start: 4; }
  .html-block .grid .xxl-row-start-5 { --row-start: 5; }
  .html-block .grid .xxl-row-start-6 { --row-start: 6; }
  .html-block .grid .xxl-row-start-7 { --row-start: 7; }
  .html-block .grid .xxl-row-start-8 { --row-start: 8; }
  .html-block .grid .xxl-row-start-9 { --row-start: 9; }
  .html-block .grid .xxl-row-start-10 { --row-start: 10; }
  .html-block .grid .xxl-row-start-11 { --row-start: 11; }
  .html-block .grid .xxl-row-start-12 { --row-start: 12; }

  .html-block .grid .xxl-row-end-2 { --row-end: 2; }
  .html-block .grid .xxl-row-end-3 { --row-end: 3; }
  .html-block .grid .xxl-row-end-4 { --row-end: 4; }
  .html-block .grid .xxl-row-end-5 { --row-end: 5; }
  .html-block .grid .xxl-row-end-6 { --row-end: 6; }
  .html-block .grid .xxl-row-end-7 { --row-end: 7; }
  .html-block .grid .xxl-row-end-8 { --row-end: 8; }
  .html-block .grid .xxl-row-end-9 { --row-end: 9; }
  .html-block .grid .xxl-row-end-10 { --row-end: 10; }
  .html-block .grid .xxl-row-end-11 { --row-end: 11; }
  .html-block .grid .xxl-row-end-12 { --row-end: 12; }
  .html-block .grid .xxl-row-end-13 { --row-end: 13; }
}

.font-bold { font-weight: var(--text-heavy); }

[class^="display-"].font-bold,
.font-bold [class^="display-"] { 
  font-weight: var(--display-heavy);
}

.html-block :where([class^="display-"]),
.html-block :where([class^="display-"] > span) {
  font-family: var(--font-display);
  font-size: var(--title-size);
  line-height: 1.2;
}

.html-block :where(.display-xs) { --title-size: var(--display-xs); }
.html-block :where(.display-sm) { --title-size: var(--display-sm); }
.html-block :where(.display-md) { --title-size: var(--display-md); }
.html-block :where(.display-lg) { --title-size: var(--display-lg); }
.html-block :where(.display-xl) { --title-size: var(--display-xl); }
.html-block :where(.display-2xl) { --title-size: var(--display-2xl); }
.html-block :where([class^="display-"] > span) { display: block; }
.html-block :where(.display-lg > span) { --title-size: var(--display-sm); }
.html-block :where(.display-xl > span) { --title-size: var(--display-md); }
.html-block :where(.display-2xl > span) { --title-size: var(--display-lg); }

:where(body) {
  margin: 0;
  padding: 0;
  font-size: var(--text-md);
  color: var(--shade-text);
  background-color: var(--shade-background, var(--gray0));
}

/* ==================== */
/* === BUTTON GROUP === */
/* ==================== */

.buttonGroup {
  display: flex;
  gap: var(--spacing2);
  flex-wrap: wrap;
  margin-block: var(--spacing2);
}

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

@media (width < 576px) { .buttonGroup { flex-direction: column; } }

.buttonGroup:first-child, .buttonGroup + .buttonGroup { margin-top: 0; }
.buttonGroup:last-child { margin-bottom: 0; }

:where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; }

.button,
.btn,
.btn.primary, 
.btn.secondary,
.btn.accent,
.btn.outlined {
  --button-gap: var(--spacing1-5);
  all: revert;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--button-gap);
  margin: 0;
  padding-block: var(--button-padding-block, var(--button-md-padding-block));
  padding-inline: var(--button-padding-inline, var(--button-md-padding-inline));
  font: inherit;
  font-family: var(--button-font-family, inherit);
  font-size: var(--button-font-size, var(--text-md));
  font-weight: var(--button-font-weight, inherit);
  letter-spacing: inherit;
  text-decoration: none;
  line-height: var(--button-line-height, 1.5);
  color: var(--button-default-color, var(--shade-text));
  background: var(--button-default-background, var(--gray0));
  border: var(--button-default-border);
  border-radius: var(--button-radius, var(--radius0));
  transition-property: color, background-color;
  transition-duration: var(--transition-duration-xs, var(--transition-duration0));
}

.button:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--spacing1) var(--brand100); 
}

.button:hover,
.btn:hover {
  color: var(--button-hover-color);
  background: var(--button-hover-background, var(--gray100));
  border: var(--button-hover-border); 
}

.button:active,
.btn:active {
  color: var(--button-active-color);
  background: var(--button-active-background, var(--gray200));
  border: var(--button-active-border); 
}

button.button[disabled], a.button[aria-disabled="true"], .button.disabled,
button.btn[disabled], a.btn[aria-disabled="true"], .btn.disabled {
  color: var(--button-disabled-color, var(--gray400));
  background: var(--button-disabled-background, transparent);
  border: var(--button-disabled-border);
  pointer-events: none; 
}

.button--primary,
.btn.primary {
  --button-default-color: var(--button-primary-default-color);
  --button-default-background: var(--button-primary-default-background);
  --button-default-border: var(--button-primary-default-border);
  --button-hover-color: var(--button-primary-hover-color);
  --button-hover-background: var(--button-primary-hover-background);
  --button-hover-border: var(--button-primary-hover-border);
  --button-active-color: var(--button-primary-active-color);
  --button-active-background: var(--button-primary-active-background);
  --button-active-border: var(--button-primary-active-border);
  --button-disabled-color: var(--button-primary-disabled-color);
  --button-disabled-background: var(--button-primary-disabled-background);
  --button-disabled-border: var(--button-primary-disabled-border); 
}

.btn.primary:hover {
  color: var(--button-primary-hover-color);
  background: var(--button-primary-hover-background);
  border: var(--button-primary-hover-border); 
}

.button--secondary,
.btn.secondary {
  --button-default-color: var(--button-secondary-default-color);
  --button-default-background: var(--button-secondary-default-background);
  --button-default-border: var(--button-secondary-default-border);
  --button-hover-color: var(--button-secondary-hover-color);
  --button-hover-background: var(--button-secondary-hover-background);
  --button-hover-border: var(--button-secondary-hover-border);
  --button-active-color: var(--button-secondary-active-color);
  --button-active-background: var(--button-secondary-active-background);
  --button-active-border: var(--button-secondary-active-border);
  --button-disabled-color: var(--button-secondary-disabled-color);
  --button-disabled-background: var(--button-secondary-disabled-background);
  --button-disabled-border: var(--button-secondary-disabled-border); 
}

.btn.secondary:hover {
  color: var(--button-secondary-hover-color);
  background: var(--button-secondary-hover-background);
  border: var(--button-secondary-hover-border); 
}

.button--conversion,
.btn.accent {
  --button-default-color: var(--button-conversion-default-color);
  --button-default-background: var(--button-conversion-default-background);
  --button-default-border: var(--button-conversion-default-border);
  --button-hover-color: var(--button-conversion-hover-color);
  --button-hover-background: var(--button-conversion-hover-background);
  --button-hover-border: var(--button-conversion-hover-border);
  --button-active-color: var(--button-conversion-active-color);
  --button-active-background: var(--button-conversion-active-background);
  --button-active-border: var(--button-conversion-active-border);
  --button-disabled-color: var(--button-conversion-disabled-color);
  --button-disabled-background: var(--button-conversion-disabled-background);
  --button-disabled-border: var(--button-conversion-disabled-border); 
}

.btn.accent:hover {
  color: var(--button-conversion-hover-color);
  background: var(--button-conversion-hover-background);
  border: var(--button-conversion-hover-border); 
}

.btn.outlined {
  color: var(--gray800);
  border-style: solid;
  border-width: 1px;
  border-color: var(--gray700);
  background-color: transparent;
}

.btn.outlined:hover {
  border-color: var(--gray900);
  background-color: var(--gray50);
}

.button__icon,
.btn [class*="material-icons"] {
  font-size: var(--button-icon-font-size, var(--button-icon-font-size-base));
  margin-inline: calc(var(--button-gap) * -1);
}

.button__icon--left, .btn [class*="material-icons"] { margin-right: 0; }
.button__icon--right { margin-left: 0; }

.buttonGroup--sm,
.btn.small {
  --button-gap: var(--spacing1);
  --button-padding-block: var(--button-sm-padding-block);
  --button-padding-inline: var(--button-sm-padding-inline);
  --button-font-size: var(--text-sm);
  --button-line-height: 1.4;
  --button-icon-font-size: calc(var(--button-icon-font-size-base) * .833333);
}

.buttonGroup--lg,
.btn.large {
  --button-gap: var(--spacing2);
  --button-padding-block: var(--button-lg-padding-block);
  --button-padding-inline: var(--button-lg-padding-inline);
  --button-font-size: var(--text-lg);
  --button-line-height: 1.6;
  --button-icon-font-size: calc(var(--button-icon-font-size-base) * 1.166666);
}

/* ============= */
/* === LINKS === */
/* ============= */

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap, var(--spacing1));
  color: var(--link-color, var(--link-default-color));
  text-decoration: none;
}

a.link:hover {
  --link-color: var(--link-hover-color);
  --link-text-decoration: var(--link-hover-text-decoration);
}

a.link:active {
  --link-color: var(--link-active-color);
  --link-text-decoration: var(--link-active-text-decoration);
}

a.link:visited {color: var(--link-visited-color, var(--link-default-color));}

a.link[aria-disabled="true"], .link.disabled {
  --link-color: var(--link-disabled-color);
  pointer-events: none;
}

.link__label { text-decoration: var(--link-text-decoration, var(--link-default-text-decoration)); }
.link__icon { font-size: 1.5em; }

.buttonGroup .link {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
}

.buttonGroup .link__icon {
  font-size: var(--button-icon-font-size, var(--button-icon-font-size-base));
  margin-inline: calc(var(--spacing2) * -1); 
}

.buttonGroup .link__icon--left { margin-right: 0; }
.buttonGroup .link__icon--right { margin-left: 0; }

@media (576px <= width) {
  .buttonGroup .link:not(:first-child) { margin-left: var(--spacing1); }
}

/* ================== */
/* === PAGINATION === */
/* ================== */

.pagination,
.pagination__pageList {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing2);
}
.pagination {
	justify-content: space-between;
	padding-block: calc(var(--section-padding-block) / 2);
}
.pagination--alignmentCenter {
	justify-content: center;
}
.pagination__pageList { justify-content: center; }
ul.pagination__pageList,
ul.pagination__pageList > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.paginationItem {
	--button-gap: var(--spacing1-5);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--button-gap);
	margin: 0;
	padding-block: var(--button-padding-block, var(--button-md-padding-block));
	padding-inline: var(--button-padding-inline, var(--button-md-padding-inline));
	font: inherit;
	font-family: var(--button-font-family, inherit);
	font-family: var(--button-font-family, inherit);
	font-size: var(--button-font-size, inherit);
	font-weight: var(--button-font-weight, var(--text-default));
	letter-spacing: inherit;
	text-decoration: none;
	line-height: var(--button-line-height, 1.5);
	color: var(--pagination-item-default-color, var(--shade-text)) !important;
	background: var(--pagination-item-default-background, transparent);
	border-radius: var(--button-radius, var(--radius0));
	transition-property: color, background-color;
	transition-duration: var(--transition-duration-xs, var(--transition-duration0)); 
}

.paginationItem__icon {
	font-size: var(--button-icon-font-size, var(--button-icon-font-size-base));
	margin-inline: calc(var(--button-gap)* -1);
}

.paginationItem__icon svg { display: block; }

.paginationItem__icon--left { margin-right: 0; }
.paginationItem__icon--right { margin-left: 0; }

[href].paginationItem:focus-visible {
	outline: none;
	background: var(--gray0);
	box-shadow: 0 0 0 var(--spacing1) var(--brand100);
}

[href].paginationItem:hover {
	color: var(--pagination-item-hover-color) !important;
	background: var(--pagination-item-hover-background, var(--gray100));
	border: var(--pagination-item-hover-border);
}

[href].paginationItem:active {
	color: var(--pagination-item-active-color) !important;
	background: var(--pagination-item-active-background, var(--gray200));
	border: var(--pagination-item-active-border);
}

.paginationItem--prev:not([href]),
.paginationItem--next:not([href]) {
	color: var(--pagination-item-disabled-color, var(--gray300)) !important;
}

.pagination__pageList .paginationItem:not([href]) {
	background: var(--pagination-item-selected-background, var(--gray200));
}

.pagination--primary .paginationItem {
	--pagination-item-default-color: var(--pagination-item-primary-default-color, var(--brand500));
	--pagination-item-default-background: var(--pagination-item-primary-default-background, transparent);
	--pagination-item-default-border: var(--pagination-item-primary-default-border, none);
	--pagination-item-hover-color: var(--pagination-item-primary-hover-color, var(--brand500));
	--pagination-item-hover-background: var(--pagination-item-primary-hover-background, var(--brand50));
	--pagination-item-hover-border: var(--pagination-item-primary-hover-border, none);
	--pagination-item-active-color: var(--pagination-item-primary-active-color, var(--brand500));
	--pagination-item-active-background: var(--pagination-item-primary-active-background, var(--brand200));
	--pagination-item-active-border: var(--pagination-item-primary-active-border, none);
	--pagination-item-selected-color: var(--pagination-item-primary-selected-color, var(--brand500));
	--pagination-item-selected-background: var(--pagination-item-primary-selected-background, var(--brand100));
	--pagination-item-selected-border: var(--pagination-item-primary-selected-border, none);
	--pagination-item-disabled-color: var(--pagination-item-primary-disabled-color, var(--gray300));
	--pagination-item-disabled-background: var(--pagination-item-primary-disabled-background, transparent);
	--pagination-item-disabled-border: var(--pagination-item-primary-disabled-border, none);
}

@media (width < 576px) {
	.paginationItem--prev .paginationItem__icon--left,
	.paginationItem--next .paginationItem__icon--right {
		display: none;
	}
	.paginationItem--prev .paginationItem__label,
	.paginationItem--next .paginationItem__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		white-space: nowrap;
		overflow: hidden;
	}
}

@media (576px <= width) {
	.paginationItem--prev .paginationItem__icon:not(.paginationItem__icon--left),
	.paginationItem--next .paginationItem__icon:not(.paginationItem__icon--right) {
		display: none;
	}
}

/* =========== */
/* === TAG === */
/* =========== */

.tag {  
  --tag-sm-padding-block: var(--spacing0-5);
  --tag-sm-padding-inline: var(--spacing1-5);
  --tag-sm-padding-icon-only: var(--tag-sm-padding-block);
  --tag-sm-gap: var(--spacing0-5);
  --tag-sm-font-size:var(--text-xs);
  --tag-sm-line-height: .75rem;
  --tag-sm-icon-font-size: calc(var(--tag-sm-font-size) * 1);  

  --tag-md-padding-block: var(--spacing0-5);
  --tag-md-padding-inline: var(--spacing2-5);
  --tag-md-padding-icon-only: var(--tag-md-padding-block);
  --tag-md-gap: var(--spacing-base);
  --tag-md-font-size: var(--text-sm);
  --tag-md-line-height: 1.125rem;
  --tag-md-icon-font-size: calc(var(--tag-md-font-size) * 1.4); 

  --tag-lg-padding-block: var(--spacing0-5);
  --tag-lg-padding-inline: var(--spacing3);
  --tag-lg-padding-icon-only: var(--tag-lg-padding-block);
  --tag-lg-gap: var(--spacing1-5);
  --tag-lg-font-size:var(--text-md);
  --tag-lg-line-height: 1.5rem;
  --tag-lg-icon-font-size: calc(var(--tag-lg-font-size) * 1.5); 
}

/* Tags container */

.tagGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--text-list-gap-sm);
}

ul.tagGroup {
  margin-block: 0;
  padding-left: 0;
  list-style: none;
}

/* Default tag */

.tag {
  --tag-gap: var(--tag-md-gap);
  display: flex;
  align-items: center;
  gap: var(--tag-gap, var(--tag-md-gap));
  padding-inline: var(--tag-padding-inline, var(--tag-md-padding-inline));
  padding-block: var(--tag-padding-block, var(--tag-md-padding-block));
  font-size: var(--tag-font-size, var(--tag-md-font-size));
  line-height: var(--tag-line-height, var(--tag-md-line-height));
  text-decoration: none;
  color: var(--tag-default-color, var(--gray0));
  background: var(--tag-default-background, var(--gray800));
  border: var(--tag-default-border, none);
  border-radius: var(--tag-radius);
}

/* Icons */

.tag__icon {
  font-size: var(--tag-icon-font-size, var(--tag-md-icon-font-size));
  margin-inline: calc(var(--tag-gap) * -1); 
}

.tag__icon--left { margin-right: 0; }
.tag__icon--right { margin-left: 0; }

/* States */

a.tag:hover {
  color: var(--tag-hover-color, var(--gray0));
  background: var(--tag-hover-background, var(--gray700));
  border: var(--tag-hover-border, none);
}

a.tag:active {
  color: var(--tag-active-color, var(--gray0));
  background: var(--tag-active-background, var(--gray900));
  border: var(--tag-active-border, none);
}

a.tag:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--spacing1) var(--brand100); 
}

/* Hierarchy */

.tag--primary {
  --tag-default-color: var(--tag-primary-default-color);
  --tag-default-background: var(--tag-primary-default-background);
  --tag-default-border: var(--tag-primary-default-border);
  --tag-hover-color: var(--tag-primary-hover-color);
  --tag-hover-background: var(--tag-primary-hover-background);
  --tag-hover-border: var(--tag-primary-hover-border);
  --tag-active-color: var(--tag-primary-active-color);
  --tag-active-background: var(--tag-primary-active-background);
  --tag-active-border: var(--tag-primary-active-border);
}

.tag--conversion {
  --tag-default-color: var(--tag-conversion-default-color);
  --tag-default-background: var(--tag-conversion-default-background);
  --tag-default-border: var(--tag-conversion-default-border);
  --tag-hover-color: var(--tag-conversion-hover-color);
  --tag-hover-background: var(--tag-conversion-hover-background);
  --tag-hover-border: var(--tag-conversion-hover-border);
  --tag-active-color: var(--tag-conversion-active-color);
  --tag-active-background: var(--tag-conversion-active-background);
  --tag-active-border: var(--tag-conversion-active-border);
}

.tag--info {
  --tag-default-color: var(--tag-info-default-color);
  --tag-default-background: var(--tag-info-default-background);
  --tag-default-border: var(--tag-info-default-border);
  --tag-hover-color: var(--tag-info-hover-color);
  --tag-hover-background: var(--tag-info-hover-background);
  --tag-hover-border: var(--tag-info-hover-border);
  --tag-active-color: var(--tag-info-active-color);
  --tag-active-background: var(--tag-info-active-background);
  --tag-active-border: var(--tag-info-active-border);
}

/* Size */

.tag--sm {
  --tag-gap: var(--tag-sm-gap);
  --tag-padding-inline: var(--tag-sm-padding-inline);
  --tag-padding-block: var(--tag-sm-padding-block);
  --tag-font-size: var(--tag-sm-font-size);
  --tag-line-height: var(--tag-sm-line-height);
}

.tag--sm .tag__icon {
  --tag-icon-font-size: var(--tag-sm-icon-font-size);
}

.tag--lg {
  --tag-gap: var(--tag-lg-gap);
  --tag-padding-inline: var(--tag-lg-padding-inline);
  --tag-padding-block: var(--tag-lg-padding-block);
  --tag-font-size: var(--tag-lg-font-size);
  --tag-line-height: var(--tag-lg-line-height);
}

.tag--lg .tag__icon {
  --tag-icon-font-size: var(--tag-lg-icon-font-size);
}

/* ============================ */
/* === CARROUSEL PAGINATION === */
/* ============================ */
 
/* Reset Slick */
.slick-slider,
.slick-slider.slick-dotted {
  margin: 0;
}

.slick-dots,
.slick-dots li,
.slick-dots li button,
.slick-dots li button .slick-dot-icon,
.slick-dots li button .slick-dot-icon::before {
  all: revert;
}

.slick-dots,
.slick-dots li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slick-dots li button {
  border: none;
  background: transparent;
}
/* End of reset Slick */

.slick-dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing2);
  margin-block: var(--spacing2);
}

.slick-dots:first-child { margin-top: 0; }
.slick-dots:last-child { margin-bottom: 0; }

.slick-dots li {
  display: block;
  line-height: 0;
}

.slick-dots li button { color: var(--brand100); }
.slick-dots li.slick-active button { color: var(--brand500) !important; }

.slick-dots li button .slick-dot-icon,
.slick-dots li button .slick-dot-icon::before {
  color: inherit !important;
}

.slick--dots .slick-dots li button { padding: var(--spacing4); }
.slick--pagers .slick-dots li button { padding: var(--spacing4) var(--spacing0-5); }

.slick-dots li button .slick-dot-icon::before {
  display: block;
  margin: 0 !important;
  padding: 0;
  content: '';
  background-color: currentColor;
}

.slick--dots .slick-dots li button .slick-dot-icon::before {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.slick--pagers .slick-dots li,
.slick--pagers .slick-dots li button,
.slick--pagers .slick-dots li button .slick-dot-icon,
.slick--pagers .slick-dots li button .slick-dot-icon::before {
  width: 100%;
}

.slick--pagers .slick-dots li button .slick-dot-icon::before { height: 8px; }

@media (pointer: fine) {
  .slick-dots li button {
    transition-property: color;
    transition-duration: .3s;
  }

  .slick-dots li button:hover { color: var(--brand50); }
  .slick-dots li button:active { color: var(--brand200); }
  .slick-dots li.slick-active button:hover { color: var(--brand400); }
  .slick-dots li.slick-active button:active { color: var(--brand600); }
  .slick--dots .slick-dots li button { padding: var(--spacing2); }
  .slick--pagers .slick-dots li button { padding: var(--spacing1); }
  .slick--pagers .slick-dots li button .slick-dot-icon::before { height: 4px; }
}


/* ============ */
/* === CARD === */
/* ============ */

.card { 
  --card-padding: var(--component-padding-md);
  position: relative;
  display: flex!important;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--card-gap);
  min-height: 100%;  
  box-sizing: border-box;
  color: var(--card-text-color);
  background-color: var(--card-background-color);
  border-radius: var(--card-radius);
}

/* card image */
.card__image {  
  position: relative;
  max-width: 100%;
}

.card__image img {
  display: block;
  aspect-ratio: var(--image-aspect-ratio);
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.card--imageSizeContained .card__image img {border-radius: var(--card-inner-img-radius);}

.card--directionVertical.card--imageSizeFullWidth .card__image img {
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}

.card--directionHorizontal.card--imageSizeFullWidth .card__image img {
  border-top-left-radius: var(--card-radius);
  border-bottom-left-radius: var(--card-radius);
}

.card--directionVertical.card--imageSizeFullWidth.card--imagePositionReverse .card__image img {
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}

.card--directionHorizontal.card--imageSizeFullWidth.card--imagePositionReverse .card__image img {
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
}

/* card content */
.card__content {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--card-gap);
  z-index: 1;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--card-gap);
  max-width: 100%;
  text-align: var(--text-content-align, left);
}

.card__content--center {--text-content-align: center;}

.card__content--center .card__details,
.card__content--center .buttonGroup {
  justify-content: center;
}

.card__body .paragraph__title a:not(.button) {
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

/* direction : vertical
   direction : horizontal */

.card--imagePositionReverse,
.card--directionHorizontal.card--imagePositionReverse {
  flex-direction: column-reverse;
}   

@media screen and (768px <= width) {
  .card--directionHorizontal {
    flex-direction: row;
    max-width: 100%;
  }

  .card--directionHorizontal.card--imagePositionReverse {flex-direction: row-reverse;}

  .card--directionHorizontal .card__image {
    flex-basis: var(--card-horizontal-image-width);
    width: var(--card-horizontal-image-width);
  }
  
  .card--directionHorizontal .card__content {
    flex-basis: var(--card-horizontal-content-width);
    width: var(--card-horizontal-content-width);
  }
}

/* content : contained
OR Image size : Contained */

.card--contentSizeContained,
.card--imageSizeContained {
  gap: 0;
}

.card--contentSizeContained .card__content, 
.card--imageSizeContained .card__image {
  padding: var(--card-padding);
}

/*  content : contained
AND Image size : Contained */

.card--contentSizeContained.card--imageSizeContained {
  gap: var(--card-gap);
  padding: var(--card-padding);
}

.card--contentSizeContained.card--imageSizeContained .card__content, 
.card--contentSizeContained.card--imageSizeContained .card__image {
  padding: 0;
}

/* content : Full width*/
.card.card--contentSizeFullWidth {--card-background-color: transparent;}

/* image : background */
.card--imageSizeBackground .card__image {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: inherit;
}

.card--imageSizeBackground .card__image::before {
  content: "";
  background: var(--image-background-overlay);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card--imageSizeBackground .card__image img {border-radius: inherit;}

.card--imageSizeBackground .card__content {
  position: relative;
  color: var(--image-background-text-color);
}

.card--imageSizeBackground .card__content a {color: var(--image-background-text-color);}
.card--imageSizeBackground .card__body {justify-content: flex-end;}


/* card details */

.card__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: var(--paragraph-gap-md);
}

.card__detailsItem {
  display: flex;
  align-items: center;
  gap: var(--text-icon-gap-sm);
}

/* card details in card image */

.card__image .card__details {
  position: absolute;  
  left: var(--card-padding);
  right: var(--card-padding);
  width: calc(100% - (2 * var(--card-padding)));
}

.card__image  .card__details--top {top: var(--card-padding);}
.card__image .card__details--bottom {bottom: var(--card-padding);}

/* card footer */

.card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  max-width: 100%;
  text-align: var(--text-content-align, left);
}

/* card : clickable */

.card--clickable .paragraph__title a::after,
.card--clickable .card__image a::after,
.card--clickable .card__footer .buttonGroup a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.card--clickable .paragraph__title a::after {z-index: 2;}

/* ================== */
/* === CARDS LIST === */
/* ================== */

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

.cardsList,
.cardsList__carrousel {
  padding-left: 0;
  margin-block: 0;
}


/* direction : vertical */

.cardsList--directionVertical {
  grid-template-columns: 1fr;
}

/* direction : grid */

.cardsList--directionGrid {
  grid-template-columns: repeat(var(--grid-columns), minmax(auto, 1fr));
}

.cardsList--directionGrid .card,
.cardsList--directionGrid .testimonial-card {
  grid-column: span var(--card-column, 3);
}

.cardsList--col6 {--card-column: 2;}  /* 6 colonnes */
.cardsList--col4 {--card-column: 3;}  /* 4 colonnes */
.cardsList--col3 {--card-column: 4;}  /* 3 colonnes */
.cardsList--col2 {--card-column: 6;}  /* 2 colonnes */
.cardsList--col1 {--card-column: 12;} /* 1 colonne */

@media screen and (width < 768px) {
  .cardsList--directionGrid .card,
  .cardsList--directionGrid .testimonial-card {
      --card-column: 6;
  }
}

@media screen and (width < 992px) {
  .cardsList--directionGrid.cardsList--col1 .card,
  .cardsList--directionGrid.cardsList--col1 .testimonial-card {
      --card-column: 6;
  }
}

@media screen and (768px <= width < 992px) {
  .cardsList--directionGrid:not(.cardsList--col1) .card,
  .cardsList--directionGrid:not(.cardsList--col1) .testimonial-card {
      --card-column: 3;
  }
}

/* direction : carrousel */
.cardsList--directionCarrousel,
.cardsList--mobileCarrousel.slick-slider {
  display: block;
  margin-inline: calc(calc(-1 * (var(--grid-gutter) / 2)));
}

.cardsList--directionCarrousel .slick-slide > div,
.cardsList--mobileCarrousel.slick-slider .slick-slide > div {
  padding-inline: calc(var(--grid-gutter) / 2);
}

.cardsList--directionCarrousel .slick-dots, 
.cardsList--mobileCarrousel.slick-slider .slick-dots {
  margin-top: var(--section-gap-sm);
}

.cardsList--directionCarrousel .slick-prev,
.cardsList--directionCarrousel .slick-next {
  display: none;
}

.cardsList__carrousel .slick-track,
.cardsList--mobileCarrousel .slick-track {
  display: flex;
}

.cardsList__carrousel .slick-slide,
.cardsList--mobileCarrousel .slick-slide {
  height: auto;
}

.cardsList__carrousel .slick-slide > div,
.cardsList--mobileCarrousel .slick-slide > div {
  height: 100%;
}


@media screen and (992px <= width) /* and (pointer: fine) */ {
  .cardsList--directionCarrousel {position: relative;}

  .cardsList--directionCarrousel .slick-prev,
  .cardsList--directionCarrousel .slick-next {
    position: absolute;  
    top: 50%;
    display: flex;
  }

  .cardsList--directionCarrousel .slick-prev {
    transform: translate(-100%, -50%);
    left: calc(-1 * (var(--grid-gutter) / 2));
  }

  .cardsList--directionCarrousel .slick-next {
    transform: translate(100%, -50%);
    right: calc(-1 * (var(--grid-gutter) / 2));
  }
}

/* ============ */
/* === ICON === */
/* ============ */

:root {
  --icon16: 16px;
  --icon18: 18px;
  --icon20: 20px;
  --icon24: 24px;
  --icon32: 32px;
  --icon40: 40px;
  --icon48: 48px;
}

.icon--16, 
.icon--18, 
.icon--20, 
.icon--24, 
.icon--32, 
.icon--40, 
.icon--48 {
  display: block;
}

.icon--16 { font-size: var(--icon16); }
.icon--18 { font-size: var(--icon18); }
.icon--20 { font-size: var(--icon20); }
.icon--24 { font-size: var(--icon24); }
.icon--32 { font-size: var(--icon32); }
.icon--40 { font-size: var(--icon40); }
.icon--48 { font-size: var(--icon48); }

/* ============= */
/* === IMAGE === */
/* ============= */

.image--16, 
.image--18, 
.image--20, 
.image--24, 
.image--32, 
.image--40, 
.image--48, 
.image--60, 
.image--80, 
.image--100 {
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
} 

.image--16 { width: 16px; }
.image--18 { width: 18px; }
.image--20 { width: 20px; }
.image--24 { width: 24px; }
.image--32 { width: 32px; }
.image--40 { width: 40px; }
.image--48 { width: 48px; }
.image--60 { width: 60px; }
.image--80 { width: 80px; }
.image--100 { width: 100px; }

.image--fill {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* =================== */
/* === TEXT - ICON === */
/* =================== */

.textIcon {
  --text-icon-sm-icon-size: var(--icon16);
  --text-icon-md-icon-size: var(--icon20);
  --text-icon-lg-icon-size: var(--icon24);
  --text-icon-sm-font-size: var(--text-sm);
  --text-icon-md-font-size: var(--text-md);
  --text-icon-lg-font-size: var(--text-lg);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: var(--text-icon-gap, var(--text-icon-gap-md));
}

.textIcon__media {
  font-size: var(--text-icon-icon-size, var(--text-icon-md-icon-size));
}

.textIcon__text {
  font-size: var(--text-icon-font-size, var(--text-icon-md-font-size));
  line-height: var(--text-icon-icon-size, var(--text-icon-md-icon-size));
}

.textIcon--sm {
  --text-icon-gap: var(--text-icon-gap-sm);
  --text-icon-icon-size: var(--text-icon-sm-icon-size);
  --text-icon-font-size: var(--text-icon-sm-font-size);
}

.textIcon--lg {
  --text-icon-gap: var(--text-icon-gap-lg);
  --text-icon-icon-size: var(--text-icon-lg-icon-size);
  --text-icon-font-size: var(--text-icon-lg-font-size);
}

/* ========================== */
/* === LIST - TEXT - ICON === */
/* ========================== */

.listTextIcon {  
  --list-text-icon-sm-gap: var(--text-list-gap-sm);
  --list-text-icon-md-gap: var(--text-list-gap-md);
  --list-text-icon-lg-gap: var(--text-list-gap-lg);
  display: grid;
  gap: var(--list-text-icon-gap, var(--list-text-icon-md-gap));
  width: fit-content;
  padding-left: 0;
  margin-block: var(--paragraph-gap-md);
}

/* Size */
.listTextIcon--sm {--list-text-icon-gap: var(--list-text-icon-sm-gap);}
.listTextIcon--lg {--list-text-icon-gap: var(--list-text-icon-lg-gap);}

/* Grid */
.listTextIcon--col2 {grid-template-columns: repeat(2, 1fr);} /* 2 colonnes */
.listTextIcon--col3 {grid-template-columns: repeat(3, 1fr);} /* 3 colonnes */
.listTextIcon--col4 {grid-template-columns: repeat(4, 1fr);} /* 4 colonnes */
.listTextIcon--col5 {grid-template-columns: repeat(5, 1fr);} /* 5 colonnes */

/* ================= */
/* === PARAGRAPH === */
/* ================= */

.paragraph,
.paragraph__title,
.paragraph__content {
  display: flex;
  flex-direction: column;
}

.paragraph {  
  --paragraph-gap: var(--paragraph-gap-md);   
  gap: var(--paragraph-gap);
}

.paragraph__title,
.paragraph__content {
  --paragraph-inner-gap: var(--paragraph-gap-sm);
  gap: var(--paragraph-inner-gap);
}


.paragraph__title :where(h1, h2, h3, h4, h5, h6, p) {margin-block: 0;}
.paragraph__text p:only-child {margin-block: 0;}
.paragraph__text p:first-child {margin-top: 0;}
.paragraph__text p:last-child {margin-bottom: 0;}

/* =========================================================== */
/* === ADAPTATION TEXTBLOCK V1 DYNAMIQUE ET PAGES INTERNES === */
/* =========================================================== */

.textBlock :where(h1, h2, h3, h4, h5, h6, p) {margin-block: 0;}
.textBlock > p:only-child {margin-block: 0;}
.textBlock > p:first-child {margin-top: 0;}
.textBlock > p:last-child {margin-bottom: 0;}

.paragraph__text :where(h1, h2, h3, h4, h5, h6, p) {
  margin-block: var(--paragraph-gap-md);
}

.paragraph__text :where(h1, h2, h3, h4, h5, h6, p):first-child {
  margin-top: 0;
}

h2:not(.textBlock h2),
h3:not(.textBlock h3),
h4:not(.textBlock h4),
h5:not(.textBlock h5),
h6:not(.textBlock h6) {
  margin-top: 0;
  margin-bottom: var(--paragraph-gap-md);
}

h1:not(.textBlock h1) {margin-bottom: var(--paragraph-gap-md);}
p {margin-block: var(--paragraph-gap-md);}
p:first-child {margin-top: 0;}
h1 span, .title-1 span {margin-bottom: var(--paragraph-gap-md);}

/* Alignment */

.paragraph--center {text-align: center;}

.paragraph--center .textIcon,
.paragraph--center .listTextIcon {
  margin-inline: auto;
}

.paragraph .listTextIcon {margin-block: 0;}

/* ==================== */
/* === TEXT - BLOCK === */
/* ==================== */

.textBlock,
.textBlock__col {
  --text-block-gap: var(--paragraph-gap-lg); 
  display: flex;
  flex-direction: column;    
  gap: var(--text-block-gap);
}

/* Alignment */

.textBlock--center .paragraph {text-align: center;}

.textBlock--center .paragraph .textIcon,
.textBlock--center .paragraph .listTextIcon {
  margin-inline: auto;
}

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

@media screen and (768px <= width) {
  .textBlock--offset {
    flex-direction: row;
    gap: var(--grid-gutter);
  }
}

/* ======================= */
/* === CONTACT - INFOS === */
/* ======================= */

.contactInfos {
  display: flex;
  flex-direction: column;
  gap: var(--spacing2);
}

.contactInfos__title :where(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
.contactInfos__textIcon {align-items: flex-start;}
.contactInfos--schedulePeriod td {padding-block: 0;}

.contactInfos__textIcon ul.textIcon__text {
  margin-block: 0;
  padding-left: 0;
  list-style: none;    
}

@media screen and (width < 500px) {
  .contactInfos--schedulePeriod tr {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing1);
  }

  .contactInfos--address a span {display: block;}
}

/* ============================== */
/* === CONTACT - INFOS - LIST === */
/* ============================== */

address.contactInfosList {
  margin-block: 0;
  font-style: inherit;
}

.contactInfosList > ul,
.contactInfosList > ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contactInfosList > ul {
  display: flex;
  flex-direction: column;
  gap: var(--contact-infos-list-gap);
}

@media (992px <= width) {
  .contactInfosList--directionHorizontal > ul { flex-direction: row; }
}

/* ======================== */
/* === BACKGROUND BLOCK === */
/* ======================== */

.backgroundBlock {
  background: var(--background);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  grid-column: var(--col-start, columns-start) / var(--col-end, columns-end);
  grid-row: var(--row-start, rows-start) / var(--row-end, rows-end);  
}

.backgroundBlock--overlay::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;  
  background: var(--overlay-background);
  opacity: var(--overlay-opacity);
}

.backgroundBlock--overlay + .container {position: relative;}

/* ========================= */
/* === SOCIAL LINKS LIST === */
/* ========================= */

.socialLinkList,
.socialLinkList li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.socialLinkList {
  display: flex;
  justify-content: center;
  gap: var(--text-list-gap-sm);
}

.socialLinkList a.RS {
  display: block;
  padding: calc(var(--spacing2) - 1px);
  line-height: 0;
}

.socialLinkList a.RS svg {
  display: block;
  pointer-events: none;
}

@media screen and (992px <= width) {
  .socialLinkList { gap: var(--text-list-gap-md); }
  .socialLinkList a.RS { padding: 0; }
}

/* ================== */
/* === IMAGE TEXT === */
/* ================== */

.imageText {
  --image-text-gap: var(--paragraph-gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--image-text-gap);
}

.imageText .paragraph {--paragraph-gap: var(--paragraph-gap-sm);}
.imageText .paragraph__title [class^="display"] {margin-bottom: 0;}

.imageText--directionHorizontal {
  flex-direction: row;
  align-items: flex-start;
}

.imageText--alignmentCenter {align-items: center;}
.imageText--alignmentCenter.imageText--directionVertical .paragraph {text-align: center;}

.imageText--imageSizeFill .imageText__media {width: 100%;}

/* ============== */
/* === IMAGES === */
/* ============== */

.html-block img:not(.textIcon img):not(.imageText img):not(.card__image img),
.sc-content img {
  border-radius: var(--img-radius, 0);
}

.textIcon__media,
.imageText__media,
.icon {
  border-radius: var(--icon-radius, 0);
}

/* ============= */
/* === FORMS === */
/* ============= */

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea {
  border-radius: var(--input-radius, 0);
}

/* ======================== */
/* === TESTIMONIAL CARD === */
/* ======================== */

.testimonialCard:not(.testimonialCard--alignmentLeft) {text-align: center;}
.testimonialCard:not(.testimonialCard--alignmentLeft) img {margin-inline: auto;}

.testimonialCard__header {
  display: flex;
  align-items: flex-start;
  gap: var(--card-gap);
}

.testimonialCard:not(.testimonialCard--alignmentLeft) .testimonialCard__header {
  flex-direction: column;
  align-items: center;
}

.testimonialCard__avatar {height: fit-content;}

.testimonialCard__user {  
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing1);
}

.testimonialCard__user p:not(.textBlock p) {margin-block: 0;}
.testimonialCard__name {flex-basis: 100%;}

.testimonialCard--alignmentLeft .testimonialCard__user {  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--card-gap);
}

.testimonialCard--alignmentLeft .testimonialCard__button {text-align: right;}

.testimonialCard__button.show-more.link {
  padding: 0;
  border: none;
  background: none;
}

@media screen and (992px <= width) {
  .testimonialCard--alignmentLeft .testimonialCard__comment {padding-left: calc(56px + (var(--card-gap)));}
}

/* ===================== */
/* === GOOGLE RATING === */
/* ===================== */

.googleRating {
  --star-color: #FEC84B;
  width: fit-content;
  background: var(--gray100);
}

.googleRating .card__content {gap: var(--paragraph-gap-sm);}
.googleRating p:not(.textBlock p) {margin-block: 0;}

.googleRating__stars {
  display: flex;
  gap: 1px;
}

.star {
  position: relative;
  color: #EEF2F6;
}

.star:before {
  content: '\e885';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 24px;
  line-height: 24px;
  background: linear-gradient(90deg, var(--star-color) calc(var(--percentage, 100) * 1%), transparent calc(var(--percentage, 100) * 1%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;  
}

/* ============== */
/* === MARGIN === */
/* ============== */

/* Margin top */
.mt-0 { margin-top: var(--spacing0); }
.mt-0-5 { margin-top: var(--spacing0-5); }
.mt-1 { margin-top: var(--spacing1); }
.mt-1-5 { margin-top: var(--spacing1-5); }
.mt-2 { margin-top: var(--spacing2); }
.mt-2-5 { margin-top: var(--spacing2-5); }
.mt-3 { margin-top: var(--spacing3); }
.mt-3-5 { margin-top: var(--spacing3-5); }
.mt-4 { margin-top: var(--spacing4); }
.mt-4-5 { margin-top: var(--spacing4-5); }
.mt-5 { margin-top: var(--spacing5); }
.mt-6 { margin-top: var(--spacing6); }
.mt-7 { margin-top: var(--spacing7); }
.mt-8 { margin-top: var(--spacing8); }
.mt-10 { margin-top: var(--spacing10); }
.mt-12 { margin-top: var(--spacing12); }
.mt-14 { margin-top: var(--spacing14); }
.mt-16 { margin-top: var(--spacing16); }
.mt-20 { margin-top: var(--spacing20); }
.mt-24 { margin-top: var(--spacing24); }
.mt-30 { margin-top: var(--spacing30); }
.mt-32 { margin-top: var(--spacing32); }
.mt-40 { margin-top: var(--spacing40); }
.mt-48 { margin-top: var(--spacing48); }
.mt-56 { margin-top: var(--spacing56); }
.mt-64 { margin-top: var(--spacing64); }

/* Margin bottom */
.mb-0 { margin-bottom: var(--spacing0); }
.mb-0-5 { margin-bottom: var(--spacing0-5); }
.mb-1 { margin-bottom: var(--spacing1); }
.mb-1-5 { margin-bottom: var(--spacing1-5); }
.mb-2 { margin-bottom: var(--spacing2); }
.mb-2-5 { margin-bottom: var(--spacing2-5); }
.mb-3 { margin-bottom: var(--spacing3); }
.mb-3-5 { margin-bottom: var(--spacing3-5); }
.mb-4 { margin-bottom: var(--spacing4); }
.mb-4-5 { margin-bottom: var(--spacing4-5); }
.mb-5 { margin-bottom: var(--spacing5); }
.mb-6 { margin-bottom: var(--spacing6); }
.mb-7 { margin-bottom: var(--spacing7); }
.mb-8 { margin-bottom: var(--spacing8); }
.mb-10 { margin-bottom: var(--spacing10); }
.mb-12 { margin-bottom: var(--spacing12); }
.mb-14 { margin-bottom: var(--spacing14); }
.mb-16 { margin-bottom: var(--spacing16); }
.mb-20 { margin-bottom: var(--spacing20); }
.mb-24 { margin-bottom: var(--spacing24); }
.mb-30 { margin-bottom: var(--spacing30); }
.mb-32 { margin-bottom: var(--spacing32); }
.mb-40 { margin-bottom: var(--spacing40); }
.mb-48 { margin-bottom: var(--spacing48); }
.mb-56 { margin-bottom: var(--spacing56); }
.mb-64 { margin-bottom: var(--spacing64); }

/* Margin left */
.ml-0 { margin-left: var(--spacing0); }
.ml-0-5 { margin-left: var(--spacing0-5); }
.ml-1 { margin-left: var(--spacing1); }
.ml-1-5 { margin-left: var(--spacing1-5); }
.ml-2 { margin-left: var(--spacing2); }
.ml-2-5 { margin-left: var(--spacing2-5); }
.ml-3 { margin-left: var(--spacing3); }
.ml-3-5 { margin-left: var(--spacing3-5); }
.ml-4 { margin-left: var(--spacing4); }
.ml-4-5 { margin-left: var(--spacing4-5); }
.ml-5 { margin-left: var(--spacing5); }
.ml-6 { margin-left: var(--spacing6); }
.ml-7 { margin-left: var(--spacing7); }
.ml-8 { margin-left: var(--spacing8); }
.ml-10 { margin-left: var(--spacing10); }
.ml-12 { margin-left: var(--spacing12); }
.ml-14 { margin-left: var(--spacing14); }
.ml-16 { margin-left: var(--spacing16); }
.ml-20 { margin-left: var(--spacing20); }
.ml-24 { margin-left: var(--spacing24); }
.ml-30 { margin-left: var(--spacing30); }
.ml-32 { margin-left: var(--spacing32); }
.ml-40 { margin-left: var(--spacing40); }
.ml-48 { margin-left: var(--spacing48); }
.ml-56 { margin-left: var(--spacing56); }
.ml-64 { margin-left: var(--spacing64); }

/* Margin right */
.mr-0 { margin-right: var(--spacing0); }
.mr-0-5 { margin-right: var(--spacing0-5); }
.mr-1 { margin-right: var(--spacing1); }
.mr-1-5 { margin-right: var(--spacing1-5); }
.mr-2 { margin-right: var(--spacing2); }
.mr-2-5 { margin-right: var(--spacing2-5); }
.mr-3 { margin-right: var(--spacing3); }
.mr-3-5 { margin-right: var(--spacing3-5); }
.mr-4 { margin-right: var(--spacing4); }
.mr-4-5 { margin-right: var(--spacing4-5); }
.mr-5 { margin-right: var(--spacing5); }
.mr-6 { margin-right: var(--spacing6); }
.mr-7 { margin-right: var(--spacing7); }
.mr-8 { margin-right: var(--spacing8); }
.mr-10 { margin-right: var(--spacing10); }
.mr-12 { margin-right: var(--spacing12); }
.mr-14 { margin-right: var(--spacing14); }
.mr-16 { margin-right: var(--spacing16); }
.mr-20 { margin-right: var(--spacing20); }
.mr-24 { margin-right: var(--spacing24); }
.mr-30 { margin-right: var(--spacing30); }
.mr-32 { margin-right: var(--spacing32); }
.mr-40 { margin-right: var(--spacing40); }
.mr-48 { margin-right: var(--spacing48); }
.mr-56 { margin-right: var(--spacing56); }
.mr-64 { margin-right: var(--spacing64); }

/* Margin inline (left and right) */
.mx-0 { margin-inline: var(--spacing0); }
.mx-0-5 { margin-inline: var(--spacing0-5); }
.mx-1 { margin-inline: var(--spacing1); }
.mx-1-5 { margin-inline: var(--spacing1-5); }
.mx-2 { margin-inline: var(--spacing2); }
.mx-2-5 { margin-inline: var(--spacing2-5); }
.mx-3 { margin-inline: var(--spacing3); }
.mx-3-5 { margin-inline: var(--spacing3-5); }
.mx-4 { margin-inline: var(--spacing4); }
.mx-4-5 { margin-inline: var(--spacing4-5); }
.mx-5 { margin-inline: var(--spacing5); }
.mx-6 { margin-inline: var(--spacing6); }
.mx-7 { margin-inline: var(--spacing7); }
.mx-8 { margin-inline: var(--spacing8); }
.mx-10 { margin-inline: var(--spacing10); }
.mx-12 { margin-inline: var(--spacing12); }
.mx-14 { margin-inline: var(--spacing14); }
.mx-16 { margin-inline: var(--spacing16); }
.mx-20 { margin-inline: var(--spacing20); }
.mx-24 { margin-inline: var(--spacing24); }
.mx-30 { margin-inline: var(--spacing30); }
.mx-32 { margin-inline: var(--spacing32); }
.mx-40 { margin-inline: var(--spacing40); }
.mx-48 { margin-inline: var(--spacing48); }
.mx-56 { margin-inline: var(--spacing56); }
.mx-64 { margin-inline: var(--spacing64); }

/* Margin block (top and bottom) */
.my-0 { margin-block: var(--spacing0); }
.my-0-5 { margin-block: var(--spacing0-5); }
.my-1 { margin-block: var(--spacing1); }
.my-1-5 { margin-block: var(--spacing1-5); }
.my-2 { margin-block: var(--spacing2); }
.my-2-5 { margin-block: var(--spacing2-5); }
.my-3 { margin-block: var(--spacing3); }
.my-3-5 { margin-block: var(--spacing3-5); }
.my-4 { margin-block: var(--spacing4); }
.my-4-5 { margin-block: var(--spacing4-5); }
.my-5 { margin-block: var(--spacing5); }
.my-6 { margin-block: var(--spacing6); }
.my-7 { margin-block: var(--spacing7); }
.my-8 { margin-block: var(--spacing8); }
.my-10 { margin-block: var(--spacing10); }
.my-12 { margin-block: var(--spacing12); }
.my-14 { margin-block: var(--spacing14); }
.my-16 { margin-block: var(--spacing16); }
.my-20 { margin-block: var(--spacing20); }
.my-24 { margin-block: var(--spacing24); }
.my-30 { margin-block: var(--spacing30); }
.my-32 { margin-block: var(--spacing32); }
.my-40 { margin-block: var(--spacing40); }
.my-48 { margin-block: var(--spacing48); }
.my-56 { margin-block: var(--spacing56); }
.my-64 { margin-block: var(--spacing64); }

/* Margin all sides */
.m-0 { margin: var(--spacing0); }
.m-0-5 { margin: var(--spacing0-5); }
.m-1 { margin: var(--spacing1); }
.m-1-5 { margin: var(--spacing1-5); }
.m-2 { margin: var(--spacing2); }
.m-2-5 { margin: var(--spacing2-5); }
.m-3 { margin: var(--spacing3); }
.m-3-5 { margin: var(--spacing3-5); }
.m-4 { margin: var(--spacing4); }
.m-4-5 { margin: var(--spacing4-5); }
.m-5 { margin: var(--spacing5); }
.m-6 { margin: var(--spacing6); }
.m-7 { margin: var(--spacing7); }
.m-8 { margin: var(--spacing8); }
.m-10 { margin: var(--spacing10); }
.m-12 { margin: var(--spacing12); }
.m-14 { margin: var(--spacing14); }
.m-16 { margin: var(--spacing16); }
.m-20 { margin: var(--spacing20); }
.m-24 { margin: var(--spacing24); }
.m-30 { margin: var(--spacing30); }
.m-32 { margin: var(--spacing32); }
.m-40 { margin: var(--spacing40); }
.m-48 { margin: var(--spacing48); }
.m-56 { margin: var(--spacing56); }
.m-64 { margin: var(--spacing64); }

@media screen and (min-width: 576px) {
  /* Margin top */
  .sm\:mt-0 { margin-top: var(--spacing0); }
  .sm\:mt-0-5 { margin-top: var(--spacing0-5); }
  .sm\:mt-1 { margin-top: var(--spacing1); }
  .sm\:mt-1-5 { margin-top: var(--spacing1-5); }
  .sm\:mt-2 { margin-top: var(--spacing2); }
  .sm\:mt-2-5 { margin-top: var(--spacing2-5); }
  .sm\:mt-3 { margin-top: var(--spacing3); }
  .sm\:mt-3-5 { margin-top: var(--spacing3-5); }
  .sm\:mt-4 { margin-top: var(--spacing4); }
  .sm\:mt-4-5 { margin-top: var(--spacing4-5); }
  .sm\:mt-5 { margin-top: var(--spacing5); }
  .sm\:mt-6 { margin-top: var(--spacing6); }
  .sm\:mt-7 { margin-top: var(--spacing7); }
  .sm\:mt-8 { margin-top: var(--spacing8); }
  .sm\:mt-10 { margin-top: var(--spacing10); }
  .sm\:mt-12 { margin-top: var(--spacing12); }
  .sm\:mt-14 { margin-top: var(--spacing14); }
  .sm\:mt-16 { margin-top: var(--spacing16); }
  .sm\:mt-20 { margin-top: var(--spacing20); }
  .sm\:mt-24 { margin-top: var(--spacing24); }
  .sm\:mt-30 { margin-top: var(--spacing30); }
  .sm\:mt-32 { margin-top: var(--spacing32); }
  .sm\:mt-40 { margin-top: var(--spacing40); }
  .sm\:mt-48 { margin-top: var(--spacing48); }
  .sm\:mt-56 { margin-top: var(--spacing56); }
  .sm\:mt-64 { margin-top: var(--spacing64); }

  /* Margin bottom */
  .sm\:mb-0 { margin-bottom: var(--spacing0); }
  .sm\:mb-0-5 { margin-bottom: var(--spacing0-5); }
  .sm\:mb-1 { margin-bottom: var(--spacing1); }
  .sm\:mb-1-5 { margin-bottom: var(--spacing1-5); }
  .sm\:mb-2 { margin-bottom: var(--spacing2); }
  .sm\:mb-2-5 { margin-bottom: var(--spacing2-5); }
  .sm\:mb-3 { margin-bottom: var(--spacing3); }
  .sm\:mb-3-5 { margin-bottom: var(--spacing3-5); }
  .sm\:mb-4 { margin-bottom: var(--spacing4); }
  .sm\:mb-4-5 { margin-bottom: var(--spacing4-5); }
  .sm\:mb-5 { margin-bottom: var(--spacing5); }
  .sm\:mb-6 { margin-bottom: var(--spacing6); }
  .sm\:mb-7 { margin-bottom: var(--spacing7); }
  .sm\:mb-8 { margin-bottom: var(--spacing8); }
  .sm\:mb-10 { margin-bottom: var(--spacing10); }
  .sm\:mb-12 { margin-bottom: var(--spacing12); }
  .sm\:mb-14 { margin-bottom: var(--spacing14); }
  .sm\:mb-16 { margin-bottom: var(--spacing16); }
  .sm\:mb-20 { margin-bottom: var(--spacing20); }
  .sm\:mb-24 { margin-bottom: var(--spacing24); }
  .sm\:mb-30 { margin-bottom: var(--spacing30); }
  .sm\:mb-32 { margin-bottom: var(--spacing32); }
  .sm\:mb-40 { margin-bottom: var(--spacing40); }
  .sm\:mb-48 { margin-bottom: var(--spacing48); }
  .sm\:mb-56 { margin-bottom: var(--spacing56); }
  .sm\:mb-64 { margin-bottom: var(--spacing64); }

  /* Margin left */
  .sm\:ml-0 { margin-left: var(--spacing0); }
  .sm\:ml-0-5 { margin-left: var(--spacing0-5); }
  .sm\:ml-1 { margin-left: var(--spacing1); }
  .sm\:ml-1-5 { margin-left: var(--spacing1-5); }
  .sm\:ml-2 { margin-left: var(--spacing2); }
  .sm\:ml-2-5 { margin-left: var(--spacing2-5); }
  .sm\:ml-3 { margin-left: var(--spacing3); }
  .sm\:ml-3-5 { margin-left: var(--spacing3-5); }
  .sm\:ml-4 { margin-left: var(--spacing4); }
  .sm\:ml-4-5 { margin-left: var(--spacing4-5); }
  .sm\:ml-5 { margin-left: var(--spacing5); }
  .sm\:ml-6 { margin-left: var(--spacing6); }
  .sm\:ml-7 { margin-left: var(--spacing7); }
  .sm\:ml-8 { margin-left: var(--spacing8); }
  .sm\:ml-10 { margin-left: var(--spacing10); }
  .sm\:ml-12 { margin-left: var(--spacing12); }
  .sm\:ml-14 { margin-left: var(--spacing14); }
  .sm\:ml-16 { margin-left: var(--spacing16); }
  .sm\:ml-20 { margin-left: var(--spacing20); }
  .sm\:ml-24 { margin-left: var(--spacing24); }
  .sm\:ml-30 { margin-left: var(--spacing30); }
  .sm\:ml-32 { margin-left: var(--spacing32); }
  .sm\:ml-40 { margin-left: var(--spacing40); }
  .sm\:ml-48 { margin-left: var(--spacing48); }
  .sm\:ml-56 { margin-left: var(--spacing56); }
  .sm\:ml-64 { margin-left: var(--spacing64); }

  /* Margin right */
  .sm\:mr-0 { margin-right: var(--spacing0); }
  .sm\:mr-0-5 { margin-right: var(--spacing0-5); }
  .sm\:mr-1 { margin-right: var(--spacing1); }
  .sm\:mr-1-5 { margin-right: var(--spacing1-5); }
  .sm\:mr-2 { margin-right: var(--spacing2); }
  .sm\:mr-2-5 { margin-right: var(--spacing2-5); }
  .sm\:mr-3 { margin-right: var(--spacing3); }
  .sm\:mr-3-5 { margin-right: var(--spacing3-5); }
  .sm\:mr-4 { margin-right: var(--spacing4); }
  .sm\:mr-4-5 { margin-right: var(--spacing4-5); }
  .sm\:mr-5 { margin-right: var(--spacing5); }
  .sm\:mr-6 { margin-right: var(--spacing6); }
  .sm\:mr-7 { margin-right: var(--spacing7); }
  .sm\:mr-8 { margin-right: var(--spacing8); }
  .sm\:mr-10 { margin-right: var(--spacing10); }
  .sm\:mr-12 { margin-right: var(--spacing12); }
  .sm\:mr-14 { margin-right: var(--spacing14); }
  .sm\:mr-16 { margin-right: var(--spacing16); }
  .sm\:mr-20 { margin-right: var(--spacing20); }
  .sm\:mr-24 { margin-right: var(--spacing24); }
  .sm\:mr-30 { margin-right: var(--spacing30); }
  .sm\:mr-32 { margin-right: var(--spacing32); }
  .sm\:mr-40 { margin-right: var(--spacing40); }
  .sm\:mr-48 { margin-right: var(--spacing48); }
  .sm\:mr-56 { margin-right: var(--spacing56); }
  .sm\:mr-64 { margin-right: var(--spacing64); }

  /* Margin inline (left and right) */
  .sm\:mx-0 { margin-inline: var(--spacing0); }
  .sm\:mx-0-5 { margin-inline: var(--spacing0-5); }
  .sm\:mx-1 { margin-inline: var(--spacing1); }
  .sm\:mx-1-5 { margin-inline: var(--spacing1-5); }
  .sm\:mx-2 { margin-inline: var(--spacing2); }
  .sm\:mx-2-5 { margin-inline: var(--spacing2-5); }
  .sm\:mx-3 { margin-inline: var(--spacing3); }
  .sm\:mx-3-5 { margin-inline: var(--spacing3-5); }
  .sm\:mx-4 { margin-inline: var(--spacing4); }
  .sm\:mx-4-5 { margin-inline: var(--spacing4-5); }
  .sm\:mx-5 { margin-inline: var(--spacing5); }
  .sm\:mx-6 { margin-inline: var(--spacing6); }
  .sm\:mx-7 { margin-inline: var(--spacing7); }
  .sm\:mx-8 { margin-inline: var(--spacing8); }
  .sm\:mx-10 { margin-inline: var(--spacing10); }
  .sm\:mx-12 { margin-inline: var(--spacing12); }
  .sm\:mx-14 { margin-inline: var(--spacing14); }
  .sm\:mx-16 { margin-inline: var(--spacing16); }
  .sm\:mx-20 { margin-inline: var(--spacing20); }
  .sm\:mx-24 { margin-inline: var(--spacing24); }
  .sm\:mx-30 { margin-inline: var(--spacing30); }
  .sm\:mx-32 { margin-inline: var(--spacing32); }
  .sm\:mx-40 { margin-inline: var(--spacing40); }
  .sm\:mx-48 { margin-inline: var(--spacing48); }
  .sm\:mx-56 { margin-inline: var(--spacing56); }
  .sm\:mx-64 { margin-inline: var(--spacing64); }

  /* Margin block (top and bottom) */
  .sm\:my-0 { margin-block: var(--spacing0); }
  .sm\:my-0-5 { margin-block: var(--spacing0-5); }
  .sm\:my-1 { margin-block: var(--spacing1); }
  .sm\:my-1-5 { margin-block: var(--spacing1-5); }
  .sm\:my-2 { margin-block: var(--spacing2); }
  .sm\:my-2-5 { margin-block: var(--spacing2-5); }
  .sm\:my-3 { margin-block: var(--spacing3); }
  .sm\:my-3-5 { margin-block: var(--spacing3-5); }
  .sm\:my-4 { margin-block: var(--spacing4); }
  .sm\:my-4-5 { margin-block: var(--spacing4-5); }
  .sm\:my-5 { margin-block: var(--spacing5); }
  .sm\:my-6 { margin-block: var(--spacing6); }
  .sm\:my-7 { margin-block: var(--spacing7); }
  .sm\:my-8 { margin-block: var(--spacing8); }
  .sm\:my-10 { margin-block: var(--spacing10); }
  .sm\:my-12 { margin-block: var(--spacing12); }
  .sm\:my-14 { margin-block: var(--spacing14); }
  .sm\:my-16 { margin-block: var(--spacing16); }
  .sm\:my-20 { margin-block: var(--spacing20); }
  .sm\:my-24 { margin-block: var(--spacing24); }
  .sm\:my-30 { margin-block: var(--spacing30); }
  .sm\:my-32 { margin-block: var(--spacing32); }
  .sm\:my-40 { margin-block: var(--spacing40); }
  .sm\:my-48 { margin-block: var(--spacing48); }
  .sm\:my-56 { margin-block: var(--spacing56); }
  .sm\:my-64 { margin-block: var(--spacing64); }
}

@media screen and (min-width: 768px) {
  /* Margin top */
  .md\:mt-0 { margin-top: var(--spacing0); }
  .md\:mt-0-5 { margin-top: var(--spacing0-5); }
  .md\:mt-1 { margin-top: var(--spacing1); }
  .md\:mt-1-5 { margin-top: var(--spacing1-5); }
  .md\:mt-2 { margin-top: var(--spacing2); }
  .md\:mt-2-5 { margin-top: var(--spacing2-5); }
  .md\:mt-3 { margin-top: var(--spacing3); }
  .md\:mt-3-5 { margin-top: var(--spacing3-5); }
  .md\:mt-4 { margin-top: var(--spacing4); }
  .md\:mt-4-5 { margin-top: var(--spacing4-5); }
  .md\:mt-5 { margin-top: var(--spacing5); }
  .md\:mt-6 { margin-top: var(--spacing6); }
  .md\:mt-7 { margin-top: var(--spacing7); }
  .md\:mt-8 { margin-top: var(--spacing8); }
  .md\:mt-10 { margin-top: var(--spacing10); }
  .md\:mt-12 { margin-top: var(--spacing12); }
  .md\:mt-14 { margin-top: var(--spacing14); }
  .md\:mt-16 { margin-top: var(--spacing16); }
  .md\:mt-20 { margin-top: var(--spacing20); }
  .md\:mt-24 { margin-top: var(--spacing24); }
  .md\:mt-30 { margin-top: var(--spacing30); }
  .md\:mt-32 { margin-top: var(--spacing32); }
  .md\:mt-40 { margin-top: var(--spacing40); }
  .md\:mt-48 { margin-top: var(--spacing48); }
  .md\:mt-56 { margin-top: var(--spacing56); }
  .md\:mt-64 { margin-top: var(--spacing64); }

  /* Margin bottom */
  .md\:mb-0 { margin-bottom: var(--spacing0); }
  .md\:mb-0-5 { margin-bottom: var(--spacing0-5); }
  .md\:mb-1 { margin-bottom: var(--spacing1); }
  .md\:mb-1-5 { margin-bottom: var(--spacing1-5); }
  .md\:mb-2 { margin-bottom: var(--spacing2); }
  .md\:mb-2-5 { margin-bottom: var(--spacing2-5); }
  .md\:mb-3 { margin-bottom: var(--spacing3); }
  .md\:mb-3-5 { margin-bottom: var(--spacing3-5); }
  .md\:mb-4 { margin-bottom: var(--spacing4); }
  .md\:mb-4-5 { margin-bottom: var(--spacing4-5); }
  .md\:mb-5 { margin-bottom: var(--spacing5); }
  .md\:mb-6 { margin-bottom: var(--spacing6); }
  .md\:mb-7 { margin-bottom: var(--spacing7); }
  .md\:mb-8 { margin-bottom: var(--spacing8); }
  .md\:mb-10 { margin-bottom: var(--spacing10); }
  .md\:mb-12 { margin-bottom: var(--spacing12); }
  .md\:mb-14 { margin-bottom: var(--spacing14); }
  .md\:mb-16 { margin-bottom: var(--spacing16); }
  .md\:mb-20 { margin-bottom: var(--spacing20); }
  .md\:mb-24 { margin-bottom: var(--spacing24); }
  .md\:mb-30 { margin-bottom: var(--spacing30); }
  .md\:mb-32 { margin-bottom: var(--spacing32); }
  .md\:mb-40 { margin-bottom: var(--spacing40); }
  .md\:mb-48 { margin-bottom: var(--spacing48); }
  .md\:mb-56 { margin-bottom: var(--spacing56); }
  .md\:mb-64 { margin-bottom: var(--spacing64); }

  /* Margin left */
  .md\:ml-0 { margin-left: var(--spacing0); }
  .md\:ml-0-5 { margin-left: var(--spacing0-5); }
  .md\:ml-1 { margin-left: var(--spacing1); }
  .md\:ml-1-5 { margin-left: var(--spacing1-5); }
  .md\:ml-2 { margin-left: var(--spacing2); }
  .md\:ml-2-5 { margin-left: var(--spacing2-5); }
  .md\:ml-3 { margin-left: var(--spacing3); }
  .md\:ml-3-5 { margin-left: var(--spacing3-5); }
  .md\:ml-4 { margin-left: var(--spacing4); }
  .md\:ml-4-5 { margin-left: var(--spacing4-5); }
  .md\:ml-5 { margin-left: var(--spacing5); }
  .md\:ml-6 { margin-left: var(--spacing6); }
  .md\:ml-7 { margin-left: var(--spacing7); }
  .md\:ml-8 { margin-left: var(--spacing8); }
  .md\:ml-10 { margin-left: var(--spacing10); }
  .md\:ml-12 { margin-left: var(--spacing12); }
  .md\:ml-14 { margin-left: var(--spacing14); }
  .md\:ml-16 { margin-left: var(--spacing16); }
  .md\:ml-20 { margin-left: var(--spacing20); }
  .md\:ml-24 { margin-left: var(--spacing24); }
  .md\:ml-30 { margin-left: var(--spacing30); }
  .md\:ml-32 { margin-left: var(--spacing32); }
  .md\:ml-40 { margin-left: var(--spacing40); }
  .md\:ml-48 { margin-left: var(--spacing48); }
  .md\:ml-56 { margin-left: var(--spacing56); }
  .md\:ml-64 { margin-left: var(--spacing64); }

  /* Margin right */
  .md\:mr-0 { margin-right: var(--spacing0); }
  .md\:mr-0-5 { margin-right: var(--spacing0-5); }
  .md\:mr-1 { margin-right: var(--spacing1); }
  .md\:mr-1-5 { margin-right: var(--spacing1-5); }
  .md\:mr-2 { margin-right: var(--spacing2); }
  .md\:mr-2-5 { margin-right: var(--spacing2-5); }
  .md\:mr-3 { margin-right: var(--spacing3); }
  .md\:mr-3-5 { margin-right: var(--spacing3-5); }
  .md\:mr-4 { margin-right: var(--spacing4); }
  .md\:mr-4-5 { margin-right: var(--spacing4-5); }
  .md\:mr-5 { margin-right: var(--spacing5); }
  .md\:mr-6 { margin-right: var(--spacing6); }
  .md\:mr-7 { margin-right: var(--spacing7); }
  .md\:mr-8 { margin-right: var(--spacing8); }
  .md\:mr-10 { margin-right: var(--spacing10); }
  .md\:mr-12 { margin-right: var(--spacing12); }
  .md\:mr-14 { margin-right: var(--spacing14); }
  .md\:mr-16 { margin-right: var(--spacing16); }
  .md\:mr-20 { margin-right: var(--spacing20); }
  .md\:mr-24 { margin-right: var(--spacing24); }
  .md\:mr-30 { margin-right: var(--spacing30); }
  .md\:mr-32 { margin-right: var(--spacing32); }
  .md\:mr-40 { margin-right: var(--spacing40); }
  .md\:mr-48 { margin-right: var(--spacing48); }
  .md\:mr-56 { margin-right: var(--spacing56); }
  .md\:mr-64 { margin-right: var(--spacing64); }

  /* Margin inline (left and right) */
  .md\:mx-0 { margin-inline: var(--spacing0); }
  .md\:mx-0-5 { margin-inline: var(--spacing0-5); }
  .md\:mx-1 { margin-inline: var(--spacing1); }
  .md\:mx-1-5 { margin-inline: var(--spacing1-5); }
  .md\:mx-2 { margin-inline: var(--spacing2); }
  .md\:mx-2-5 { margin-inline: var(--spacing2-5); }
  .md\:mx-3 { margin-inline: var(--spacing3); }
  .md\:mx-3-5 { margin-inline: var(--spacing3-5); }
  .md\:mx-4 { margin-inline: var(--spacing4); }
  .md\:mx-4-5 { margin-inline: var(--spacing4-5); }
  .md\:mx-5 { margin-inline: var(--spacing5); }
  .md\:mx-6 { margin-inline: var(--spacing6); }
  .md\:mx-7 { margin-inline: var(--spacing7); }
  .md\:mx-8 { margin-inline: var(--spacing8); }
  .md\:mx-10 { margin-inline: var(--spacing10); }
  .md\:mx-12 { margin-inline: var(--spacing12); }
  .md\:mx-14 { margin-inline: var(--spacing14); }
  .md\:mx-16 { margin-inline: var(--spacing16); }
  .md\:mx-20 { margin-inline: var(--spacing20); }
  .md\:mx-24 { margin-inline: var(--spacing24); }
  .md\:mx-30 { margin-inline: var(--spacing30); }
  .md\:mx-32 { margin-inline: var(--spacing32); }
  .md\:mx-40 { margin-inline: var(--spacing40); }
  .md\:mx-48 { margin-inline: var(--spacing48); }
  .md\:mx-56 { margin-inline: var(--spacing56); }
  .md\:mx-64 { margin-inline: var(--spacing64); }

  /* Margin block (top and bottom) */
  .md\:my-0 { margin-block: var(--spacing0); }
  .md\:my-0-5 { margin-block: var(--spacing0-5); }
  .md\:my-1 { margin-block: var(--spacing1); }
  .md\:my-1-5 { margin-block: var(--spacing1-5); }
  .md\:my-2 { margin-block: var(--spacing2); }
  .md\:my-2-5 { margin-block: var(--spacing2-5); }
  .md\:my-3 { margin-block: var(--spacing3); }
  .md\:my-3-5 { margin-block: var(--spacing3-5); }
  .md\:my-4 { margin-block: var(--spacing4); }
  .md\:my-4-5 { margin-block: var(--spacing4-5); }
  .md\:my-5 { margin-block: var(--spacing5); }
  .md\:my-6 { margin-block: var(--spacing6); }
  .md\:my-7 { margin-block: var(--spacing7); }
  .md\:my-8 { margin-block: var(--spacing8); }
  .md\:my-10 { margin-block: var(--spacing10); }
  .md\:my-12 { margin-block: var(--spacing12); }
  .md\:my-14 { margin-block: var(--spacing14); }
  .md\:my-16 { margin-block: var(--spacing16); }
  .md\:my-20 { margin-block: var(--spacing20); }
  .md\:my-24 { margin-block: var(--spacing24); }
  .md\:my-30 { margin-block: var(--spacing30); }
  .md\:my-32 { margin-block: var(--spacing32); }
  .md\:my-40 { margin-block: var(--spacing40); }
  .md\:my-48 { margin-block: var(--spacing48); }
  .md\:my-56 { margin-block: var(--spacing56); }
  .md\:my-64 { margin-block: var(--spacing64); }
}

@media screen and (min-width: 992px) {
  /* Margin top */
  .lg\:mt-0 { margin-top: var(--spacing0); }
  .lg\:mt-0-5 { margin-top: var(--spacing0-5); }
  .lg\:mt-1 { margin-top: var(--spacing1); }
  .lg\:mt-1-5 { margin-top: var(--spacing1-5); }
  .lg\:mt-2 { margin-top: var(--spacing2); }
  .lg\:mt-2-5 { margin-top: var(--spacing2-5); }
  .lg\:mt-3 { margin-top: var(--spacing3); }
  .lg\:mt-3-5 { margin-top: var(--spacing3-5); }
  .lg\:mt-4 { margin-top: var(--spacing4); }
  .lg\:mt-4-5 { margin-top: var(--spacing4-5); }
  .lg\:mt-5 { margin-top: var(--spacing5); }
  .lg\:mt-6 { margin-top: var(--spacing6); }
  .lg\:mt-7 { margin-top: var(--spacing7); }
  .lg\:mt-8 { margin-top: var(--spacing8); }
  .lg\:mt-10 { margin-top: var(--spacing10); }
  .lg\:mt-12 { margin-top: var(--spacing12); }
  .lg\:mt-14 { margin-top: var(--spacing14); }
  .lg\:mt-16 { margin-top: var(--spacing16); }
  .lg\:mt-20 { margin-top: var(--spacing20); }
  .lg\:mt-24 { margin-top: var(--spacing24); }
  .lg\:mt-30 { margin-top: var(--spacing30); }
  .lg\:mt-32 { margin-top: var(--spacing32); }
  .lg\:mt-40 { margin-top: var(--spacing40); }
  .lg\:mt-48 { margin-top: var(--spacing48); }
  .lg\:mt-56 { margin-top: var(--spacing56); }
  .lg\:mt-64 { margin-top: var(--spacing64); }

  /* Margin bottom */
  .lg\:mb-0 { margin-bottom: var(--spacing0); }
  .lg\:mb-0-5 { margin-bottom: var(--spacing0-5); }
  .lg\:mb-1 { margin-bottom: var(--spacing1); }
  .lg\:mb-1-5 { margin-bottom: var(--spacing1-5); }
  .lg\:mb-2 { margin-bottom: var(--spacing2); }
  .lg\:mb-2-5 { margin-bottom: var(--spacing2-5); }
  .lg\:mb-3 { margin-bottom: var(--spacing3); }
  .lg\:mb-3-5 { margin-bottom: var(--spacing3-5); }
  .lg\:mb-4 { margin-bottom: var(--spacing4); }
  .lg\:mb-4-5 { margin-bottom: var(--spacing4-5); }
  .lg\:mb-5 { margin-bottom: var(--spacing5); }
  .lg\:mb-6 { margin-bottom: var(--spacing6); }
  .lg\:mb-7 { margin-bottom: var(--spacing7); }
  .lg\:mb-8 { margin-bottom: var(--spacing8); }
  .lg\:mb-10 { margin-bottom: var(--spacing10); }
  .lg\:mb-12 { margin-bottom: var(--spacing12); }
  .lg\:mb-14 { margin-bottom: var(--spacing14); }
  .lg\:mb-16 { margin-bottom: var(--spacing16); }
  .lg\:mb-20 { margin-bottom: var(--spacing20); }
  .lg\:mb-24 { margin-bottom: var(--spacing24); }
  .lg\:mb-30 { margin-bottom: var(--spacing30); }
  .lg\:mb-32 { margin-bottom: var(--spacing32); }
  .lg\:mb-40 { margin-bottom: var(--spacing40); }
  .lg\:mb-48 { margin-bottom: var(--spacing48); }
  .lg\:mb-56 { margin-bottom: var(--spacing56); }
  .lg\:mb-64 { margin-bottom: var(--spacing64); }

  /* Margin left */
  .lg\:ml-0 { margin-left: var(--spacing0); }
  .lg\:ml-0-5 { margin-left: var(--spacing0-5); }
  .lg\:ml-1 { margin-left: var(--spacing1); }
  .lg\:ml-1-5 { margin-left: var(--spacing1-5); }
  .lg\:ml-2 { margin-left: var(--spacing2); }
  .lg\:ml-2-5 { margin-left: var(--spacing2-5); }
  .lg\:ml-3 { margin-left: var(--spacing3); }
  .lg\:ml-3-5 { margin-left: var(--spacing3-5); }
  .lg\:ml-4 { margin-left: var(--spacing4); }
  .lg\:ml-4-5 { margin-left: var(--spacing4-5); }
  .lg\:ml-5 { margin-left: var(--spacing5); }
  .lg\:ml-6 { margin-left: var(--spacing6); }
  .lg\:ml-7 { margin-left: var(--spacing7); }
  .lg\:ml-8 { margin-left: var(--spacing8); }
  .lg\:ml-10 { margin-left: var(--spacing10); }
  .lg\:ml-12 { margin-left: var(--spacing12); }
  .lg\:ml-14 { margin-left: var(--spacing14); }
  .lg\:ml-16 { margin-left: var(--spacing16); }
  .lg\:ml-20 { margin-left: var(--spacing20); }
  .lg\:ml-24 { margin-left: var(--spacing24); }
  .lg\:ml-30 { margin-left: var(--spacing30); }
  .lg\:ml-32 { margin-left: var(--spacing32); }
  .lg\:ml-40 { margin-left: var(--spacing40); }
  .lg\:ml-48 { margin-left: var(--spacing48); }
  .lg\:ml-56 { margin-left: var(--spacing56); }
  .lg\:ml-64 { margin-left: var(--spacing64); }

  /* Margin right */
  .lg\:mr-0 { margin-right: var(--spacing0); }
  .lg\:mr-0-5 { margin-right: var(--spacing0-5); }
  .lg\:mr-1 { margin-right: var(--spacing1); }
  .lg\:mr-1-5 { margin-right: var(--spacing1-5); }
  .lg\:mr-2 { margin-right: var(--spacing2); }
  .lg\:mr-2-5 { margin-right: var(--spacing2-5); }
  .lg\:mr-3 { margin-right: var(--spacing3); }
  .lg\:mr-3-5 { margin-right: var(--spacing3-5); }
  .lg\:mr-4 { margin-right: var(--spacing4); }
  .lg\:mr-4-5 { margin-right: var(--spacing4-5); }
  .lg\:mr-5 { margin-right: var(--spacing5); }
  .lg\:mr-6 { margin-right: var(--spacing6); }
  .lg\:mr-7 { margin-right: var(--spacing7); }
  .lg\:mr-8 { margin-right: var(--spacing8); }
  .lg\:mr-10 { margin-right: var(--spacing10); }
  .lg\:mr-12 { margin-right: var(--spacing12); }
  .lg\:mr-14 { margin-right: var(--spacing14); }
  .lg\:mr-16 { margin-right: var(--spacing16); }
  .lg\:mr-20 { margin-right: var(--spacing20); }
  .lg\:mr-24 { margin-right: var(--spacing24); }
  .lg\:mr-30 { margin-right: var(--spacing30); }
  .lg\:mr-32 { margin-right: var(--spacing32); }
  .lg\:mr-40 { margin-right: var(--spacing40); }
  .lg\:mr-48 { margin-right: var(--spacing48); }
  .lg\:mr-56 { margin-right: var(--spacing56); }
  .lg\:mr-64 { margin-right: var(--spacing64); }

  /* Margin inline (left and right) */
  .lg\:mx-0 { margin-inline: var(--spacing0); }
  .lg\:mx-0-5 { margin-inline: var(--spacing0-5); }
  .lg\:mx-1 { margin-inline: var(--spacing1); }
  .lg\:mx-1-5 { margin-inline: var(--spacing1-5); }
  .lg\:mx-2 { margin-inline: var(--spacing2); }
  .lg\:mx-2-5 { margin-inline: var(--spacing2-5); }
  .lg\:mx-3 { margin-inline: var(--spacing3); }
  .lg\:mx-3-5 { margin-inline: var(--spacing3-5); }
  .lg\:mx-4 { margin-inline: var(--spacing4); }
  .lg\:mx-4-5 { margin-inline: var(--spacing4-5); }
  .lg\:mx-5 { margin-inline: var(--spacing5); }
  .lg\:mx-6 { margin-inline: var(--spacing6); }
  .lg\:mx-7 { margin-inline: var(--spacing7); }
  .lg\:mx-8 { margin-inline: var(--spacing8); }
  .lg\:mx-10 { margin-inline: var(--spacing10); }
  .lg\:mx-12 { margin-inline: var(--spacing12); }
  .lg\:mx-14 { margin-inline: var(--spacing14); }
  .lg\:mx-16 { margin-inline: var(--spacing16); }
  .lg\:mx-20 { margin-inline: var(--spacing20); }
  .lg\:mx-24 { margin-inline: var(--spacing24); }
  .lg\:mx-30 { margin-inline: var(--spacing30); }
  .lg\:mx-32 { margin-inline: var(--spacing32); }
  .lg\:mx-40 { margin-inline: var(--spacing40); }
  .lg\:mx-48 { margin-inline: var(--spacing48); }
  .lg\:mx-56 { margin-inline: var(--spacing56); }
  .lg\:mx-64 { margin-inline: var(--spacing64); }

  /* Margin block (top and bottom) */
  .lg\:my-0 { margin-block: var(--spacing0); }
  .lg\:my-0-5 { margin-block: var(--spacing0-5); }
  .lg\:my-1 { margin-block: var(--spacing1); }
  .lg\:my-1-5 { margin-block: var(--spacing1-5); }
  .lg\:my-2 { margin-block: var(--spacing2); }
  .lg\:my-2-5 { margin-block: var(--spacing2-5); }
  .lg\:my-3 { margin-block: var(--spacing3); }
  .lg\:my-3-5 { margin-block: var(--spacing3-5); }
  .lg\:my-4 { margin-block: var(--spacing4); }
  .lg\:my-4-5 { margin-block: var(--spacing4-5); }
  .lg\:my-5 { margin-block: var(--spacing5); }
  .lg\:my-6 { margin-block: var(--spacing6); }
  .lg\:my-7 { margin-block: var(--spacing7); }
  .lg\:my-8 { margin-block: var(--spacing8); }
  .lg\:my-10 { margin-block: var(--spacing10); }
  .lg\:my-12 { margin-block: var(--spacing12); }
  .lg\:my-14 { margin-block: var(--spacing14); }
  .lg\:my-16 { margin-block: var(--spacing16); }
  .lg\:my-20 { margin-block: var(--spacing20); }
  .lg\:my-24 { margin-block: var(--spacing24); }
  .lg\:my-30 { margin-block: var(--spacing30); }
  .lg\:my-32 { margin-block: var(--spacing32); }
  .lg\:my-40 { margin-block: var(--spacing40); }
  .lg\:my-48 { margin-block: var(--spacing48); }
  .lg\:my-56 { margin-block: var(--spacing56); }
  .lg\:my-64 { margin-block: var(--spacing64); }
}

@media screen and (min-width: 1200px) {
  /* Margin top */
  .xl\:mt-0 { margin-top: var(--spacing0); }
  .xl\:mt-0-5 { margin-top: var(--spacing0-5); }
  .xl\:mt-1 { margin-top: var(--spacing1); }
  .xl\:mt-1-5 { margin-top: var(--spacing1-5); }
  .xl\:mt-2 { margin-top: var(--spacing2); }
  .xl\:mt-2-5 { margin-top: var(--spacing2-5); }
  .xl\:mt-3 { margin-top: var(--spacing3); }
  .xl\:mt-3-5 { margin-top: var(--spacing3-5); }
  .xl\:mt-4 { margin-top: var(--spacing4); }
  .xl\:mt-4-5 { margin-top: var(--spacing4-5); }
  .xl\:mt-5 { margin-top: var(--spacing5); }
  .xl\:mt-6 { margin-top: var(--spacing6); }
  .xl\:mt-7 { margin-top: var(--spacing7); }
  .xl\:mt-8 { margin-top: var(--spacing8); }
  .xl\:mt-10 { margin-top: var(--spacing10); }
  .xl\:mt-12 { margin-top: var(--spacing12); }
  .xl\:mt-14 { margin-top: var(--spacing14); }
  .xl\:mt-16 { margin-top: var(--spacing16); }
  .xl\:mt-20 { margin-top: var(--spacing20); }
  .xl\:mt-24 { margin-top: var(--spacing24); }
  .xl\:mt-30 { margin-top: var(--spacing30); }
  .xl\:mt-32 { margin-top: var(--spacing32); }
  .xl\:mt-40 { margin-top: var(--spacing40); }
  .xl\:mt-48 { margin-top: var(--spacing48); }
  .xl\:mt-56 { margin-top: var(--spacing56); }
  .xl\:mt-64 { margin-top: var(--spacing64); }

  /* Margin bottom */
  .xl\:mb-0 { margin-bottom: var(--spacing0); }
  .xl\:mb-0-5 { margin-bottom: var(--spacing0-5); }
  .xl\:mb-1 { margin-bottom: var(--spacing1); }
  .xl\:mb-1-5 { margin-bottom: var(--spacing1-5); }
  .xl\:mb-2 { margin-bottom: var(--spacing2); }
  .xl\:mb-2-5 { margin-bottom: var(--spacing2-5); }
  .xl\:mb-3 { margin-bottom: var(--spacing3); }
  .xl\:mb-3-5 { margin-bottom: var(--spacing3-5); }
  .xl\:mb-4 { margin-bottom: var(--spacing4); }
  .xl\:mb-4-5 { margin-bottom: var(--spacing4-5); }
  .xl\:mb-5 { margin-bottom: var(--spacing5); }
  .xl\:mb-6 { margin-bottom: var(--spacing6); }
  .xl\:mb-7 { margin-bottom: var(--spacing7); }
  .xl\:mb-8 { margin-bottom: var(--spacing8); }
  .xl\:mb-10 { margin-bottom: var(--spacing10); }
  .xl\:mb-12 { margin-bottom: var(--spacing12); }
  .xl\:mb-14 { margin-bottom: var(--spacing14); }
  .xl\:mb-16 { margin-bottom: var(--spacing16); }
  .xl\:mb-20 { margin-bottom: var(--spacing20); }
  .xl\:mb-24 { margin-bottom: var(--spacing24); }
  .xl\:mb-30 { margin-bottom: var(--spacing30); }
  .xl\:mb-32 { margin-bottom: var(--spacing32); }
  .xl\:mb-40 { margin-bottom: var(--spacing40); }
  .xl\:mb-48 { margin-bottom: var(--spacing48); }
  .xl\:mb-56 { margin-bottom: var(--spacing56); }
  .xl\:mb-64 { margin-bottom: var(--spacing64); }

  /* Margin left */
  .xl\:ml-0 { margin-left: var(--spacing0); }
  .xl\:ml-0-5 { margin-left: var(--spacing0-5); }
  .xl\:ml-1 { margin-left: var(--spacing1); }
  .xl\:ml-1-5 { margin-left: var(--spacing1-5); }
  .xl\:ml-2 { margin-left: var(--spacing2); }
  .xl\:ml-2-5 { margin-left: var(--spacing2-5); }
  .xl\:ml-3 { margin-left: var(--spacing3); }
  .xl\:ml-3-5 { margin-left: var(--spacing3-5); }
  .xl\:ml-4 { margin-left: var(--spacing4); }
  .xl\:ml-4-5 { margin-left: var(--spacing4-5); }
  .xl\:ml-5 { margin-left: var(--spacing5); }
  .xl\:ml-6 { margin-left: var(--spacing6); }
  .xl\:ml-7 { margin-left: var(--spacing7); }
  .xl\:ml-8 { margin-left: var(--spacing8); }
  .xl\:ml-10 { margin-left: var(--spacing10); }
  .xl\:ml-12 { margin-left: var(--spacing12); }
  .xl\:ml-14 { margin-left: var(--spacing14); }
  .xl\:ml-16 { margin-left: var(--spacing16); }
  .xl\:ml-20 { margin-left: var(--spacing20); }
  .xl\:ml-24 { margin-left: var(--spacing24); }
  .xl\:ml-30 { margin-left: var(--spacing30); }
  .xl\:ml-32 { margin-left: var(--spacing32); }
  .xl\:ml-40 { margin-left: var(--spacing40); }
  .xl\:ml-48 { margin-left: var(--spacing48); }
  .xl\:ml-56 { margin-left: var(--spacing56); }
  .xl\:ml-64 { margin-left: var(--spacing64); }

  /* Margin right */
  .xl\:mr-0 { margin-right: var(--spacing0); }
  .xl\:mr-0-5 { margin-right: var(--spacing0-5); }
  .xl\:mr-1 { margin-right: var(--spacing1); }
  .xl\:mr-1-5 { margin-right: var(--spacing1-5); }
  .xl\:mr-2 { margin-right: var(--spacing2); }
  .xl\:mr-2-5 { margin-right: var(--spacing2-5); }
  .xl\:mr-3 { margin-right: var(--spacing3); }
  .xl\:mr-3-5 { margin-right: var(--spacing3-5); }
  .xl\:mr-4 { margin-right: var(--spacing4); }
  .xl\:mr-4-5 { margin-right: var(--spacing4-5); }
  .xl\:mr-5 { margin-right: var(--spacing5); }
  .xl\:mr-6 { margin-right: var(--spacing6); }
  .xl\:mr-7 { margin-right: var(--spacing7); }
  .xl\:mr-8 { margin-right: var(--spacing8); }
  .xl\:mr-10 { margin-right: var(--spacing10); }
  .xl\:mr-12 { margin-right: var(--spacing12); }
  .xl\:mr-14 { margin-right: var(--spacing14); }
  .xl\:mr-16 { margin-right: var(--spacing16); }
  .xl\:mr-20 { margin-right: var(--spacing20); }
  .xl\:mr-24 { margin-right: var(--spacing24); }
  .xl\:mr-30 { margin-right: var(--spacing30); }
  .xl\:mr-32 { margin-right: var(--spacing32); }
  .xl\:mr-40 { margin-right: var(--spacing40); }
  .xl\:mr-48 { margin-right: var(--spacing48); }
  .xl\:mr-56 { margin-right: var(--spacing56); }
  .xl\:mr-64 { margin-right: var(--spacing64); }

  /* Margin inline (left and right) */
  .xl\:mx-0 { margin-inline: var(--spacing0); }
  .xl\:mx-0-5 { margin-inline: var(--spacing0-5); }
  .xl\:mx-1 { margin-inline: var(--spacing1); }
  .xl\:mx-1-5 { margin-inline: var(--spacing1-5); }
  .xl\:mx-2 { margin-inline: var(--spacing2); }
  .xl\:mx-2-5 { margin-inline: var(--spacing2-5); }
  .xl\:mx-3 { margin-inline: var(--spacing3); }
  .xl\:mx-3-5 { margin-inline: var(--spacing3-5); }
  .xl\:mx-4 { margin-inline: var(--spacing4); }
  .xl\:mx-4-5 { margin-inline: var(--spacing4-5); }
  .xl\:mx-5 { margin-inline: var(--spacing5); }
  .xl\:mx-6 { margin-inline: var(--spacing6); }
  .xl\:mx-7 { margin-inline: var(--spacing7); }
  .xl\:mx-8 { margin-inline: var(--spacing8); }
  .xl\:mx-10 { margin-inline: var(--spacing10); }
  .xl\:mx-12 { margin-inline: var(--spacing12); }
  .xl\:mx-14 { margin-inline: var(--spacing14); }
  .xl\:mx-16 { margin-inline: var(--spacing16); }
  .xl\:mx-20 { margin-inline: var(--spacing20); }
  .xl\:mx-24 { margin-inline: var(--spacing24); }
  .xl\:mx-30 { margin-inline: var(--spacing30); }
  .xl\:mx-32 { margin-inline: var(--spacing32); }
  .xl\:mx-40 { margin-inline: var(--spacing40); }
  .xl\:mx-48 { margin-inline: var(--spacing48); }
  .xl\:mx-56 { margin-inline: var(--spacing56); }
  .xl\:mx-64 { margin-inline: var(--spacing64); }

  /* Margin block (top and bottom) */
  .xl\:my-0 { margin-block: var(--spacing0); }
  .xl\:my-0-5 { margin-block: var(--spacing0-5); }
  .xl\:my-1 { margin-block: var(--spacing1); }
  .xl\:my-1-5 { margin-block: var(--spacing1-5); }
  .xl\:my-2 { margin-block: var(--spacing2); }
  .xl\:my-2-5 { margin-block: var(--spacing2-5); }
  .xl\:my-3 { margin-block: var(--spacing3); }
  .xl\:my-3-5 { margin-block: var(--spacing3-5); }
  .xl\:my-4 { margin-block: var(--spacing4); }
  .xl\:my-4-5 { margin-block: var(--spacing4-5); }
  .xl\:my-5 { margin-block: var(--spacing5); }
  .xl\:my-6 { margin-block: var(--spacing6); }
  .xl\:my-7 { margin-block: var(--spacing7); }
  .xl\:my-8 { margin-block: var(--spacing8); }
  .xl\:my-10 { margin-block: var(--spacing10); }
  .xl\:my-12 { margin-block: var(--spacing12); }
  .xl\:my-14 { margin-block: var(--spacing14); }
  .xl\:my-16 { margin-block: var(--spacing16); }
  .xl\:my-20 { margin-block: var(--spacing20); }
  .xl\:my-24 { margin-block: var(--spacing24); }
  .xl\:my-30 { margin-block: var(--spacing30); }
  .xl\:my-32 { margin-block: var(--spacing32); }
  .xl\:my-40 { margin-block: var(--spacing40); }
  .xl\:my-48 { margin-block: var(--spacing48); }
  .xl\:my-56 { margin-block: var(--spacing56); }
  .xl\:my-64 { margin-block: var(--spacing64); }
}

@media screen and (min-width: 1400px) {
  /* Margin top */
  .xxl\:mt-0 { margin-top: var(--spacing0); }
  .xxl\:mt-0-5 { margin-top: var(--spacing0-5); }
  .xxl\:mt-1 { margin-top: var(--spacing1); }
  .xxl\:mt-1-5 { margin-top: var(--spacing1-5); }
  .xxl\:mt-2 { margin-top: var(--spacing2); }
  .xxl\:mt-2-5 { margin-top: var(--spacing2-5); }
  .xxl\:mt-3 { margin-top: var(--spacing3); }
  .xxl\:mt-3-5 { margin-top: var(--spacing3-5); }
  .xxl\:mt-4 { margin-top: var(--spacing4); }
  .xxl\:mt-4-5 { margin-top: var(--spacing4-5); }
  .xxl\:mt-5 { margin-top: var(--spacing5); }
  .xxl\:mt-6 { margin-top: var(--spacing6); }
  .xxl\:mt-7 { margin-top: var(--spacing7); }
  .xxl\:mt-8 { margin-top: var(--spacing8); }
  .xxl\:mt-10 { margin-top: var(--spacing10); }
  .xxl\:mt-12 { margin-top: var(--spacing12); }
  .xxl\:mt-14 { margin-top: var(--spacing14); }
  .xxl\:mt-16 { margin-top: var(--spacing16); }
  .xxl\:mt-20 { margin-top: var(--spacing20); }
  .xxl\:mt-24 { margin-top: var(--spacing24); }
  .xxl\:mt-30 { margin-top: var(--spacing30); }
  .xxl\:mt-32 { margin-top: var(--spacing32); }
  .xxl\:mt-40 { margin-top: var(--spacing40); }
  .xxl\:mt-48 { margin-top: var(--spacing48); }
  .xxl\:mt-56 { margin-top: var(--spacing56); }
  .xxl\:mt-64 { margin-top: var(--spacing64); }

  /* Margin bottom */
  .xxl\:mb-0 { margin-bottom: var(--spacing0); }
  .xxl\:mb-0-5 { margin-bottom: var(--spacing0-5); }
  .xxl\:mb-1 { margin-bottom: var(--spacing1); }
  .xxl\:mb-1-5 { margin-bottom: var(--spacing1-5); }
  .xxl\:mb-2 { margin-bottom: var(--spacing2); }
  .xxl\:mb-2-5 { margin-bottom: var(--spacing2-5); }
  .xxl\:mb-3 { margin-bottom: var(--spacing3); }
  .xxl\:mb-3-5 { margin-bottom: var(--spacing3-5); }
  .xxl\:mb-4 { margin-bottom: var(--spacing4); }
  .xxl\:mb-4-5 { margin-bottom: var(--spacing4-5); }
  .xxl\:mb-5 { margin-bottom: var(--spacing5); }
  .xxl\:mb-6 { margin-bottom: var(--spacing6); }
  .xxl\:mb-7 { margin-bottom: var(--spacing7); }
  .xxl\:mb-8 { margin-bottom: var(--spacing8); }
  .xxl\:mb-10 { margin-bottom: var(--spacing10); }
  .xxl\:mb-12 { margin-bottom: var(--spacing12); }
  .xxl\:mb-14 { margin-bottom: var(--spacing14); }
  .xxl\:mb-16 { margin-bottom: var(--spacing16); }
  .xxl\:mb-20 { margin-bottom: var(--spacing20); }
  .xxl\:mb-24 { margin-bottom: var(--spacing24); }
  .xxl\:mb-30 { margin-bottom: var(--spacing30); }
  .xxl\:mb-32 { margin-bottom: var(--spacing32); }
  .xxl\:mb-40 { margin-bottom: var(--spacing40); }
  .xxl\:mb-48 { margin-bottom: var(--spacing48); }
  .xxl\:mb-56 { margin-bottom: var(--spacing56); }
  .xxl\:mb-64 { margin-bottom: var(--spacing64); }

  /* Margin left */
  .xxl\:ml-0 { margin-left: var(--spacing0); }
  .xxl\:ml-0-5 { margin-left: var(--spacing0-5); }
  .xxl\:ml-1 { margin-left: var(--spacing1); }
  .xxl\:ml-1-5 { margin-left: var(--spacing1-5); }
  .xxl\:ml-2 { margin-left: var(--spacing2); }
  .xxl\:ml-2-5 { margin-left: var(--spacing2-5); }
  .xxl\:ml-3 { margin-left: var(--spacing3); }
  .xxl\:ml-3-5 { margin-left: var(--spacing3-5); }
  .xxl\:ml-4 { margin-left: var(--spacing4); }
  .xxl\:ml-4-5 { margin-left: var(--spacing4-5); }
  .xxl\:ml-5 { margin-left: var(--spacing5); }
  .xxl\:ml-6 { margin-left: var(--spacing6); }
  .xxl\:ml-7 { margin-left: var(--spacing7); }
  .xxl\:ml-8 { margin-left: var(--spacing8); }
  .xxl\:ml-10 { margin-left: var(--spacing10); }
  .xxl\:ml-12 { margin-left: var(--spacing12); }
  .xxl\:ml-14 { margin-left: var(--spacing14); }
  .xxl\:ml-16 { margin-left: var(--spacing16); }
  .xxl\:ml-20 { margin-left: var(--spacing20); }
  .xxl\:ml-24 { margin-left: var(--spacing24); }
  .xxl\:ml-30 { margin-left: var(--spacing30); }
  .xxl\:ml-32 { margin-left: var(--spacing32); }
  .xxl\:ml-40 { margin-left: var(--spacing40); }
  .xxl\:ml-48 { margin-left: var(--spacing48); }
  .xxl\:ml-56 { margin-left: var(--spacing56); }
  .xxl\:ml-64 { margin-left: var(--spacing64); }

  /* Margin right */
  .xxl\:mr-0 { margin-right: var(--spacing0); }
  .xxl\:mr-0-5 { margin-right: var(--spacing0-5); }
  .xxl\:mr-1 { margin-right: var(--spacing1); }
  .xxl\:mr-1-5 { margin-right: var(--spacing1-5); }
  .xxl\:mr-2 { margin-right: var(--spacing2); }
  .xxl\:mr-2-5 { margin-right: var(--spacing2-5); }
  .xxl\:mr-3 { margin-right: var(--spacing3); }
  .xxl\:mr-3-5 { margin-right: var(--spacing3-5); }
  .xxl\:mr-4 { margin-right: var(--spacing4); }
  .xxl\:mr-4-5 { margin-right: var(--spacing4-5); }
  .xxl\:mr-5 { margin-right: var(--spacing5); }
  .xxl\:mr-6 { margin-right: var(--spacing6); }
  .xxl\:mr-7 { margin-right: var(--spacing7); }
  .xxl\:mr-8 { margin-right: var(--spacing8); }
  .xxl\:mr-10 { margin-right: var(--spacing10); }
  .xxl\:mr-12 { margin-right: var(--spacing12); }
  .xxl\:mr-14 { margin-right: var(--spacing14); }
  .xxl\:mr-16 { margin-right: var(--spacing16); }
  .xxl\:mr-20 { margin-right: var(--spacing20); }
  .xxl\:mr-24 { margin-right: var(--spacing24); }
  .xxl\:mr-30 { margin-right: var(--spacing30); }
  .xxl\:mr-32 { margin-right: var(--spacing32); }
  .xxl\:mr-40 { margin-right: var(--spacing40); }
  .xxl\:mr-48 { margin-right: var(--spacing48); }
  .xxl\:mr-56 { margin-right: var(--spacing56); }
  .xxl\:mr-64 { margin-right: var(--spacing64); }

  /* Margin inline (left and right) */
  .xxl\:mx-0 { margin-inline: var(--spacing0); }
  .xxl\:mx-0-5 { margin-inline: var(--spacing0-5); }
  .xxl\:mx-1 { margin-inline: var(--spacing1); }
  .xxl\:mx-1-5 { margin-inline: var(--spacing1-5); }
  .xxl\:mx-2 { margin-inline: var(--spacing2); }
  .xxl\:mx-2-5 { margin-inline: var(--spacing2-5); }
  .xxl\:mx-3 { margin-inline: var(--spacing3); }
  .xxl\:mx-3-5 { margin-inline: var(--spacing3-5); }
  .xxl\:mx-4 { margin-inline: var(--spacing4); }
  .xxl\:mx-4-5 { margin-inline: var(--spacing4-5); }
  .xxl\:mx-5 { margin-inline: var(--spacing5); }
  .xxl\:mx-6 { margin-inline: var(--spacing6); }
  .xxl\:mx-7 { margin-inline: var(--spacing7); }
  .xxl\:mx-8 { margin-inline: var(--spacing8); }
  .xxl\:mx-10 { margin-inline: var(--spacing10); }
  .xxl\:mx-12 { margin-inline: var(--spacing12); }
  .xxl\:mx-14 { margin-inline: var(--spacing14); }
  .xxl\:mx-16 { margin-inline: var(--spacing16); }
  .xxl\:mx-20 { margin-inline: var(--spacing20); }
  .xxl\:mx-24 { margin-inline: var(--spacing24); }
  .xxl\:mx-30 { margin-inline: var(--spacing30); }
  .xxl\:mx-32 { margin-inline: var(--spacing32); }
  .xxl\:mx-40 { margin-inline: var(--spacing40); }
  .xxl\:mx-48 { margin-inline: var(--spacing48); }
  .xxl\:mx-56 { margin-inline: var(--spacing56); }
  .xxl\:mx-64 { margin-inline: var(--spacing64); }

  /* Margin block (top and bottom) */
  .xxl\:my-0 { margin-block: var(--spacing0); }
  .xxl\:my-0-5 { margin-block: var(--spacing0-5); }
  .xxl\:my-1 { margin-block: var(--spacing1); }
  .xxl\:my-1-5 { margin-block: var(--spacing1-5); }
  .xxl\:my-2 { margin-block: var(--spacing2); }
  .xxl\:my-2-5 { margin-block: var(--spacing2-5); }
  .xxl\:my-3 { margin-block: var(--spacing3); }
  .xxl\:my-3-5 { margin-block: var(--spacing3-5); }
  .xxl\:my-4 { margin-block: var(--spacing4); }
  .xxl\:my-4-5 { margin-block: var(--spacing4-5); }
  .xxl\:my-5 { margin-block: var(--spacing5); }
  .xxl\:my-6 { margin-block: var(--spacing6); }
  .xxl\:my-7 { margin-block: var(--spacing7); }
  .xxl\:my-8 { margin-block: var(--spacing8); }
  .xxl\:my-10 { margin-block: var(--spacing10); }
  .xxl\:my-12 { margin-block: var(--spacing12); }
  .xxl\:my-14 { margin-block: var(--spacing14); }
  .xxl\:my-16 { margin-block: var(--spacing16); }
  .xxl\:my-20 { margin-block: var(--spacing20); }
  .xxl\:my-24 { margin-block: var(--spacing24); }
  .xxl\:my-30 { margin-block: var(--spacing30); }
  .xxl\:my-32 { margin-block: var(--spacing32); }
  .xxl\:my-40 { margin-block: var(--spacing40); }
  .xxl\:my-48 { margin-block: var(--spacing48); }
  .xxl\:my-56 { margin-block: var(--spacing56); }
  .xxl\:my-64 { margin-block: var(--spacing64); }
}

/* =============== */
/* === PADDING === */
/* =============== */

/* Padding top */
.pt-0 { padding-top: var(--spacing0); }
.pt-0-5 { padding-top: var(--spacing0-5); }
.pt-1 { padding-top: var(--spacing1); }
.pt-1-5 { padding-top: var(--spacing1-5); }
.pt-2 { padding-top: var(--spacing2); }
.pt-2-5 { padding-top: var(--spacing2-5); }
.pt-3 { padding-top: var(--spacing3); }
.pt-3-5 { padding-top: var(--spacing3-5); }
.pt-4 { padding-top: var(--spacing4); }
.pt-4-5 { padding-top: var(--spacing4-5); }
.pt-5 { padding-top: var(--spacing5); }
.pt-6 { padding-top: var(--spacing6); }
.pt-7 { padding-top: var(--spacing7); }
.pt-8 { padding-top: var(--spacing8); }
.pt-10 { padding-top: var(--spacing10); }
.pt-12 { padding-top: var(--spacing12); }
.pt-14 { padding-top: var(--spacing14); }
.pt-16 { padding-top: var(--spacing16); }
.pt-20 { padding-top: var(--spacing20); }
.pt-24 { padding-top: var(--spacing24); }
.pt-30 { padding-top: var(--spacing30); }
.pt-32 { padding-top: var(--spacing32); }
.pt-40 { padding-top: var(--spacing40); }
.pt-48 { padding-top: var(--spacing48); }
.pt-56 { padding-top: var(--spacing56); }
.pt-64 { padding-top: var(--spacing64); }

/* Padding bottom */
.pb-0 { padding-bottom: var(--spacing0); }
.pb-0-5 { padding-bottom: var(--spacing0-5); }
.pb-1 { padding-bottom: var(--spacing1); }
.pb-1-5 { padding-bottom: var(--spacing1-5); }
.pb-2 { padding-bottom: var(--spacing2); }
.pb-2-5 { padding-bottom: var(--spacing2-5); }
.pb-3 { padding-bottom: var(--spacing3); }
.pb-3-5 { padding-bottom: var(--spacing3-5); }
.pb-4 { padding-bottom: var(--spacing4); }
.pb-4-5 { padding-bottom: var(--spacing4-5); }
.pb-5 { padding-bottom: var(--spacing5); }
.pb-6 { padding-bottom: var(--spacing6); }
.pb-7 { padding-bottom: var(--spacing7); }
.pb-8 { padding-bottom: var(--spacing8); }
.pb-10 { padding-bottom: var(--spacing10); }
.pb-12 { padding-bottom: var(--spacing12); }
.pb-14 { padding-bottom: var(--spacing14); }
.pb-16 { padding-bottom: var(--spacing16); }
.pb-20 { padding-bottom: var(--spacing20); }
.pb-24 { padding-bottom: var(--spacing24); }
.pb-30 { padding-bottom: var(--spacing30); }
.pb-32 { padding-bottom: var(--spacing32); }
.pb-40 { padding-bottom: var(--spacing40); }
.pb-48 { padding-bottom: var(--spacing48); }
.pb-56 { padding-bottom: var(--spacing56); }
.pb-64 { padding-bottom: var(--spacing64); }

/* Padding left */
.pl-0 { padding-left: var(--spacing0); }
.pl-0-5 { padding-left: var(--spacing0-5); }
.pl-1 { padding-left: var(--spacing1); }
.pl-1-5 { padding-left: var(--spacing1-5); }
.pl-2 { padding-left: var(--spacing2); }
.pl-2-5 { padding-left: var(--spacing2-5); }
.pl-3 { padding-left: var(--spacing3); }
.pl-3-5 { padding-left: var(--spacing3-5); }
.pl-4 { padding-left: var(--spacing4); }
.pl-4-5 { padding-left: var(--spacing4-5); }
.pl-5 { padding-left: var(--spacing5); }
.pl-6 { padding-left: var(--spacing6); }
.pl-7 { padding-left: var(--spacing7); }
.pl-8 { padding-left: var(--spacing8); }
.pl-10 { padding-left: var(--spacing10); }
.pl-12 { padding-left: var(--spacing12); }
.pl-14 { padding-left: var(--spacing14); }
.pl-16 { padding-left: var(--spacing16); }
.pl-20 { padding-left: var(--spacing20); }
.pl-24 { padding-left: var(--spacing24); }
.pl-30 { padding-left: var(--spacing30); }
.pl-32 { padding-left: var(--spacing32); }
.pl-40 { padding-left: var(--spacing40); }
.pl-48 { padding-left: var(--spacing48); }
.pl-56 { padding-left: var(--spacing56); }
.pl-64 { padding-left: var(--spacing64); }

/* Padding right */
.pr-0 { padding-right: var(--spacing0); }
.pr-0-5 { padding-right: var(--spacing0-5); }
.pr-1 { padding-right: var(--spacing1); }
.pr-1-5 { padding-right: var(--spacing1-5); }
.pr-2 { padding-right: var(--spacing2); }
.pr-2-5 { padding-right: var(--spacing2-5); }
.pr-3 { padding-right: var(--spacing3); }
.pr-3-5 { padding-right: var(--spacing3-5); }
.pr-4 { padding-right: var(--spacing4); }
.pr-4-5 { padding-right: var(--spacing4-5); }
.pr-5 { padding-right: var(--spacing5); }
.pr-6 { padding-right: var(--spacing6); }
.pr-7 { padding-right: var(--spacing7); }
.pr-8 { padding-right: var(--spacing8); }
.pr-10 { padding-right: var(--spacing10); }
.pr-12 { padding-right: var(--spacing12); }
.pr-14 { padding-right: var(--spacing14); }
.pr-16 { padding-right: var(--spacing16); }
.pr-20 { padding-right: var(--spacing20); }
.pr-24 { padding-right: var(--spacing24); }
.pr-30 { padding-right: var(--spacing30); }
.pr-32 { padding-right: var(--spacing32); }
.pr-40 { padding-right: var(--spacing40); }
.pr-48 { padding-right: var(--spacing48); }
.pr-56 { padding-right: var(--spacing56); }
.pr-64 { padding-right: var(--spacing64); }

/* Padding inline (left and right) */
.px-0 { padding-inline: var(--spacing0); }
.px-0-5 { padding-inline: var(--spacing0-5); }
.px-1 { padding-inline: var(--spacing1); }
.px-1-5 { padding-inline: var(--spacing1-5); }
.px-2 { padding-inline: var(--spacing2); }
.px-2-5 { padding-inline: var(--spacing2-5); }
.px-3 { padding-inline: var(--spacing3); }
.px-3-5 { padding-inline: var(--spacing3-5); }
.px-4 { padding-inline: var(--spacing4); }
.px-4-5 { padding-inline: var(--spacing4-5); }
.px-5 { padding-inline: var(--spacing5); }
.px-6 { padding-inline: var(--spacing6); }
.px-7 { padding-inline: var(--spacing7); }
.px-8 { padding-inline: var(--spacing8); }
.px-10 { padding-inline: var(--spacing10); }
.px-12 { padding-inline: var(--spacing12); }
.px-14 { padding-inline: var(--spacing14); }
.px-16 { padding-inline: var(--spacing16); }
.px-20 { padding-inline: var(--spacing20); }
.px-24 { padding-inline: var(--spacing24); }
.px-30 { padding-inline: var(--spacing30); }
.px-32 { padding-inline: var(--spacing32); }
.px-40 { padding-inline: var(--spacing40); }
.px-48 { padding-inline: var(--spacing48); }
.px-56 { padding-inline: var(--spacing56); }
.px-64 { padding-inline: var(--spacing64); }

/* Padding block (top and bottom) */
.py-0 { padding-block: var(--spacing0); }
.py-0-5 { padding-block: var(--spacing0-5); }
.py-1 { padding-block: var(--spacing1); }
.py-1-5 { padding-block: var(--spacing1-5); }
.py-2 { padding-block: var(--spacing2); }
.py-2-5 { padding-block: var(--spacing2-5); }
.py-3 { padding-block: var(--spacing3); }
.py-3-5 { padding-block: var(--spacing3-5); }
.py-4 { padding-block: var(--spacing4); }
.py-4-5 { padding-block: var(--spacing4-5); }
.py-5 { padding-block: var(--spacing5); }
.py-6 { padding-block: var(--spacing6); }
.py-7 { padding-block: var(--spacing7); }
.py-8 { padding-block: var(--spacing8); }
.py-10 { padding-block: var(--spacing10); }
.py-12 { padding-block: var(--spacing12); }
.py-14 { padding-block: var(--spacing14); }
.py-16 { padding-block: var(--spacing16); }
.py-20 { padding-block: var(--spacing20); }
.py-24 { padding-block: var(--spacing24); }
.py-30 { padding-block: var(--spacing30); }
.py-32 { padding-block: var(--spacing32); }
.py-40 { padding-block: var(--spacing40); }
.py-48 { padding-block: var(--spacing48); }
.py-56 { padding-block: var(--spacing56); }
.py-64 { padding-block: var(--spacing64); }

/* Padding all sides */
.p-0 { padding: var(--spacing0); }
.p-0-5 { padding: var(--spacing0-5); }
.p-1 { padding: var(--spacing1); }
.p-1-5 { padding: var(--spacing1-5); }
.p-2 { padding: var(--spacing2); }
.p-2-5 { padding: var(--spacing2-5); }
.p-3 { padding: var(--spacing3); }
.p-3-5 { padding: var(--spacing3-5); }
.p-4 { padding: var(--spacing4); }
.p-4-5 { padding: var(--spacing4-5); }
.p-5 { padding: var(--spacing5); }
.p-6 { padding: var(--spacing6); }
.p-7 { padding: var(--spacing7); }
.p-8 { padding: var(--spacing8); }
.p-10 { padding: var(--spacing10); }
.p-12 { padding: var(--spacing12); }
.p-14 { padding: var(--spacing14); }
.p-16 { padding: var(--spacing16); }
.p-20 { padding: var(--spacing20); }
.p-24 { padding: var(--spacing24); }
.p-30 { padding: var(--spacing30); }
.p-32 { padding: var(--spacing32); }
.p-40 { padding: var(--spacing40); }
.p-48 { padding: var(--spacing48); }
.p-56 { padding: var(--spacing56); }
.p-64 { padding: var(--spacing64); }

@media screen and (min-width: 576px) {
  /* Padding top */
  .sm\:pt-0 { padding-top: var(--spacing0); }
  .sm\:pt-0-5 { padding-top: var(--spacing0-5); }
  .sm\:pt-1 { padding-top: var(--spacing1); }
  .sm\:pt-1-5 { padding-top: var(--spacing1-5); }
  .sm\:pt-2 { padding-top: var(--spacing2); }
  .sm\:pt-2-5 { padding-top: var(--spacing2-5); }
  .sm\:pt-3 { padding-top: var(--spacing3); }
  .sm\:pt-3-5 { padding-top: var(--spacing3-5); }
  .sm\:pt-4 { padding-top: var(--spacing4); }
  .sm\:pt-4-5 { padding-top: var(--spacing4-5); }
  .sm\:pt-5 { padding-top: var(--spacing5); }
  .sm\:pt-6 { padding-top: var(--spacing6); }
  .sm\:pt-7 { padding-top: var(--spacing7); }
  .sm\:pt-8 { padding-top: var(--spacing8); }
  .sm\:pt-10 { padding-top: var(--spacing10); }
  .sm\:pt-12 { padding-top: var(--spacing12); }
  .sm\:pt-14 { padding-top: var(--spacing14); }
  .sm\:pt-16 { padding-top: var(--spacing16); }
  .sm\:pt-20 { padding-top: var(--spacing20); }
  .sm\:pt-24 { padding-top: var(--spacing24); }
  .sm\:pt-30 { padding-top: var(--spacing30); }
  .sm\:pt-32 { padding-top: var(--spacing32); }
  .sm\:pt-40 { padding-top: var(--spacing40); }
  .sm\:pt-48 { padding-top: var(--spacing48); }
  .sm\:pt-56 { padding-top: var(--spacing56); }
  .sm\:pt-64 { padding-top: var(--spacing64); }

  /* Padding bottom */
  .sm\:pb-0 { padding-bottom: var(--spacing0); }
  .sm\:pb-0-5 { padding-bottom: var(--spacing0-5); }
  .sm\:pb-1 { padding-bottom: var(--spacing1); }
  .sm\:pb-1-5 { padding-bottom: var(--spacing1-5); }
  .sm\:pb-2 { padding-bottom: var(--spacing2); }
  .sm\:pb-2-5 { padding-bottom: var(--spacing2-5); }
  .sm\:pb-3 { padding-bottom: var(--spacing3); }
  .sm\:pb-3-5 { padding-bottom: var(--spacing3-5); }
  .sm\:pb-4 { padding-bottom: var(--spacing4); }
  .sm\:pb-4-5 { padding-bottom: var(--spacing4-5); }
  .sm\:pb-5 { padding-bottom: var(--spacing5); }
  .sm\:pb-6 { padding-bottom: var(--spacing6); }
  .sm\:pb-7 { padding-bottom: var(--spacing7); }
  .sm\:pb-8 { padding-bottom: var(--spacing8); }
  .sm\:pb-10 { padding-bottom: var(--spacing10); }
  .sm\:pb-12 { padding-bottom: var(--spacing12); }
  .sm\:pb-14 { padding-bottom: var(--spacing14); }
  .sm\:pb-16 { padding-bottom: var(--spacing16); }
  .sm\:pb-20 { padding-bottom: var(--spacing20); }
  .sm\:pb-24 { padding-bottom: var(--spacing24); }
  .sm\:pb-30 { padding-bottom: var(--spacing30); }
  .sm\:pb-32 { padding-bottom: var(--spacing32); }
  .sm\:pb-40 { padding-bottom: var(--spacing40); }
  .sm\:pb-48 { padding-bottom: var(--spacing48); }
  .sm\:pb-56 { padding-bottom: var(--spacing56); }
  .sm\:pb-64 { padding-bottom: var(--spacing64); }

  /* Padding left */
  .sm\:pl-0 { padding-left: var(--spacing0); }
  .sm\:pl-0-5 { padding-left: var(--spacing0-5); }
  .sm\:pl-1 { padding-left: var(--spacing1); }
  .sm\:pl-1-5 { padding-left: var(--spacing1-5); }
  .sm\:pl-2 { padding-left: var(--spacing2); }
  .sm\:pl-2-5 { padding-left: var(--spacing2-5); }
  .sm\:pl-3 { padding-left: var(--spacing3); }
  .sm\:pl-3-5 { padding-left: var(--spacing3-5); }
  .sm\:pl-4 { padding-left: var(--spacing4); }
  .sm\:pl-4-5 { padding-left: var(--spacing4-5); }
  .sm\:pl-5 { padding-left: var(--spacing5); }
  .sm\:pl-6 { padding-left: var(--spacing6); }
  .sm\:pl-7 { padding-left: var(--spacing7); }
  .sm\:pl-8 { padding-left: var(--spacing8); }
  .sm\:pl-10 { padding-left: var(--spacing10); }
  .sm\:pl-12 { padding-left: var(--spacing12); }
  .sm\:pl-14 { padding-left: var(--spacing14); }
  .sm\:pl-16 { padding-left: var(--spacing16); }
  .sm\:pl-20 { padding-left: var(--spacing20); }
  .sm\:pl-24 { padding-left: var(--spacing24); }
  .sm\:pl-30 { padding-left: var(--spacing30); }
  .sm\:pl-32 { padding-left: var(--spacing32); }
  .sm\:pl-40 { padding-left: var(--spacing40); }
  .sm\:pl-48 { padding-left: var(--spacing48); }
  .sm\:pl-56 { padding-left: var(--spacing56); }
  .sm\:pl-64 { padding-left: var(--spacing64); }

  /* Padding right */
  .sm\:pr-0 { padding-right: var(--spacing0); }
  .sm\:pr-0-5 { padding-right: var(--spacing0-5); }
  .sm\:pr-1 { padding-right: var(--spacing1); }
  .sm\:pr-1-5 { padding-right: var(--spacing1-5); }
  .sm\:pr-2 { padding-right: var(--spacing2); }
  .sm\:pr-2-5 { padding-right: var(--spacing2-5); }
  .sm\:pr-3 { padding-right: var(--spacing3); }
  .sm\:pr-3-5 { padding-right: var(--spacing3-5); }
  .sm\:pr-4 { padding-right: var(--spacing4); }
  .sm\:pr-4-5 { padding-right: var(--spacing4-5); }
  .sm\:pr-5 { padding-right: var(--spacing5); }
  .sm\:pr-6 { padding-right: var(--spacing6); }
  .sm\:pr-7 { padding-right: var(--spacing7); }
  .sm\:pr-8 { padding-right: var(--spacing8); }
  .sm\:pr-10 { padding-right: var(--spacing10); }
  .sm\:pr-12 { padding-right: var(--spacing12); }
  .sm\:pr-14 { padding-right: var(--spacing14); }
  .sm\:pr-16 { padding-right: var(--spacing16); }
  .sm\:pr-20 { padding-right: var(--spacing20); }
  .sm\:pr-24 { padding-right: var(--spacing24); }
  .sm\:pr-30 { padding-right: var(--spacing30); }
  .sm\:pr-32 { padding-right: var(--spacing32); }
  .sm\:pr-40 { padding-right: var(--spacing40); }
  .sm\:pr-48 { padding-right: var(--spacing48); }
  .sm\:pr-56 { padding-right: var(--spacing56); }
  .sm\:pr-64 { padding-right: var(--spacing64); }

  /* Padding inline (left and right) */
  .sm\:px-0 { padding-inline: var(--spacing0); }
  .sm\:px-0-5 { padding-inline: var(--spacing0-5); }
  .sm\:px-1 { padding-inline: var(--spacing1); }
  .sm\:px-1-5 { padding-inline: var(--spacing1-5); }
  .sm\:px-2 { padding-inline: var(--spacing2); }
  .sm\:px-2-5 { padding-inline: var(--spacing2-5); }
  .sm\:px-3 { padding-inline: var(--spacing3); }
  .sm\:px-3-5 { padding-inline: var(--spacing3-5); }
  .sm\:px-4 { padding-inline: var(--spacing4); }
  .sm\:px-4-5 { padding-inline: var(--spacing4-5); }
  .sm\:px-5 { padding-inline: var(--spacing5); }
  .sm\:px-6 { padding-inline: var(--spacing6); }
  .sm\:px-7 { padding-inline: var(--spacing7); }
  .sm\:px-8 { padding-inline: var(--spacing8); }
  .sm\:px-10 { padding-inline: var(--spacing10); }
  .sm\:px-12 { padding-inline: var(--spacing12); }
  .sm\:px-14 { padding-inline: var(--spacing14); }
  .sm\:px-16 { padding-inline: var(--spacing16); }
  .sm\:px-20 { padding-inline: var(--spacing20); }
  .sm\:px-24 { padding-inline: var(--spacing24); }
  .sm\:px-30 { padding-inline: var(--spacing30); }
  .sm\:px-32 { padding-inline: var(--spacing32); }
  .sm\:px-40 { padding-inline: var(--spacing40); }
  .sm\:px-48 { padding-inline: var(--spacing48); }
  .sm\:px-56 { padding-inline: var(--spacing56); }
  .sm\:px-64 { padding-inline: var(--spacing64); }

  /* Padding block (top and bottom) */
  .sm\:py-0 { padding-block: var(--spacing0); }
  .sm\:py-0-5 { padding-block: var(--spacing0-5); }
  .sm\:py-1 { padding-block: var(--spacing1); }
  .sm\:py-1-5 { padding-block: var(--spacing1-5); }
  .sm\:py-2 { padding-block: var(--spacing2); }
  .sm\:py-2-5 { padding-block: var(--spacing2-5); }
  .sm\:py-3 { padding-block: var(--spacing3); }
  .sm\:py-3-5 { padding-block: var(--spacing3-5); }
  .sm\:py-4 { padding-block: var(--spacing4); }
  .sm\:py-4-5 { padding-block: var(--spacing4-5); }
  .sm\:py-5 { padding-block: var(--spacing5); }
  .sm\:py-6 { padding-block: var(--spacing6); }
  .sm\:py-7 { padding-block: var(--spacing7); }
  .sm\:py-8 { padding-block: var(--spacing8); }
  .sm\:py-10 { padding-block: var(--spacing10); }
  .sm\:py-12 { padding-block: var(--spacing12); }
  .sm\:py-14 { padding-block: var(--spacing14); }
  .sm\:py-16 { padding-block: var(--spacing16); }
  .sm\:py-20 { padding-block: var(--spacing20); }
  .sm\:py-24 { padding-block: var(--spacing24); }
  .sm\:py-30 { padding-block: var(--spacing30); }
  .sm\:py-32 { padding-block: var(--spacing32); }
  .sm\:py-40 { padding-block: var(--spacing40); }
  .sm\:py-48 { padding-block: var(--spacing48); }
  .sm\:py-56 { padding-block: var(--spacing56); }
  .sm\:py-64 { padding-block: var(--spacing64); }
}

@media screen and (min-width: 768px) {
  /* Padding top */
  .md\:pt-0 { padding-top: var(--spacing0); }
  .md\:pt-0-5 { padding-top: var(--spacing0-5); }
  .md\:pt-1 { padding-top: var(--spacing1); }
  .md\:pt-1-5 { padding-top: var(--spacing1-5); }
  .md\:pt-2 { padding-top: var(--spacing2); }
  .md\:pt-2-5 { padding-top: var(--spacing2-5); }
  .md\:pt-3 { padding-top: var(--spacing3); }
  .md\:pt-3-5 { padding-top: var(--spacing3-5); }
  .md\:pt-4 { padding-top: var(--spacing4); }
  .md\:pt-4-5 { padding-top: var(--spacing4-5); }
  .md\:pt-5 { padding-top: var(--spacing5); }
  .md\:pt-6 { padding-top: var(--spacing6); }
  .md\:pt-7 { padding-top: var(--spacing7); }
  .md\:pt-8 { padding-top: var(--spacing8); }
  .md\:pt-10 { padding-top: var(--spacing10); }
  .md\:pt-12 { padding-top: var(--spacing12); }
  .md\:pt-14 { padding-top: var(--spacing14); }
  .md\:pt-16 { padding-top: var(--spacing16); }
  .md\:pt-20 { padding-top: var(--spacing20); }
  .md\:pt-24 { padding-top: var(--spacing24); }
  .md\:pt-30 { padding-top: var(--spacing30); }
  .md\:pt-32 { padding-top: var(--spacing32); }
  .md\:pt-40 { padding-top: var(--spacing40); }
  .md\:pt-48 { padding-top: var(--spacing48); }
  .md\:pt-56 { padding-top: var(--spacing56); }
  .md\:pt-64 { padding-top: var(--spacing64); }

  /* Padding bottom */
  .md\:pb-0 { padding-bottom: var(--spacing0); }
  .md\:pb-0-5 { padding-bottom: var(--spacing0-5); }
  .md\:pb-1 { padding-bottom: var(--spacing1); }
  .md\:pb-1-5 { padding-bottom: var(--spacing1-5); }
  .md\:pb-2 { padding-bottom: var(--spacing2); }
  .md\:pb-2-5 { padding-bottom: var(--spacing2-5); }
  .md\:pb-3 { padding-bottom: var(--spacing3); }
  .md\:pb-3-5 { padding-bottom: var(--spacing3-5); }
  .md\:pb-4 { padding-bottom: var(--spacing4); }
  .md\:pb-4-5 { padding-bottom: var(--spacing4-5); }
  .md\:pb-5 { padding-bottom: var(--spacing5); }
  .md\:pb-6 { padding-bottom: var(--spacing6); }
  .md\:pb-7 { padding-bottom: var(--spacing7); }
  .md\:pb-8 { padding-bottom: var(--spacing8); }
  .md\:pb-10 { padding-bottom: var(--spacing10); }
  .md\:pb-12 { padding-bottom: var(--spacing12); }
  .md\:pb-14 { padding-bottom: var(--spacing14); }
  .md\:pb-16 { padding-bottom: var(--spacing16); }
  .md\:pb-20 { padding-bottom: var(--spacing20); }
  .md\:pb-24 { padding-bottom: var(--spacing24); }
  .md\:pb-30 { padding-bottom: var(--spacing30); }
  .md\:pb-32 { padding-bottom: var(--spacing32); }
  .md\:pb-40 { padding-bottom: var(--spacing40); }
  .md\:pb-48 { padding-bottom: var(--spacing48); }
  .md\:pb-56 { padding-bottom: var(--spacing56); }
  .md\:pb-64 { padding-bottom: var(--spacing64); }

  /* Padding left */
  .md\:pl-0 { padding-left: var(--spacing0); }
  .md\:pl-0-5 { padding-left: var(--spacing0-5); }
  .md\:pl-1 { padding-left: var(--spacing1); }
  .md\:pl-1-5 { padding-left: var(--spacing1-5); }
  .md\:pl-2 { padding-left: var(--spacing2); }
  .md\:pl-2-5 { padding-left: var(--spacing2-5); }
  .md\:pl-3 { padding-left: var(--spacing3); }
  .md\:pl-3-5 { padding-left: var(--spacing3-5); }
  .md\:pl-4 { padding-left: var(--spacing4); }
  .md\:pl-4-5 { padding-left: var(--spacing4-5); }
  .md\:pl-5 { padding-left: var(--spacing5); }
  .md\:pl-6 { padding-left: var(--spacing6); }
  .md\:pl-7 { padding-left: var(--spacing7); }
  .md\:pl-8 { padding-left: var(--spacing8); }
  .md\:pl-10 { padding-left: var(--spacing10); }
  .md\:pl-12 { padding-left: var(--spacing12); }
  .md\:pl-14 { padding-left: var(--spacing14); }
  .md\:pl-16 { padding-left: var(--spacing16); }
  .md\:pl-20 { padding-left: var(--spacing20); }
  .md\:pl-24 { padding-left: var(--spacing24); }
  .md\:pl-30 { padding-left: var(--spacing30); }
  .md\:pl-32 { padding-left: var(--spacing32); }
  .md\:pl-40 { padding-left: var(--spacing40); }
  .md\:pl-48 { padding-left: var(--spacing48); }
  .md\:pl-56 { padding-left: var(--spacing56); }
  .md\:pl-64 { padding-left: var(--spacing64); }

  /* Padding right */
  .md\:pr-0 { padding-right: var(--spacing0); }
  .md\:pr-0-5 { padding-right: var(--spacing0-5); }
  .md\:pr-1 { padding-right: var(--spacing1); }
  .md\:pr-1-5 { padding-right: var(--spacing1-5); }
  .md\:pr-2 { padding-right: var(--spacing2); }
  .md\:pr-2-5 { padding-right: var(--spacing2-5); }
  .md\:pr-3 { padding-right: var(--spacing3); }
  .md\:pr-3-5 { padding-right: var(--spacing3-5); }
  .md\:pr-4 { padding-right: var(--spacing4); }
  .md\:pr-4-5 { padding-right: var(--spacing4-5); }
  .md\:pr-5 { padding-right: var(--spacing5); }
  .md\:pr-6 { padding-right: var(--spacing6); }
  .md\:pr-7 { padding-right: var(--spacing7); }
  .md\:pr-8 { padding-right: var(--spacing8); }
  .md\:pr-10 { padding-right: var(--spacing10); }
  .md\:pr-12 { padding-right: var(--spacing12); }
  .md\:pr-14 { padding-right: var(--spacing14); }
  .md\:pr-16 { padding-right: var(--spacing16); }
  .md\:pr-20 { padding-right: var(--spacing20); }
  .md\:pr-24 { padding-right: var(--spacing24); }
  .md\:pr-30 { padding-right: var(--spacing30); }
  .md\:pr-32 { padding-right: var(--spacing32); }
  .md\:pr-40 { padding-right: var(--spacing40); }
  .md\:pr-48 { padding-right: var(--spacing48); }
  .md\:pr-56 { padding-right: var(--spacing56); }
  .md\:pr-64 { padding-right: var(--spacing64); }

  /* Padding inline (left and right) */
  .md\:px-0 { padding-inline: var(--spacing0); }
  .md\:px-0-5 { padding-inline: var(--spacing0-5); }
  .md\:px-1 { padding-inline: var(--spacing1); }
  .md\:px-1-5 { padding-inline: var(--spacing1-5); }
  .md\:px-2 { padding-inline: var(--spacing2); }
  .md\:px-2-5 { padding-inline: var(--spacing2-5); }
  .md\:px-3 { padding-inline: var(--spacing3); }
  .md\:px-3-5 { padding-inline: var(--spacing3-5); }
  .md\:px-4 { padding-inline: var(--spacing4); }
  .md\:px-4-5 { padding-inline: var(--spacing4-5); }
  .md\:px-5 { padding-inline: var(--spacing5); }
  .md\:px-6 { padding-inline: var(--spacing6); }
  .md\:px-7 { padding-inline: var(--spacing7); }
  .md\:px-8 { padding-inline: var(--spacing8); }
  .md\:px-10 { padding-inline: var(--spacing10); }
  .md\:px-12 { padding-inline: var(--spacing12); }
  .md\:px-14 { padding-inline: var(--spacing14); }
  .md\:px-16 { padding-inline: var(--spacing16); }
  .md\:px-20 { padding-inline: var(--spacing20); }
  .md\:px-24 { padding-inline: var(--spacing24); }
  .md\:px-30 { padding-inline: var(--spacing30); }
  .md\:px-32 { padding-inline: var(--spacing32); }
  .md\:px-40 { padding-inline: var(--spacing40); }
  .md\:px-48 { padding-inline: var(--spacing48); }
  .md\:px-56 { padding-inline: var(--spacing56); }
  .md\:px-64 { padding-inline: var(--spacing64); }

  /* Padding block (top and bottom) */
  .md\:py-0 { padding-block: var(--spacing0); }
  .md\:py-0-5 { padding-block: var(--spacing0-5); }
  .md\:py-1 { padding-block: var(--spacing1); }
  .md\:py-1-5 { padding-block: var(--spacing1-5); }
  .md\:py-2 { padding-block: var(--spacing2); }
  .md\:py-2-5 { padding-block: var(--spacing2-5); }
  .md\:py-3 { padding-block: var(--spacing3); }
  .md\:py-3-5 { padding-block: var(--spacing3-5); }
  .md\:py-4 { padding-block: var(--spacing4); }
  .md\:py-4-5 { padding-block: var(--spacing4-5); }
  .md\:py-5 { padding-block: var(--spacing5); }
  .md\:py-6 { padding-block: var(--spacing6); }
  .md\:py-7 { padding-block: var(--spacing7); }
  .md\:py-8 { padding-block: var(--spacing8); }
  .md\:py-10 { padding-block: var(--spacing10); }
  .md\:py-12 { padding-block: var(--spacing12); }
  .md\:py-14 { padding-block: var(--spacing14); }
  .md\:py-16 { padding-block: var(--spacing16); }
  .md\:py-20 { padding-block: var(--spacing20); }
  .md\:py-24 { padding-block: var(--spacing24); }
  .md\:py-30 { padding-block: var(--spacing30); }
  .md\:py-32 { padding-block: var(--spacing32); }
  .md\:py-40 { padding-block: var(--spacing40); }
  .md\:py-48 { padding-block: var(--spacing48); }
  .md\:py-56 { padding-block: var(--spacing56); }
  .md\:py-64 { padding-block: var(--spacing64); }
}

@media screen and (min-width: 992px) {
  /* Padding top */
  .lg\:pt-0 { padding-top: var(--spacing0); }
  .lg\:pt-0-5 { padding-top: var(--spacing0-5); }
  .lg\:pt-1 { padding-top: var(--spacing1); }
  .lg\:pt-1-5 { padding-top: var(--spacing1-5); }
  .lg\:pt-2 { padding-top: var(--spacing2); }
  .lg\:pt-2-5 { padding-top: var(--spacing2-5); }
  .lg\:pt-3 { padding-top: var(--spacing3); }
  .lg\:pt-3-5 { padding-top: var(--spacing3-5); }
  .lg\:pt-4 { padding-top: var(--spacing4); }
  .lg\:pt-4-5 { padding-top: var(--spacing4-5); }
  .lg\:pt-5 { padding-top: var(--spacing5); }
  .lg\:pt-6 { padding-top: var(--spacing6); }
  .lg\:pt-7 { padding-top: var(--spacing7); }
  .lg\:pt-8 { padding-top: var(--spacing8); }
  .lg\:pt-10 { padding-top: var(--spacing10); }
  .lg\:pt-12 { padding-top: var(--spacing12); }
  .lg\:pt-14 { padding-top: var(--spacing14); }
  .lg\:pt-16 { padding-top: var(--spacing16); }
  .lg\:pt-20 { padding-top: var(--spacing20); }
  .lg\:pt-24 { padding-top: var(--spacing24); }
  .lg\:pt-30 { padding-top: var(--spacing30); }
  .lg\:pt-32 { padding-top: var(--spacing32); }
  .lg\:pt-40 { padding-top: var(--spacing40); }
  .lg\:pt-48 { padding-top: var(--spacing48); }
  .lg\:pt-56 { padding-top: var(--spacing56); }
  .lg\:pt-64 { padding-top: var(--spacing64); }

  /* Padding bottom */
  .lg\:pb-0 { padding-bottom: var(--spacing0); }
  .lg\:pb-0-5 { padding-bottom: var(--spacing0-5); }
  .lg\:pb-1 { padding-bottom: var(--spacing1); }
  .lg\:pb-1-5 { padding-bottom: var(--spacing1-5); }
  .lg\:pb-2 { padding-bottom: var(--spacing2); }
  .lg\:pb-2-5 { padding-bottom: var(--spacing2-5); }
  .lg\:pb-3 { padding-bottom: var(--spacing3); }
  .lg\:pb-3-5 { padding-bottom: var(--spacing3-5); }
  .lg\:pb-4 { padding-bottom: var(--spacing4); }
  .lg\:pb-4-5 { padding-bottom: var(--spacing4-5); }
  .lg\:pb-5 { padding-bottom: var(--spacing5); }
  .lg\:pb-6 { padding-bottom: var(--spacing6); }
  .lg\:pb-7 { padding-bottom: var(--spacing7); }
  .lg\:pb-8 { padding-bottom: var(--spacing8); }
  .lg\:pb-10 { padding-bottom: var(--spacing10); }
  .lg\:pb-12 { padding-bottom: var(--spacing12); }
  .lg\:pb-14 { padding-bottom: var(--spacing14); }
  .lg\:pb-16 { padding-bottom: var(--spacing16); }
  .lg\:pb-20 { padding-bottom: var(--spacing20); }
  .lg\:pb-24 { padding-bottom: var(--spacing24); }
  .lg\:pb-30 { padding-bottom: var(--spacing30); }
  .lg\:pb-32 { padding-bottom: var(--spacing32); }
  .lg\:pb-40 { padding-bottom: var(--spacing40); }
  .lg\:pb-48 { padding-bottom: var(--spacing48); }
  .lg\:pb-56 { padding-bottom: var(--spacing56); }
  .lg\:pb-64 { padding-bottom: var(--spacing64); }

  /* Padding left */
  .lg\:pl-0 { padding-left: var(--spacing0); }
  .lg\:pl-0-5 { padding-left: var(--spacing0-5); }
  .lg\:pl-1 { padding-left: var(--spacing1); }
  .lg\:pl-1-5 { padding-left: var(--spacing1-5); }
  .lg\:pl-2 { padding-left: var(--spacing2); }
  .lg\:pl-2-5 { padding-left: var(--spacing2-5); }
  .lg\:pl-3 { padding-left: var(--spacing3); }
  .lg\:pl-3-5 { padding-left: var(--spacing3-5); }
  .lg\:pl-4 { padding-left: var(--spacing4); }
  .lg\:pl-4-5 { padding-left: var(--spacing4-5); }
  .lg\:pl-5 { padding-left: var(--spacing5); }
  .lg\:pl-6 { padding-left: var(--spacing6); }
  .lg\:pl-7 { padding-left: var(--spacing7); }
  .lg\:pl-8 { padding-left: var(--spacing8); }
  .lg\:pl-10 { padding-left: var(--spacing10); }
  .lg\:pl-12 { padding-left: var(--spacing12); }
  .lg\:pl-14 { padding-left: var(--spacing14); }
  .lg\:pl-16 { padding-left: var(--spacing16); }
  .lg\:pl-20 { padding-left: var(--spacing20); }
  .lg\:pl-24 { padding-left: var(--spacing24); }
  .lg\:pl-30 { padding-left: var(--spacing30); }
  .lg\:pl-32 { padding-left: var(--spacing32); }
  .lg\:pl-40 { padding-left: var(--spacing40); }
  .lg\:pl-48 { padding-left: var(--spacing48); }
  .lg\:pl-56 { padding-left: var(--spacing56); }
  .lg\:pl-64 { padding-left: var(--spacing64); }

  /* Padding right */
  .lg\:pr-0 { padding-right: var(--spacing0); }
  .lg\:pr-0-5 { padding-right: var(--spacing0-5); }
  .lg\:pr-1 { padding-right: var(--spacing1); }
  .lg\:pr-1-5 { padding-right: var(--spacing1-5); }
  .lg\:pr-2 { padding-right: var(--spacing2); }
  .lg\:pr-2-5 { padding-right: var(--spacing2-5); }
  .lg\:pr-3 { padding-right: var(--spacing3); }
  .lg\:pr-3-5 { padding-right: var(--spacing3-5); }
  .lg\:pr-4 { padding-right: var(--spacing4); }
  .lg\:pr-4-5 { padding-right: var(--spacing4-5); }
  .lg\:pr-5 { padding-right: var(--spacing5); }
  .lg\:pr-6 { padding-right: var(--spacing6); }
  .lg\:pr-7 { padding-right: var(--spacing7); }
  .lg\:pr-8 { padding-right: var(--spacing8); }
  .lg\:pr-10 { padding-right: var(--spacing10); }
  .lg\:pr-12 { padding-right: var(--spacing12); }
  .lg\:pr-14 { padding-right: var(--spacing14); }
  .lg\:pr-16 { padding-right: var(--spacing16); }
  .lg\:pr-20 { padding-right: var(--spacing20); }
  .lg\:pr-24 { padding-right: var(--spacing24); }
  .lg\:pr-30 { padding-right: var(--spacing30); }
  .lg\:pr-32 { padding-right: var(--spacing32); }
  .lg\:pr-40 { padding-right: var(--spacing40); }
  .lg\:pr-48 { padding-right: var(--spacing48); }
  .lg\:pr-56 { padding-right: var(--spacing56); }
  .lg\:pr-64 { padding-right: var(--spacing64); }

  /* Padding inline (left and right) */
  .lg\:px-0 { padding-inline: var(--spacing0); }
  .lg\:px-0-5 { padding-inline: var(--spacing0-5); }
  .lg\:px-1 { padding-inline: var(--spacing1); }
  .lg\:px-1-5 { padding-inline: var(--spacing1-5); }
  .lg\:px-2 { padding-inline: var(--spacing2); }
  .lg\:px-2-5 { padding-inline: var(--spacing2-5); }
  .lg\:px-3 { padding-inline: var(--spacing3); }
  .lg\:px-3-5 { padding-inline: var(--spacing3-5); }
  .lg\:px-4 { padding-inline: var(--spacing4); }
  .lg\:px-4-5 { padding-inline: var(--spacing4-5); }
  .lg\:px-5 { padding-inline: var(--spacing5); }
  .lg\:px-6 { padding-inline: var(--spacing6); }
  .lg\:px-7 { padding-inline: var(--spacing7); }
  .lg\:px-8 { padding-inline: var(--spacing8); }
  .lg\:px-10 { padding-inline: var(--spacing10); }
  .lg\:px-12 { padding-inline: var(--spacing12); }
  .lg\:px-14 { padding-inline: var(--spacing14); }
  .lg\:px-16 { padding-inline: var(--spacing16); }
  .lg\:px-20 { padding-inline: var(--spacing20); }
  .lg\:px-24 { padding-inline: var(--spacing24); }
  .lg\:px-30 { padding-inline: var(--spacing30); }
  .lg\:px-32 { padding-inline: var(--spacing32); }
  .lg\:px-40 { padding-inline: var(--spacing40); }
  .lg\:px-48 { padding-inline: var(--spacing48); }
  .lg\:px-56 { padding-inline: var(--spacing56); }
  .lg\:px-64 { padding-inline: var(--spacing64); }

  /* Padding block (top and bottom) */
  .lg\:py-0 { padding-block: var(--spacing0); }
  .lg\:py-0-5 { padding-block: var(--spacing0-5); }
  .lg\:py-1 { padding-block: var(--spacing1); }
  .lg\:py-1-5 { padding-block: var(--spacing1-5); }
  .lg\:py-2 { padding-block: var(--spacing2); }
  .lg\:py-2-5 { padding-block: var(--spacing2-5); }
  .lg\:py-3 { padding-block: var(--spacing3); }
  .lg\:py-3-5 { padding-block: var(--spacing3-5); }
  .lg\:py-4 { padding-block: var(--spacing4); }
  .lg\:py-4-5 { padding-block: var(--spacing4-5); }
  .lg\:py-5 { padding-block: var(--spacing5); }
  .lg\:py-6 { padding-block: var(--spacing6); }
  .lg\:py-7 { padding-block: var(--spacing7); }
  .lg\:py-8 { padding-block: var(--spacing8); }
  .lg\:py-10 { padding-block: var(--spacing10); }
  .lg\:py-12 { padding-block: var(--spacing12); }
  .lg\:py-14 { padding-block: var(--spacing14); }
  .lg\:py-16 { padding-block: var(--spacing16); }
  .lg\:py-20 { padding-block: var(--spacing20); }
  .lg\:py-24 { padding-block: var(--spacing24); }
  .lg\:py-30 { padding-block: var(--spacing30); }
  .lg\:py-32 { padding-block: var(--spacing32); }
  .lg\:py-40 { padding-block: var(--spacing40); }
  .lg\:py-48 { padding-block: var(--spacing48); }
  .lg\:py-56 { padding-block: var(--spacing56); }
  .lg\:py-64 { padding-block: var(--spacing64); }
}

@media screen and (min-width: 1200px) {
  /* Padding top */
  .xl\:pt-0 { padding-top: var(--spacing0); }
  .xl\:pt-0-5 { padding-top: var(--spacing0-5); }
  .xl\:pt-1 { padding-top: var(--spacing1); }
  .xl\:pt-1-5 { padding-top: var(--spacing1-5); }
  .xl\:pt-2 { padding-top: var(--spacing2); }
  .xl\:pt-2-5 { padding-top: var(--spacing2-5); }
  .xl\:pt-3 { padding-top: var(--spacing3); }
  .xl\:pt-3-5 { padding-top: var(--spacing3-5); }
  .xl\:pt-4 { padding-top: var(--spacing4); }
  .xl\:pt-4-5 { padding-top: var(--spacing4-5); }
  .xl\:pt-5 { padding-top: var(--spacing5); }
  .xl\:pt-6 { padding-top: var(--spacing6); }
  .xl\:pt-7 { padding-top: var(--spacing7); }
  .xl\:pt-8 { padding-top: var(--spacing8); }
  .xl\:pt-10 { padding-top: var(--spacing10); }
  .xl\:pt-12 { padding-top: var(--spacing12); }
  .xl\:pt-14 { padding-top: var(--spacing14); }
  .xl\:pt-16 { padding-top: var(--spacing16); }
  .xl\:pt-20 { padding-top: var(--spacing20); }
  .xl\:pt-24 { padding-top: var(--spacing24); }
  .xl\:pt-30 { padding-top: var(--spacing30); }
  .xl\:pt-32 { padding-top: var(--spacing32); }
  .xl\:pt-40 { padding-top: var(--spacing40); }
  .xl\:pt-48 { padding-top: var(--spacing48); }
  .xl\:pt-56 { padding-top: var(--spacing56); }
  .xl\:pt-64 { padding-top: var(--spacing64); }

  /* Padding bottom */
  .xl\:pb-0 { padding-bottom: var(--spacing0); }
  .xl\:pb-0-5 { padding-bottom: var(--spacing0-5); }
  .xl\:pb-1 { padding-bottom: var(--spacing1); }
  .xl\:pb-1-5 { padding-bottom: var(--spacing1-5); }
  .xl\:pb-2 { padding-bottom: var(--spacing2); }
  .xl\:pb-2-5 { padding-bottom: var(--spacing2-5); }
  .xl\:pb-3 { padding-bottom: var(--spacing3); }
  .xl\:pb-3-5 { padding-bottom: var(--spacing3-5); }
  .xl\:pb-4 { padding-bottom: var(--spacing4); }
  .xl\:pb-4-5 { padding-bottom: var(--spacing4-5); }
  .xl\:pb-5 { padding-bottom: var(--spacing5); }
  .xl\:pb-6 { padding-bottom: var(--spacing6); }
  .xl\:pb-7 { padding-bottom: var(--spacing7); }
  .xl\:pb-8 { padding-bottom: var(--spacing8); }
  .xl\:pb-10 { padding-bottom: var(--spacing10); }
  .xl\:pb-12 { padding-bottom: var(--spacing12); }
  .xl\:pb-14 { padding-bottom: var(--spacing14); }
  .xl\:pb-16 { padding-bottom: var(--spacing16); }
  .xl\:pb-20 { padding-bottom: var(--spacing20); }
  .xl\:pb-24 { padding-bottom: var(--spacing24); }
  .xl\:pb-30 { padding-bottom: var(--spacing30); }
  .xl\:pb-32 { padding-bottom: var(--spacing32); }
  .xl\:pb-40 { padding-bottom: var(--spacing40); }
  .xl\:pb-48 { padding-bottom: var(--spacing48); }
  .xl\:pb-56 { padding-bottom: var(--spacing56); }
  .xl\:pb-64 { padding-bottom: var(--spacing64); }

  /* Padding left */
  .xl\:pl-0 { padding-left: var(--spacing0); }
  .xl\:pl-0-5 { padding-left: var(--spacing0-5); }
  .xl\:pl-1 { padding-left: var(--spacing1); }
  .xl\:pl-1-5 { padding-left: var(--spacing1-5); }
  .xl\:pl-2 { padding-left: var(--spacing2); }
  .xl\:pl-2-5 { padding-left: var(--spacing2-5); }
  .xl\:pl-3 { padding-left: var(--spacing3); }
  .xl\:pl-3-5 { padding-left: var(--spacing3-5); }
  .xl\:pl-4 { padding-left: var(--spacing4); }
  .xl\:pl-4-5 { padding-left: var(--spacing4-5); }
  .xl\:pl-5 { padding-left: var(--spacing5); }
  .xl\:pl-6 { padding-left: var(--spacing6); }
  .xl\:pl-7 { padding-left: var(--spacing7); }
  .xl\:pl-8 { padding-left: var(--spacing8); }
  .xl\:pl-10 { padding-left: var(--spacing10); }
  .xl\:pl-12 { padding-left: var(--spacing12); }
  .xl\:pl-14 { padding-left: var(--spacing14); }
  .xl\:pl-16 { padding-left: var(--spacing16); }
  .xl\:pl-20 { padding-left: var(--spacing20); }
  .xl\:pl-24 { padding-left: var(--spacing24); }
  .xl\:pl-30 { padding-left: var(--spacing30); }
  .xl\:pl-32 { padding-left: var(--spacing32); }
  .xl\:pl-40 { padding-left: var(--spacing40); }
  .xl\:pl-48 { padding-left: var(--spacing48); }
  .xl\:pl-56 { padding-left: var(--spacing56); }
  .xl\:pl-64 { padding-left: var(--spacing64); }

  /* Padding right */
  .xl\:pr-0 { padding-right: var(--spacing0); }
  .xl\:pr-0-5 { padding-right: var(--spacing0-5); }
  .xl\:pr-1 { padding-right: var(--spacing1); }
  .xl\:pr-1-5 { padding-right: var(--spacing1-5); }
  .xl\:pr-2 { padding-right: var(--spacing2); }
  .xl\:pr-2-5 { padding-right: var(--spacing2-5); }
  .xl\:pr-3 { padding-right: var(--spacing3); }
  .xl\:pr-3-5 { padding-right: var(--spacing3-5); }
  .xl\:pr-4 { padding-right: var(--spacing4); }
  .xl\:pr-4-5 { padding-right: var(--spacing4-5); }
  .xl\:pr-5 { padding-right: var(--spacing5); }
  .xl\:pr-6 { padding-right: var(--spacing6); }
  .xl\:pr-7 { padding-right: var(--spacing7); }
  .xl\:pr-8 { padding-right: var(--spacing8); }
  .xl\:pr-10 { padding-right: var(--spacing10); }
  .xl\:pr-12 { padding-right: var(--spacing12); }
  .xl\:pr-14 { padding-right: var(--spacing14); }
  .xl\:pr-16 { padding-right: var(--spacing16); }
  .xl\:pr-20 { padding-right: var(--spacing20); }
  .xl\:pr-24 { padding-right: var(--spacing24); }
  .xl\:pr-30 { padding-right: var(--spacing30); }
  .xl\:pr-32 { padding-right: var(--spacing32); }
  .xl\:pr-40 { padding-right: var(--spacing40); }
  .xl\:pr-48 { padding-right: var(--spacing48); }
  .xl\:pr-56 { padding-right: var(--spacing56); }
  .xl\:pr-64 { padding-right: var(--spacing64); }

  /* Padding inline (left and right) */
  .xl\:px-0 { padding-inline: var(--spacing0); }
  .xl\:px-0-5 { padding-inline: var(--spacing0-5); }
  .xl\:px-1 { padding-inline: var(--spacing1); }
  .xl\:px-1-5 { padding-inline: var(--spacing1-5); }
  .xl\:px-2 { padding-inline: var(--spacing2); }
  .xl\:px-2-5 { padding-inline: var(--spacing2-5); }
  .xl\:px-3 { padding-inline: var(--spacing3); }
  .xl\:px-3-5 { padding-inline: var(--spacing3-5); }
  .xl\:px-4 { padding-inline: var(--spacing4); }
  .xl\:px-4-5 { padding-inline: var(--spacing4-5); }
  .xl\:px-5 { padding-inline: var(--spacing5); }
  .xl\:px-6 { padding-inline: var(--spacing6); }
  .xl\:px-7 { padding-inline: var(--spacing7); }
  .xl\:px-8 { padding-inline: var(--spacing8); }
  .xl\:px-10 { padding-inline: var(--spacing10); }
  .xl\:px-12 { padding-inline: var(--spacing12); }
  .xl\:px-14 { padding-inline: var(--spacing14); }
  .xl\:px-16 { padding-inline: var(--spacing16); }
  .xl\:px-20 { padding-inline: var(--spacing20); }
  .xl\:px-24 { padding-inline: var(--spacing24); }
  .xl\:px-30 { padding-inline: var(--spacing30); }
  .xl\:px-32 { padding-inline: var(--spacing32); }
  .xl\:px-40 { padding-inline: var(--spacing40); }
  .xl\:px-48 { padding-inline: var(--spacing48); }
  .xl\:px-56 { padding-inline: var(--spacing56); }
  .xl\:px-64 { padding-inline: var(--spacing64); }

  /* Padding block (top and bottom) */
  .xl\:py-0 { padding-block: var(--spacing0); }
  .xl\:py-0-5 { padding-block: var(--spacing0-5); }
  .xl\:py-1 { padding-block: var(--spacing1); }
  .xl\:py-1-5 { padding-block: var(--spacing1-5); }
  .xl\:py-2 { padding-block: var(--spacing2); }
  .xl\:py-2-5 { padding-block: var(--spacing2-5); }
  .xl\:py-3 { padding-block: var(--spacing3); }
  .xl\:py-3-5 { padding-block: var(--spacing3-5); }
  .xl\:py-4 { padding-block: var(--spacing4); }
  .xl\:py-4-5 { padding-block: var(--spacing4-5); }
  .xl\:py-5 { padding-block: var(--spacing5); }
  .xl\:py-6 { padding-block: var(--spacing6); }
  .xl\:py-7 { padding-block: var(--spacing7); }
  .xl\:py-8 { padding-block: var(--spacing8); }
  .xl\:py-10 { padding-block: var(--spacing10); }
  .xl\:py-12 { padding-block: var(--spacing12); }
  .xl\:py-14 { padding-block: var(--spacing14); }
  .xl\:py-16 { padding-block: var(--spacing16); }
  .xl\:py-20 { padding-block: var(--spacing20); }
  .xl\:py-24 { padding-block: var(--spacing24); }
  .xl\:py-30 { padding-block: var(--spacing30); }
  .xl\:py-32 { padding-block: var(--spacing32); }
  .xl\:py-40 { padding-block: var(--spacing40); }
  .xl\:py-48 { padding-block: var(--spacing48); }
  .xl\:py-56 { padding-block: var(--spacing56); }
  .xl\:py-64 { padding-block: var(--spacing64); }
}

@media screen and (min-width: 1400px) {
  /* Padding top */
  .xxl\:pt-0 { padding-top: var(--spacing0); }
  .xxl\:pt-0-5 { padding-top: var(--spacing0-5); }
  .xxl\:pt-1 { padding-top: var(--spacing1); }
  .xxl\:pt-1-5 { padding-top: var(--spacing1-5); }
  .xxl\:pt-2 { padding-top: var(--spacing2); }
  .xxl\:pt-2-5 { padding-top: var(--spacing2-5); }
  .xxl\:pt-3 { padding-top: var(--spacing3); }
  .xxl\:pt-3-5 { padding-top: var(--spacing3-5); }
  .xxl\:pt-4 { padding-top: var(--spacing4); }
  .xxl\:pt-4-5 { padding-top: var(--spacing4-5); }
  .xxl\:pt-5 { padding-top: var(--spacing5); }
  .xxl\:pt-6 { padding-top: var(--spacing6); }
  .xxl\:pt-7 { padding-top: var(--spacing7); }
  .xxl\:pt-8 { padding-top: var(--spacing8); }
  .xxl\:pt-10 { padding-top: var(--spacing10); }
  .xxl\:pt-12 { padding-top: var(--spacing12); }
  .xxl\:pt-14 { padding-top: var(--spacing14); }
  .xxl\:pt-16 { padding-top: var(--spacing16); }
  .xxl\:pt-20 { padding-top: var(--spacing20); }
  .xxl\:pt-24 { padding-top: var(--spacing24); }
  .xxl\:pt-30 { padding-top: var(--spacing30); }
  .xxl\:pt-32 { padding-top: var(--spacing32); }
  .xxl\:pt-40 { padding-top: var(--spacing40); }
  .xxl\:pt-48 { padding-top: var(--spacing48); }
  .xxl\:pt-56 { padding-top: var(--spacing56); }
  .xxl\:pt-64 { padding-top: var(--spacing64); }

  /* Padding bottom */
  .xxl\:pb-0 { padding-bottom: var(--spacing0); }
  .xxl\:pb-0-5 { padding-bottom: var(--spacing0-5); }
  .xxl\:pb-1 { padding-bottom: var(--spacing1); }
  .xxl\:pb-1-5 { padding-bottom: var(--spacing1-5); }
  .xxl\:pb-2 { padding-bottom: var(--spacing2); }
  .xxl\:pb-2-5 { padding-bottom: var(--spacing2-5); }
  .xxl\:pb-3 { padding-bottom: var(--spacing3); }
  .xxl\:pb-3-5 { padding-bottom: var(--spacing3-5); }
  .xxl\:pb-4 { padding-bottom: var(--spacing4); }
  .xxl\:pb-4-5 { padding-bottom: var(--spacing4-5); }
  .xxl\:pb-5 { padding-bottom: var(--spacing5); }
  .xxl\:pb-6 { padding-bottom: var(--spacing6); }
  .xxl\:pb-7 { padding-bottom: var(--spacing7); }
  .xxl\:pb-8 { padding-bottom: var(--spacing8); }
  .xxl\:pb-10 { padding-bottom: var(--spacing10); }
  .xxl\:pb-12 { padding-bottom: var(--spacing12); }
  .xxl\:pb-14 { padding-bottom: var(--spacing14); }
  .xxl\:pb-16 { padding-bottom: var(--spacing16); }
  .xxl\:pb-20 { padding-bottom: var(--spacing20); }
  .xxl\:pb-24 { padding-bottom: var(--spacing24); }
  .xxl\:pb-30 { padding-bottom: var(--spacing30); }
  .xxl\:pb-32 { padding-bottom: var(--spacing32); }
  .xxl\:pb-40 { padding-bottom: var(--spacing40); }
  .xxl\:pb-48 { padding-bottom: var(--spacing48); }
  .xxl\:pb-56 { padding-bottom: var(--spacing56); }
  .xxl\:pb-64 { padding-bottom: var(--spacing64); }

  /* Padding left */
  .xxl\:pl-0 { padding-left: var(--spacing0); }
  .xxl\:pl-0-5 { padding-left: var(--spacing0-5); }
  .xxl\:pl-1 { padding-left: var(--spacing1); }
  .xxl\:pl-1-5 { padding-left: var(--spacing1-5); }
  .xxl\:pl-2 { padding-left: var(--spacing2); }
  .xxl\:pl-2-5 { padding-left: var(--spacing2-5); }
  .xxl\:pl-3 { padding-left: var(--spacing3); }
  .xxl\:pl-3-5 { padding-left: var(--spacing3-5); }
  .xxl\:pl-4 { padding-left: var(--spacing4); }
  .xxl\:pl-4-5 { padding-left: var(--spacing4-5); }
  .xxl\:pl-5 { padding-left: var(--spacing5); }
  .xxl\:pl-6 { padding-left: var(--spacing6); }
  .xxl\:pl-7 { padding-left: var(--spacing7); }
  .xxl\:pl-8 { padding-left: var(--spacing8); }
  .xxl\:pl-10 { padding-left: var(--spacing10); }
  .xxl\:pl-12 { padding-left: var(--spacing12); }
  .xxl\:pl-14 { padding-left: var(--spacing14); }
  .xxl\:pl-16 { padding-left: var(--spacing16); }
  .xxl\:pl-20 { padding-left: var(--spacing20); }
  .xxl\:pl-24 { padding-left: var(--spacing24); }
  .xxl\:pl-30 { padding-left: var(--spacing30); }
  .xxl\:pl-32 { padding-left: var(--spacing32); }
  .xxl\:pl-40 { padding-left: var(--spacing40); }
  .xxl\:pl-48 { padding-left: var(--spacing48); }
  .xxl\:pl-56 { padding-left: var(--spacing56); }
  .xxl\:pl-64 { padding-left: var(--spacing64); }

  /* Padding right */
  .xxl\:pr-0 { padding-right: var(--spacing0); }
  .xxl\:pr-0-5 { padding-right: var(--spacing0-5); }
  .xxl\:pr-1 { padding-right: var(--spacing1); }
  .xxl\:pr-1-5 { padding-right: var(--spacing1-5); }
  .xxl\:pr-2 { padding-right: var(--spacing2); }
  .xxl\:pr-2-5 { padding-right: var(--spacing2-5); }
  .xxl\:pr-3 { padding-right: var(--spacing3); }
  .xxl\:pr-3-5 { padding-right: var(--spacing3-5); }
  .xxl\:pr-4 { padding-right: var(--spacing4); }
  .xxl\:pr-4-5 { padding-right: var(--spacing4-5); }
  .xxl\:pr-5 { padding-right: var(--spacing5); }
  .xxl\:pr-6 { padding-right: var(--spacing6); }
  .xxl\:pr-7 { padding-right: var(--spacing7); }
  .xxl\:pr-8 { padding-right: var(--spacing8); }
  .xxl\:pr-10 { padding-right: var(--spacing10); }
  .xxl\:pr-12 { padding-right: var(--spacing12); }
  .xxl\:pr-14 { padding-right: var(--spacing14); }
  .xxl\:pr-16 { padding-right: var(--spacing16); }
  .xxl\:pr-20 { padding-right: var(--spacing20); }
  .xxl\:pr-24 { padding-right: var(--spacing24); }
  .xxl\:pr-30 { padding-right: var(--spacing30); }
  .xxl\:pr-32 { padding-right: var(--spacing32); }
  .xxl\:pr-40 { padding-right: var(--spacing40); }
  .xxl\:pr-48 { padding-right: var(--spacing48); }
  .xxl\:pr-56 { padding-right: var(--spacing56); }
  .xxl\:pr-64 { padding-right: var(--spacing64); }

  /* Padding inline (left and right) */
  .xxl\:px-0 { padding-inline: var(--spacing0); }
  .xxl\:px-0-5 { padding-inline: var(--spacing0-5); }
  .xxl\:px-1 { padding-inline: var(--spacing1); }
  .xxl\:px-1-5 { padding-inline: var(--spacing1-5); }
  .xxl\:px-2 { padding-inline: var(--spacing2); }
  .xxl\:px-2-5 { padding-inline: var(--spacing2-5); }
  .xxl\:px-3 { padding-inline: var(--spacing3); }
  .xxl\:px-3-5 { padding-inline: var(--spacing3-5); }
  .xxl\:px-4 { padding-inline: var(--spacing4); }
  .xxl\:px-4-5 { padding-inline: var(--spacing4-5); }
  .xxl\:px-5 { padding-inline: var(--spacing5); }
  .xxl\:px-6 { padding-inline: var(--spacing6); }
  .xxl\:px-7 { padding-inline: var(--spacing7); }
  .xxl\:px-8 { padding-inline: var(--spacing8); }
  .xxl\:px-10 { padding-inline: var(--spacing10); }
  .xxl\:px-12 { padding-inline: var(--spacing12); }
  .xxl\:px-14 { padding-inline: var(--spacing14); }
  .xxl\:px-16 { padding-inline: var(--spacing16); }
  .xxl\:px-20 { padding-inline: var(--spacing20); }
  .xxl\:px-24 { padding-inline: var(--spacing24); }
  .xxl\:px-30 { padding-inline: var(--spacing30); }
  .xxl\:px-32 { padding-inline: var(--spacing32); }
  .xxl\:px-40 { padding-inline: var(--spacing40); }
  .xxl\:px-48 { padding-inline: var(--spacing48); }
  .xxl\:px-56 { padding-inline: var(--spacing56); }
  .xxl\:px-64 { padding-inline: var(--spacing64); }

  /* Padding block (top and bottom) */
  .xxl\:py-0 { padding-block: var(--spacing0); }
  .xxl\:py-0-5 { padding-block: var(--spacing0-5); }
  .xxl\:py-1 { padding-block: var(--spacing1); }
  .xxl\:py-1-5 { padding-block: var(--spacing1-5); }
  .xxl\:py-2 { padding-block: var(--spacing2); }
  .xxl\:py-2-5 { padding-block: var(--spacing2-5); }
  .xxl\:py-3 { padding-block: var(--spacing3); }
  .xxl\:py-3-5 { padding-block: var(--spacing3-5); }
  .xxl\:py-4 { padding-block: var(--spacing4); }
  .xxl\:py-4-5 { padding-block: var(--spacing4-5); }
  .xxl\:py-5 { padding-block: var(--spacing5); }
  .xxl\:py-6 { padding-block: var(--spacing6); }
  .xxl\:py-7 { padding-block: var(--spacing7); }
  .xxl\:py-8 { padding-block: var(--spacing8); }
  .xxl\:py-10 { padding-block: var(--spacing10); }
  .xxl\:py-12 { padding-block: var(--spacing12); }
  .xxl\:py-14 { padding-block: var(--spacing14); }
  .xxl\:py-16 { padding-block: var(--spacing16); }
  .xxl\:py-20 { padding-block: var(--spacing20); }
  .xxl\:py-24 { padding-block: var(--spacing24); }
  .xxl\:py-30 { padding-block: var(--spacing30); }
  .xxl\:py-32 { padding-block: var(--spacing32); }
  .xxl\:py-40 { padding-block: var(--spacing40); }
  .xxl\:py-48 { padding-block: var(--spacing48); }
  .xxl\:py-56 { padding-block: var(--spacing56); }
  .xxl\:py-64 { padding-block: var(--spacing64); }
}


/* ================= */
/* === ROUNDINGS === */
/* ================= */

/* Rounding global */
.rounding-0 { border-radius: var(--radius0); }
.rounding-0-5 { border-radius: var(--radius0-5); }
.rounding-1 { border-radius: var(--radius1); }
.rounding-1-5 { border-radius: var(--radius1-5); }
.rounding-2 { border-radius: var(--radius2); }
.rounding-2-5 { border-radius: var(--radius2-5); }
.rounding-3 { border-radius: var(--radius3); }
.rounding-4 { border-radius: var(--radius4); }
.rounding-5 { border-radius: var(--radius5); }
.rounding-6 { border-radius: var(--radius6); }
.rounding-8 { border-radius: var(--radius8); }
.rounding-10 { border-radius: var(--radius10); }
.rounding-12 { border-radius: var(--radius12); }
.rounding-14 { border-radius: var(--radius14); }
.rounding-16 { border-radius: var(--radius16); }
.rounding-20 { border-radius: var(--radius20); }
.rounding-24 { border-radius: var(--radius24); }

/* Rounding top (top-left et top-right) */
.rounding-t-0 {
  border-top-left-radius: var(--radius0);
  border-top-right-radius: var(--radius0);
}
.rounding-t-0-5 {
  border-top-left-radius: var(--radius0-5);
  border-top-right-radius: var(--radius0-5);
}
.rounding-t-1 {
  border-top-left-radius: var(--radius1);
  border-top-right-radius: var(--radius1);
}
.rounding-t-1-5 {
  border-top-left-radius: var(--radius1-5);
  border-top-right-radius: var(--radius1-5);
}
.rounding-t-2 {
  border-top-left-radius: var(--radius2);
  border-top-right-radius: var(--radius2);
}
.rounding-t-2-5 {
  border-top-left-radius: var(--radius2-5);
  border-top-right-radius: var(--radius2-5);
}
.rounding-t-3 {
  border-top-left-radius: var(--radius3);
  border-top-right-radius: var(--radius3); 
}
.rounding-t-4 {
  border-top-left-radius: var(--radius4);
  border-top-right-radius: var(--radius4); 
}
.rounding-t-5 {
  border-top-left-radius: var(--radius5);
  border-top-right-radius: var(--radius5); 
}
.rounding-t-6 {
  border-top-left-radius: var(--radius6);
  border-top-right-radius: var(--radius6); 
}
.rounding-t-8 {
  border-top-left-radius: var(--radius8);
  border-top-right-radius: var(--radius8); 
}
.rounding-t-10 {
  border-top-left-radius: var(--radius10);
  border-top-right-radius: var(--radius10); 
}
.rounding-t-12 {
  border-top-left-radius: var(--radius12);
  border-top-right-radius: var(--radius12); 
}
.rounding-t-14 {
  border-top-left-radius: var(--radius14);
  border-top-right-radius: var(--radius14);
}
.rounding-t-16 {
  border-top-left-radius: var(--radius16);
  border-top-right-radius: var(--radius16);
}
.rounding-t-20 {
  border-top-left-radius: var(--radius20);
  border-top-right-radius: var(--radius20);
}
.rounding-t-24 {
  border-top-left-radius: var(--radius24);
  border-top-right-radius: var(--radius24);
}

/* Rounding left (top-left et bottom-left) */
.rounding-l-0 {
  border-top-left-radius: var(--radius0);
  border-bottom-left-radius: var(--radius0);
}
.rounding-l-0-5 {
  border-top-left-radius: var(--radius0-5);
  border-bottom-left-radius: var(--radius0-5);
}
.rounding-l-1 {
  border-top-left-radius: var(--radius1);
  border-bottom-left-radius: var(--radius1);
}
.rounding-l-1-5 {
  border-top-left-radius: var(--radius1-5);
  border-bottom-left-radius: var(--radius1-5);
}
.rounding-l-2 {
  border-top-left-radius: var(--radius2);
  border-bottom-left-radius: var(--radius2);
}
.rounding-l-2-5 {
  border-top-left-radius: var(--radius2-5);
  border-bottom-left-radius: var(--radius2-5);
}
.rounding-l-3 {
  border-top-left-radius: var(--radius3);
  border-bottom-left-radius: var(--radius3); 
}
.rounding-l-4 {
  border-top-left-radius: var(--radius4);
  border-bottom-left-radius: var(--radius4); 
}
.rounding-l-5 {
  border-top-left-radius: var(--radius5);
  border-bottom-left-radius: var(--radius5); 
}
.rounding-l-6 {
  border-top-left-radius: var(--radius6);
  border-bottom-left-radius: var(--radius6); 
}
.rounding-l-8 {
  border-top-left-radius: var(--radius8);
  border-bottom-left-radius: var(--radius8); 
}
.rounding-l-10 {
  border-top-left-radius: var(--radius10);
  border-bottom-left-radius: var(--radius10); 
}
.rounding-l-12 {
  border-top-left-radius: var(--radius12);
  border-bottom-left-radius: var(--radius12); 
}
.rounding-l-14 {
  border-top-left-radius: var(--radius14);
  border-bottom-left-radius: var(--radius14);
}
.rounding-l-16 {
  border-top-left-radius: var(--radius16);
  border-bottom-left-radius: var(--radius16);
}
.rounding-l-20 {
  border-top-left-radius: var(--radius20);
  border-bottom-left-radius: var(--radius20);
}
.rounding-l-24 {
  border-top-left-radius: var(--radius24);
  border-bottom-left-radius: var(--radius24);
}

/* Rounding right (top-right et bottom-right) */
.rounding-r-0 {
  border-top-right-radius: var(--radius0);
  border-bottom-right-radius: var(--radius0);
}
.rounding-r-0-5 {
  border-top-right-radius: var(--radius0-5);
  border-bottom-right-radius: var(--radius0-5);
}
.rounding-r-1 {
  border-top-right-radius: var(--radius1);
  border-bottom-right-radius: var(--radius1);
}
.rounding-r-1-5 {
  border-top-right-radius: var(--radius1-5);
  border-bottom-right-radius: var(--radius1-5);
}
.rounding-r-2 {
  border-top-right-radius: var(--radius2);
  border-bottom-right-radius: var(--radius2);
}
.rounding-r-2-5 {
  border-top-right-radius: var(--radius2-5);
  border-bottom-right-radius: var(--radius2-5);
}
.rounding-r-3 {
  border-top-right-radius: var(--radius3);
  border-bottom-right-radius: var(--radius3); 
}
.rounding-r-4 {
  border-top-right-radius: var(--radius4);
  border-bottom-right-radius: var(--radius4); 
}
.rounding-r-5 {
  border-top-right-radius: var(--radius5);
  border-bottom-right-radius: var(--radius5); 
}
.rounding-r-6 {
  border-top-right-radius: var(--radius6);
  border-bottom-right-radius: var(--radius6); 
}
.rounding-r-8 {
  border-top-right-radius: var(--radius8);
  border-bottom-right-radius: var(--radius8); 
}
.rounding-r-10 {
  border-top-right-radius: var(--radius10);
  border-bottom-right-radius: var(--radius10); 
}
.rounding-r-12 {
  border-top-right-radius: var(--radius12);
  border-bottom-right-radius: var(--radius12); 
}
.rounding-r-14 {
  border-top-right-radius: var(--radius14);
  border-bottom-right-radius: var(--radius14);
}
.rounding-r-16 {
  border-top-right-radius: var(--radius16);
  border-bottom-right-radius: var(--radius16);
}
.rounding-r-20 {
  border-top-right-radius: var(--radius20);
  border-bottom-right-radius: var(--radius20);
}
.rounding-r-24 {
  border-top-right-radius: var(--radius24);
  border-bottom-right-radius: var(--radius24);
}

/* Rounding bottom (bottom-left et bottom-right) */
.rounding-b-0 {
  border-bottom-left-radius: var(--radius0);
  border-bottom-right-radius: var(--radius0);
}
.rounding-b-0-5 {
  border-bottom-left-radius: var(--radius0-5);
  border-bottom-right-radius: var(--radius0-5);
}
.rounding-b-1 {
  border-bottom-left-radius: var(--radius1);
  border-bottom-right-radius: var(--radius1);
}
.rounding-b-1-5 {
  border-bottom-left-radius: var(--radius1-5);
  border-bottom-right-radius: var(--radius1-5);
}
.rounding-b-2 {
  border-bottom-left-radius: var(--radius2);
  border-bottom-right-radius: var(--radius2);
}
.rounding-b-2-5 {
  border-bottom-left-radius: var(--radius2-5);
  border-bottom-right-radius: var(--radius2-5);
}
.rounding-b-3 {
  border-bottom-left-radius: var(--radius3);
  border-bottom-right-radius: var(--radius3); 
}
.rounding-b-4 {
  border-bottom-left-radius: var(--radius4);
  border-bottom-right-radius: var(--radius4); 
}
.rounding-b-5 {
  border-bottom-left-radius: var(--radius5);
  border-bottom-right-radius: var(--radius5); 
}
.rounding-b-6 {
  border-bottom-left-radius: var(--radius6);
  border-bottom-right-radius: var(--radius6); 
}
.rounding-b-8 {
  border-bottom-left-radius: var(--radius8);
  border-bottom-right-radius: var(--radius8); 
}
.rounding-b-10 {
  border-bottom-left-radius: var(--radius10);
  border-bottom-right-radius: var(--radius10); 
}
.rounding-b-12 {
  border-bottom-left-radius: var(--radius12);
  border-bottom-right-radius: var(--radius12); 
}
.rounding-b-14 {
  border-bottom-left-radius: var(--radius14);
  border-bottom-right-radius: var(--radius14);
}
.rounding-b-16 {
  border-bottom-left-radius: var(--radius16);
  border-bottom-right-radius: var(--radius16);
}
.rounding-b-20 {
  border-bottom-left-radius: var(--radius20);
  border-bottom-right-radius: var(--radius20);
}
.rounding-b-24 {
  border-bottom-left-radius: var(--radius24);
  border-bottom-right-radius: var(--radius24);
}

/* Rounding top-left */
.rounding-tl-0 { border-top-left-radius: var(--radius0); }
.rounding-tl-0-5 { border-top-left-radius: var(--radius0-5); }
.rounding-tl-1 { border-top-left-radius: var(--radius1); }
.rounding-tl-1-5 { border-top-left-radius: var(--radius1-5); }
.rounding-tl-2 { border-top-left-radius: var(--radius2); }
.rounding-tl-2-5 { border-top-left-radius: var(--radius2-5); }
.rounding-tl-3 { border-top-left-radius: var(--radius3); }
.rounding-tl-4 { border-top-left-radius: var(--radius4); }
.rounding-tl-5 { border-top-left-radius: var(--radius5); }
.rounding-tl-6 { border-top-left-radius: var(--radius6); }
.rounding-tl-8 { border-top-left-radius: var(--radius8); }
.rounding-tl-10 { border-top-left-radius: var(--radius10); }
.rounding-tl-12 { border-top-left-radius: var(--radius12); }
.rounding-tl-14 { border-top-left-radius: var(--radius14); }
.rounding-tl-16 { border-top-left-radius: var(--radius16); }
.rounding-tl-20 { border-top-left-radius: var(--radius20); }
.rounding-tl-24 { border-top-left-radius: var(--radius24); }

/* Rounding top-right */
.rounding-tr-0 { border-top-right-radius: var(--radius0); }
.rounding-tr-0-5 { border-top-right-radius: var(--radius0-5); }
.rounding-tr-1 { border-top-right-radius: var(--radius1); }
.rounding-tr-1-5 { border-top-right-radius: var(--radius1-5); }
.rounding-tr-2 { border-top-right-radius: var(--radius2); }
.rounding-tr-2-5 { border-top-right-radius: var(--radius2-5); }
.rounding-tr-3 { border-top-right-radius: var(--radius3); }
.rounding-tr-4 { border-top-right-radius: var(--radius4); }
.rounding-tr-5 { border-top-right-radius: var(--radius5); }
.rounding-tr-6 { border-top-right-radius: var(--radius6); }
.rounding-tr-8 { border-top-right-radius: var(--radius8); }
.rounding-tr-10 { border-top-right-radius: var(--radius10); }
.rounding-tr-12 { border-top-right-radius: var(--radius12); }
.rounding-tr-14 { border-top-right-radius: var(--radius14); }
.rounding-tr-16 { border-top-right-radius: var(--radius16); }
.rounding-tr-20 { border-top-right-radius: var(--radius20); }
.rounding-tr-24 { border-top-right-radius: var(--radius24); }

/* Rounding bottom-left */
.rounding-bl-0 { border-bottom-left-radius: var(--radius0); }
.rounding-bl-0-5 { border-bottom-left-radius: var(--radius0-5); }
.rounding-bl-1 { border-bottom-left-radius: var(--radius1); }
.rounding-bl-1-5 { border-bottom-left-radius: var(--radius1-5); }
.rounding-bl-2 { border-bottom-left-radius: var(--radius2); }
.rounding-bl-2-5 { border-bottom-left-radius: var(--radius2-5); }
.rounding-bl-3 { border-bottom-left-radius: var(--radius3); }
.rounding-bl-4 { border-bottom-left-radius: var(--radius4); }
.rounding-bl-5 { border-bottom-left-radius: var(--radius5); }
.rounding-bl-6 { border-bottom-left-radius: var(--radius6); }
.rounding-bl-8 { border-bottom-left-radius: var(--radius8); }
.rounding-bl-10 { border-bottom-left-radius: var(--radius10); }
.rounding-bl-12 { border-bottom-left-radius: var(--radius12); }
.rounding-bl-14 { border-bottom-left-radius: var(--radius14); }
.rounding-bl-16 { border-bottom-left-radius: var(--radius16); }
.rounding-bl-20 { border-bottom-left-radius: var(--radius20); }
.rounding-bl-24 { border-bottom-left-radius: var(--radius24); }

/* Rounding bottom-right */
.rounding-br-0 { border-bottom-right-radius: var(--radius0); }
.rounding-br-0-5 { border-bottom-right-radius: var(--radius0-5); }
.rounding-br-1 { border-bottom-right-radius: var(--radius1); }
.rounding-br-1-5 { border-bottom-right-radius: var(--radius1-5); }
.rounding-br-2 { border-bottom-right-radius: var(--radius2); }
.rounding-br-2-5 { border-bottom-right-radius: var(--radius2-5); }
.rounding-br-3 { border-bottom-right-radius: var(--radius3); }
.rounding-br-4 { border-bottom-right-radius: var(--radius4); }
.rounding-br-5 { border-bottom-right-radius: var(--radius5); }
.rounding-br-6 { border-bottom-right-radius: var(--radius6); }
.rounding-br-8 { border-bottom-right-radius: var(--radius8); }
.rounding-br-10 { border-bottom-right-radius: var(--radius10); }
.rounding-br-12 { border-bottom-right-radius: var(--radius12); }
.rounding-br-14 { border-bottom-right-radius: var(--radius14); }
.rounding-br-16 { border-bottom-right-radius: var(--radius16); }
.rounding-br-20 { border-bottom-right-radius: var(--radius20); }
.rounding-br-24 { border-bottom-right-radius: var(--radius24); }

/* ============== */
/* === COLORS === */
/* ============== */

/* Text color */

.color-shade-text { color: var(--shade-text); }
.color-gray0 { color: var(--gray0); }
.color-gray50 { color: var(--gray50); }
.color-gray100 { color: var(--gray100); }
.color-gray200 { color: var(--gray200); }
.color-gray300 { color: var(--gray300); }
.color-gray400 { color: var(--gray400); }
.color-gray500 { color: var(--gray500); }
.color-gray600 { color: var(--gray600); }
.color-gray700 { color: var(--gray700); }
.color-gray800 { color: var(--gray800); }
.color-gray900 { color: var(--gray900); }

.color-brand50 { color: var(--brand50); }
.color-brand100 { color: var(--brand100); }
.color-brand200 { color: var(--brand200); }
.color-brand300 { color: var(--brand300); }
.color-brand400 { color: var(--brand400); }
.color-brand500 { color: var(--brand500); }
.color-brand600 { color: var(--brand600); }
.color-brand700 { color: var(--brand700); }
.color-brand800 { color: var(--brand800); }
.color-brand900 { color: var(--brand900); }

.color-accent50 { color: var(--accent50); }
.color-accent100 { color: var(--accent100); }
.color-accent200 { color: var(--accent200); }
.color-accent300 { color: var(--accent300); }
.color-accent400 { color: var(--accent400); }
.color-accent500 { color: var(--accent500); }
.color-accent600 { color: var(--accent600); }
.color-accent700 { color: var(--accent700); }
.color-accent800 { color: var(--accent800); }
.color-accent900 { color: var(--accent900); }

.color-info50 { color: var(--info50); }
.color-info100 { color: var(--info100); }
.color-info200 { color: var(--info200); }
.color-info300 { color: var(--info300); }
.color-info400 { color: var(--info400); }
.color-info500 { color: var(--info500); }
.color-info600 { color: var(--info600); }
.color-info700 { color: var(--info700); }
.color-info800 { color: var(--info800); }
.color-info900 { color: var(--info900); }

/* Text color :hover */

.hover\:color-shade-text:hover { color: var(--shade-text); }
.hover\:color-gray0:hover { color: var(--gray0); }
.hover\:color-gray50:hover { color: var(--gray50); }
.hover\:color-gray100:hover { color: var(--gray100); }
.hover\:color-gray200:hover { color: var(--gray200); }
.hover\:color-gray300:hover { color: var(--gray300); }
.hover\:color-gray400:hover { color: var(--gray400); }
.hover\:color-gray500:hover { color: var(--gray500); }
.hover\:color-gray600:hover { color: var(--gray600); }
.hover\:color-gray700:hover { color: var(--gray700); }
.hover\:color-gray800:hover { color: var(--gray800); }
.hover\:color-gray900:hover { color: var(--gray900); }

.hover\:color-brand50:hover { color: var(--brand50); }
.hover\:color-brand100:hover { color: var(--brand100); }
.hover\:color-brand200:hover { color: var(--brand200); }
.hover\:color-brand300:hover { color: var(--brand300); }
.hover\:color-brand400:hover { color: var(--brand400); }
.hover\:color-brand500:hover { color: var(--brand500); }
.hover\:color-brand600:hover { color: var(--brand600); }
.hover\:color-brand700:hover { color: var(--brand700); }
.hover\:color-brand800:hover { color: var(--brand800); }
.hover\:color-brand900:hover { color: var(--brand900); }

.hover\:color-accent50:hover { color: var(--accent50); }
.hover\:color-accent100:hover { color: var(--accent100); }
.hover\:color-accent200:hover { color: var(--accent200); }
.hover\:color-accent300:hover { color: var(--accent300); }
.hover\:color-accent400:hover { color: var(--accent400); }
.hover\:color-accent500:hover { color: var(--accent500); }
.hover\:color-accent600:hover { color: var(--accent600); }
.hover\:color-accent700:hover { color: var(--accent700); }
.hover\:color-accent800:hover { color: var(--accent800); }
.hover\:color-accent900:hover { color: var(--accent900); }

.hover\:color-info50:hover { color: var(--info50); }
.hover\:color-info100:hover { color: var(--info100); }
.hover\:color-info200:hover { color: var(--info200); }
.hover\:color-info300:hover { color: var(--info300); }
.hover\:color-info400:hover { color: var(--info400); }
.hover\:color-info500:hover { color: var(--info500); }
.hover\:color-info600:hover { color: var(--info600); }
.hover\:color-info700:hover { color: var(--info700); }
.hover\:color-info800:hover { color: var(--info800); }
.hover\:color-info900:hover { color: var(--info900); }

/* Text color :active */

.active\:color-shade-text:active { color: var(--shade-text); }
.active\:color-gray0:active { color: var(--gray0); }
.active\:color-gray50:active { color: var(--gray50); }
.active\:color-gray100:active { color: var(--gray100); }
.active\:color-gray200:active { color: var(--gray200); }
.active\:color-gray300:active { color: var(--gray300); }
.active\:color-gray400:active { color: var(--gray400); }
.active\:color-gray500:active { color: var(--gray500); }
.active\:color-gray600:active { color: var(--gray600); }
.active\:color-gray700:active { color: var(--gray700); }
.active\:color-gray800:active { color: var(--gray800); }
.active\:color-gray900:active { color: var(--gray900); }

.active\:color-brand50:active { color: var(--brand50); }
.active\:color-brand100:active { color: var(--brand100); }
.active\:color-brand200:active { color: var(--brand200); }
.active\:color-brand300:active { color: var(--brand300); }
.active\:color-brand400:active { color: var(--brand400); }
.active\:color-brand500:active { color: var(--brand500); }
.active\:color-brand600:active { color: var(--brand600); }
.active\:color-brand700:active { color: var(--brand700); }
.active\:color-brand800:active { color: var(--brand800); }
.active\:color-brand900:active { color: var(--brand900); }

.active\:color-accent50:active { color: var(--accent50); }
.active\:color-accent100:active { color: var(--accent100); }
.active\:color-accent200:active { color: var(--accent200); }
.active\:color-accent300:active { color: var(--accent300); }
.active\:color-accent400:active { color: var(--accent400); }
.active\:color-accent500:active { color: var(--accent500); }
.active\:color-accent600:active { color: var(--accent600); }
.active\:color-accent700:active { color: var(--accent700); }
.active\:color-accent800:active { color: var(--accent800); }
.active\:color-accent900:active { color: var(--accent900); }

.active\:color-info50:active { color: var(--info50); }
.active\:color-info100:active { color: var(--info100); }
.active\:color-info200:active { color: var(--info200); }
.active\:color-info300:active { color: var(--info300); }
.active\:color-info400:active { color: var(--info400); }
.active\:color-info500:active { color: var(--info500); }
.active\:color-info600:active { color: var(--info600); }
.active\:color-info700:active { color: var(--info700); }
.active\:color-info800:active { color: var(--info800); }
.active\:color-info900:active { color: var(--info900); }

/* Background color */

.bg-transparent { background-color: transparent; }
.shade-background { background-color: var(--shade-background); }
.bg-gray0 { background-color: var(--gray0); }
.bg-gray50 { background-color: var(--gray50); }
.bg-gray100 { background-color: var(--gray100); }
.bg-gray200 { background-color: var(--gray200); }
.bg-gray300 { background-color: var(--gray300); }
.bg-gray400 { background-color: var(--gray400); }
.bg-gray500 { background-color: var(--gray500); }
.bg-gray600 { background-color: var(--gray600); }
.bg-gray700 { background-color: var(--gray700); }
.bg-gray800 { background-color: var(--gray800); }
.bg-gray900 { background-color: var(--gray900); }

.bg-brand50 { background-color: var(--brand50); }
.bg-brand100 { background-color: var(--brand100); }
.bg-brand200 { background-color: var(--brand200); }
.bg-brand300 { background-color: var(--brand300); }
.bg-brand400 { background-color: var(--brand400); }
.bg-brand500 { background-color: var(--brand500); }
.bg-brand600 { background-color: var(--brand600); }
.bg-brand700 { background-color: var(--brand700); }
.bg-brand800 { background-color: var(--brand800); }
.bg-brand900 { background-color: var(--brand900); }

.bg-accent50 { background-color: var(--accent50); }
.bg-accent100 { background-color: var(--accent100); }
.bg-accent200 { background-color: var(--accent200); }
.bg-accent300 { background-color: var(--accent300); }
.bg-accent400 { background-color: var(--accent400); }
.bg-accent500 { background-color: var(--accent500); }
.bg-accent600 { background-color: var(--accent600); }
.bg-accent700 { background-color: var(--accent700); }
.bg-accent800 { background-color: var(--accent800); }
.bg-accent900 { background-color: var(--accent900); }

.bg-info50 { background-color: var(--info50); }
.bg-info100 { background-color: var(--info100); }
.bg-info200 { background-color: var(--info200); }
.bg-info300 { background-color: var(--info300); }
.bg-info400 { background-color: var(--info400); }
.bg-info500 { background-color: var(--info500); }
.bg-info600 { background-color: var(--info600); }
.bg-info700 { background-color: var(--info700); }
.bg-info800 { background-color: var(--info800); }
.bg-info900 { background-color: var(--info900); }

/* Background color :hover */

.hover\:bg-transparent:hover { background-color: transparent; }
.hover\:bg-gray0:hover { background-color: var(--gray0); }
.hover\:bg-gray50:hover { background-color: var(--gray50); }
.hover\:bg-gray100:hover { background-color: var(--gray100); }
.hover\:bg-gray200:hover { background-color: var(--gray200); }
.hover\:bg-gray300:hover { background-color: var(--gray300); }
.hover\:bg-gray400:hover { background-color: var(--gray400); }
.hover\:bg-gray500:hover { background-color: var(--gray500); }
.hover\:bg-gray600:hover { background-color: var(--gray600); }
.hover\:bg-gray700:hover { background-color: var(--gray700); }
.hover\:bg-gray800:hover { background-color: var(--gray800); }
.hover\:bg-gray900:hover { background-color: var(--gray900); }

.hover\:bg-brand50:hover { background-color: var(--brand50); }
.hover\:bg-brand100:hover { background-color: var(--brand100); }
.hover\:bg-brand200:hover { background-color: var(--brand200); }
.hover\:bg-brand300:hover { background-color: var(--brand300); }
.hover\:bg-brand400:hover { background-color: var(--brand400); }
.hover\:bg-brand500:hover { background-color: var(--brand500); }
.hover\:bg-brand600:hover { background-color: var(--brand600); }
.hover\:bg-brand700:hover { background-color: var(--brand700); }
.hover\:bg-brand800:hover { background-color: var(--brand800); }
.hover\:bg-brand900:hover { background-color: var(--brand900); }

.hover\:bg-accent50:hover { background-color: var(--accent50); }
.hover\:bg-accent100:hover { background-color: var(--accent100); }
.hover\:bg-accent200:hover { background-color: var(--accent200); }
.hover\:bg-accent300:hover { background-color: var(--accent300); }
.hover\:bg-accent400:hover { background-color: var(--accent400); }
.hover\:bg-accent500:hover { background-color: var(--accent500); }
.hover\:bg-accent600:hover { background-color: var(--accent600); }
.hover\:bg-accent700:hover { background-color: var(--accent700); }
.hover\:bg-accent800:hover { background-color: var(--accent800); }
.hover\:bg-accent900:hover { background-color: var(--accent900); }

.hover\:bg-info50:hover { background-color: var(--info50); }
.hover\:bg-info100:hover { background-color: var(--info100); }
.hover\:bg-info200:hover { background-color: var(--info200); }
.hover\:bg-info300:hover { background-color: var(--info300); }
.hover\:bg-info400:hover { background-color: var(--info400); }
.hover\:bg-info500:hover { background-color: var(--info500); }
.hover\:bg-info600:hover { background-color: var(--info600); }
.hover\:bg-info700:hover { background-color: var(--info700); }
.hover\:bg-info800:hover { background-color: var(--info800); }

/* Background color :active */

.active\:bg-transparent:active { background-color: transparent; }
.active\:bg-gray0:active { background-color: var(--gray0); }
.active\:bg-gray50:active { background-color: var(--gray50); }
.active\:bg-gray100:active { background-color: var(--gray100); }
.active\:bg-gray200:active { background-color: var(--gray200); }
.active\:bg-gray300:active { background-color: var(--gray300); }
.active\:bg-gray400:active { background-color: var(--gray400); }
.active\:bg-gray500:active { background-color: var(--gray500); }
.active\:bg-gray600:active { background-color: var(--gray600); }
.active\:bg-gray700:active { background-color: var(--gray700); }
.active\:bg-gray800:active { background-color: var(--gray800); }
.active\:bg-gray900:active { background-color: var(--gray900); }

.active\:bg-brand50:active { background-color: var(--brand50); }
.active\:bg-brand100:active { background-color: var(--brand100); }
.active\:bg-brand200:active { background-color: var(--brand200); }
.active\:bg-brand300:active { background-color: var(--brand300); }
.active\:bg-brand400:active { background-color: var(--brand400); }
.active\:bg-brand500:active { background-color: var(--brand500); }
.active\:bg-brand600:active { background-color: var(--brand600); }
.active\:bg-brand700:active { background-color: var(--brand700); }
.active\:bg-brand800:active { background-color: var(--brand800); }
.active\:bg-brand900:active { background-color: var(--brand900); }

.active\:bg-accent50:active { background-color: var(--accent50); }
.active\:bg-accent100:active { background-color: var(--accent100); }
.active\:bg-accent200:active { background-color: var(--accent200); }
.active\:bg-accent300:active { background-color: var(--accent300); }
.active\:bg-accent400:active { background-color: var(--accent400); }
.active\:bg-accent500:active { background-color: var(--accent500); }
.active\:bg-accent600:active { background-color: var(--accent600); }
.active\:bg-accent700:active { background-color: var(--accent700); }
.active\:bg-accent800:active { background-color: var(--accent800); }
.active\:bg-accent900:active { background-color: var(--accent900); }

.active\:bg-info50:active { background-color: var(--info50); }
.active\:bg-info100:active { background-color: var(--info100); }
.active\:bg-info200:active { background-color: var(--info200); }
.active\:bg-info300:active { background-color: var(--info300); }
.active\:bg-info400:active { background-color: var(--info400); }
.active\:bg-info500:active { background-color: var(--info500); }
.active\:bg-info600:active { background-color: var(--info600); }
.active\:bg-info700:active { background-color: var(--info700); }
.active\:bg-info800:active { background-color: var(--info800); }
.active\:bg-info900:active { background-color: var(--info900); }

/* =============== */
/* === SHADOWS === */
/* =============== */

/* Shadows */
.shadow-gray-xs { box-shadow: var(--gray-xs); }
.shadow-gray-sm { box-shadow: var(--gray-sm); }
.shadow-gray-md { box-shadow: var(--gray-md); }
.shadow-gray-lg { box-shadow: var(--gray-lg); }
.shadow-gray-xl { box-shadow: var(--gray-xl); }
.shadow-gray-2xl { box-shadow: var(--gray-2xl); }
.shadow-gray-3xl { box-shadow: var(--gray-3xl); }

.shadow-brand-xs { box-shadow: var(--brand-xs); }
.shadow-brand-sm { box-shadow: var(--brand-sm); }
.shadow-brand-md { box-shadow: var(--brand-md); }
.shadow-brand-lg { box-shadow: var(--brand-lg); }
.shadow-brand-xl { box-shadow: var(--brand-xl); }
.shadow-brand-2xl { box-shadow: var(--brand-2xl); }
.shadow-brand-3xl { box-shadow: var(--brand-3xl); }

.shadow-accent-xs { box-shadow: var(--accent-xs); }
.shadow-accent-sm { box-shadow: var(--accent-sm); }
.shadow-accent-md { box-shadow: var(--accent-md); }
.shadow-accent-lg { box-shadow: var(--accent-lg); }
.shadow-accent-xl { box-shadow: var(--accent-xl); }
.shadow-accent-2xl { box-shadow: var(--accent-2xl); }
.shadow-accent-3xl { box-shadow: var(--accent-3xl); }

/* Shadows :hover */

.hover\:shadow-gray-xs:hover { box-shadow: var(--gray-xs); }
.hover\:shadow-gray-sm:hover { box-shadow: var(--gray-sm); }
.hover\:shadow-gray-md:hover { box-shadow: var(--gray-md); }
.hover\:shadow-gray-lg:hover { box-shadow: var(--gray-lg); }
.hover\:shadow-gray-xl:hover { box-shadow: var(--gray-xl); }
.hover\:shadow-gray-2xl:hover { box-shadow: var(--gray-2xl); }
.hover\:shadow-gray-3xl:hover { box-shadow: var(--gray-3xl); }

.hover\:shadow-brand-xs:hover { box-shadow: var(--brand-xs); }
.hover\:shadow-brand-sm:hover { box-shadow: var(--brand-sm); }
.hover\:shadow-brand-md:hover { box-shadow: var(--brand-md); }
.hover\:shadow-brand-lg:hover { box-shadow: var(--brand-lg); }
.hover\:shadow-brand-xl:hover { box-shadow: var(--brand-xl); }
.hover\:shadow-brand-2xl:hover { box-shadow: var(--brand-2xl); }
.hover\:shadow-brand-3xl:hover { box-shadow: var(--brand-3xl); }

.hover\:shadow-accent-xs:hover { box-shadow: var(--accent-xs); }
.hover\:shadow-accent-sm:hover { box-shadow: var(--accent-sm); }
.hover\:shadow-accent-md:hover { box-shadow: var(--accent-md); }
.hover\:shadow-accent-lg:hover { box-shadow: var(--accent-lg); }
.hover\:shadow-accent-xl:hover { box-shadow: var(--accent-xl); }
.hover\:shadow-accent-2xl:hover { box-shadow: var(--accent-2xl); }
.hover\:shadow-accent-3xl:hover { box-shadow: var(--accent-3xl); }

/* Shadows :active */

.active\:shadow-gray-xs:active { box-shadow: var(--gray-xs); }
.active\:shadow-gray-sm:active { box-shadow: var(--gray-sm); }
.active\:shadow-gray-md:active { box-shadow: var(--gray-md); }
.active\:shadow-gray-lg:active { box-shadow: var(--gray-lg); }
.active\:shadow-gray-xl:active { box-shadow: var(--gray-xl); }
.active\:shadow-gray-2xl:active { box-shadow: var(--gray-2xl); }
.active\:shadow-gray-3xl:active { box-shadow: var(--gray-3xl); }

.active\:shadow-brand-xs:active { box-shadow: var(--brand-xs); }
.active\:shadow-brand-sm:active { box-shadow: var(--brand-sm); }
.active\:shadow-brand-md:active { box-shadow: var(--brand-md); }
.active\:shadow-brand-lg:active { box-shadow: var(--brand-lg); }
.active\:shadow-brand-xl:active { box-shadow: var(--brand-xl); }
.active\:shadow-brand-2xl:active { box-shadow: var(--brand-2xl); }
.active\:shadow-brand-3xl:active { box-shadow: var(--brand-3xl); }

.active\:shadow-accent-xs:active { box-shadow: var(--accent-xs); }
.active\:shadow-accent-sm:active { box-shadow: var(--accent-sm); }
.active\:shadow-accent-md:active { box-shadow: var(--accent-md); }
.active\:shadow-accent-lg:active { box-shadow: var(--accent-lg); }
.active\:shadow-accent-xl:active { box-shadow: var(--accent-xl); }
.active\:shadow-accent-2xl:active { box-shadow: var(--accent-2xl); }
.active\:shadow-accent-3xl:active { box-shadow: var(--accent-3xl); }

/* ================= */
/* === BOX MODEL === */
/* ================= */

/* Width */

.width-auto { width: auto; }
.width-1\/2 { width: 50%; }
.width-1\/3 { width: 33.333333%; }
.width-2\/3 { width: 66.666667%; }
.width-1\/4 { width: 25%; }
.width-2\/4 { width: 50%; }
.width-3\/4 { width: 75%; }
.width-1\/5 { width: 20%; }
.width-2\/5 { width: 40%; }
.width-3\/5 { width: 60%; }
.width-4\/5 { width: 80%; }
.width-1\/6 { width: 16.666667%; }
.width-2\/6 { width: 33.333333%; }
.width-3\/6 { width: 50%; }
.width-4\/6 { width: 66.666667%; }
.width-5\/6 { width: 83.333333%; }
.width-1\/12 { width: 8.333333%; }
.width-2\/12 { width: 16.666667%; }
.width-3\/12 { width: 25%; }
.width-4\/12 { width: 33.333333%; }
.width-5\/12 { width: 41.666667%; }
.width-6\/12 { width: 50%; }
.width-7\/12 { width: 58.333333%; }
.width-8\/12 { width: 66.666667%; }
.width-9\/12 { width: 75%; }
.width-10\/12 { width: 83.333333%; }
.width-11\/12 { width: 91.666667%; }
.width-full { width: 100%; }
.width-screen { width: 100vw; }
.width-min { width: min-content; }
.width-max { width: max-content; }
.width-fit { width: fit-content; }

/* Min width */
.min-width-full	{ min-width: 100%; }
.min-width-min	{ min-width: min-content; }
.min-width-max	{ min-width: max-content; }
.min-width-fit	{ min-width: fit-content; }

/* Max width */
.max-width-full { max-width: 100%; }
.max-width-min { max-width: min-content; }
.max-width-max { max-width: max-content; }
.max-width-fit { max-width: fit-content; }
.max-width-none { max-width: none; }

@media screen and (min-width: 576px) {
  .sm\:width-auto { width: auto; }
  .sm\:width-1\/2 { width: 50%; }
  .sm\:width-1\/3 { width: 33.333333%; }
  .sm\:width-2\/3 { width: 66.666667%; }
  .sm\:width-1\/4 { width: 25%; }
  .sm\:width-2\/4 { width: 50%; }
  .sm\:width-3\/4 { width: 75%; }
  .sm\:width-1\/5 { width: 20%; }
  .sm\:width-2\/5 { width: 40%; }
  .sm\:width-3\/5 { width: 60%; }
  .sm\:width-4\/5 { width: 80%; }
  .sm\:width-1\/6 { width: 16.666667%; }
  .sm\:width-2\/6 { width: 33.333333%; }
  .sm\:width-3\/6 { width: 50%; }
  .sm\:width-4\/6 { width: 66.666667%; }
  .sm\:width-5\/6 { width: 83.333333%; }
  .sm\:width-1\/12 { width: 8.333333%; }
  .sm\:width-2\/12 { width: 16.666667%; }
  .sm\:width-3\/12 { width: 25%; }
  .sm\:width-4\/12 { width: 33.333333%; }
  .sm\:width-5\/12 { width: 41.666667%; }
  .sm\:width-6\/12 { width: 50%; }
  .sm\:width-7\/12 { width: 58.333333%; }
  .sm\:width-8\/12 { width: 66.666667%; }
  .sm\:width-9\/12 { width: 75%; }
  .sm\:width-10\/12 { width: 83.333333%; }
  .sm\:width-11\/12 { width: 91.666667%; }
  .sm\:width-full { width: 100%; }
  .sm\:width-screen { width: 100vw; }
  .sm\:width-min { width: min-content; }
  .sm\:width-max { width: max-content; }
  .sm\:width-fit { width: fit-content; }

  /* Min width */
  .sm\:min-width-full { min-width: 100%; }
  .sm\:min-width-min { min-width: min-content; }
  .sm\:min-width-max { min-width: max-content; }
  .sm\:min-width-fit { min-width: fit-content; }

  /* Max width */
  .sm\:max-width-full { max-width: 100%; }
  .sm\:max-width-min { max-width: min-content; }
  .sm\:max-width-max { max-width: max-content; }
  .sm\:max-width-fit { max-width: fit-content; }
  .sm\:max-width-none { max-width: none; }
}

@media screen and (min-width: 768px) {
  .md\:width-auto { width: auto; }
  .md\:width-1\/2 { width: 50%; }
  .md\:width-1\/3 { width: 33.333333%; }
  .md\:width-2\/3 { width: 66.666667%; }
  .md\:width-1\/4 { width: 25%; }
  .md\:width-2\/4 { width: 50%; }
  .md\:width-3\/4 { width: 75%; }
  .md\:width-1\/5 { width: 20%; }
  .md\:width-2\/5 { width: 40%; }
  .md\:width-3\/5 { width: 60%; }
  .md\:width-4\/5 { width: 80%; }
  .md\:width-1\/6 { width: 16.666667%; }
  .md\:width-2\/6 { width: 33.333333%; }
  .md\:width-3\/6 { width: 50%; }
  .md\:width-4\/6 { width: 66.666667%; }
  .md\:width-5\/6 { width: 83.333333%; }
  .md\:width-1\/12 { width: 8.333333%; }
  .md\:width-2\/12 { width: 16.666667%; }
  .md\:width-3\/12 { width: 25%; }
  .md\:width-4\/12 { width: 33.333333%; }
  .md\:width-5\/12 { width: 41.666667%; }
  .md\:width-6\/12 { width: 50%; }
  .md\:width-7\/12 { width: 58.333333%; }
  .md\:width-8\/12 { width: 66.666667%; }
  .md\:width-9\/12 { width: 75%; }
  .md\:width-10\/12 { width: 83.333333%; }
  .md\:width-11\/12 { width: 91.666667%; }
  .md\:width-full { width: 100%; }
  .md\:width-screen { width: 100vw; }
  .md\:width-min { width: min-content; }
  .md\:width-max { width: max-content; }
  .md\:width-fit { width: fit-content; }

  /* Min width */
  .md\:min-width-full { min-width: 100%; }
  .md\:min-width-min { min-width: min-content; }
  .md\:min-width-max { min-width: max-content; }
  .md\:min-width-fit { min-width: fit-content; }

  /* Max width */
  .md\:max-width-full { max-width: 100%; }
  .md\:max-width-min { max-width: min-content; }
  .md\:max-width-max { max-width: max-content; }
  .md\:max-width-fit { max-width: fit-content; }
  .md\:max-width-none { max-width: none; }
}

@media screen and (min-width: 992px) {
  .lg\:width-auto { width: auto; }
  .lg\:width-1\/2 { width: 50%; }
  .lg\:width-1\/3 { width: 33.333333%; }
  .lg\:width-2\/3 { width: 66.666667%; }
  .lg\:width-1\/4 { width: 25%; }
  .lg\:width-2\/4 { width: 50%; }
  .lg\:width-3\/4 { width: 75%; }
  .lg\:width-1\/5 { width: 20%; }
  .lg\:width-2\/5 { width: 40%; }
  .lg\:width-3\/5 { width: 60%; }
  .lg\:width-4\/5 { width: 80%; }
  .lg\:width-1\/6 { width: 16.666667%; }
  .lg\:width-2\/6 { width: 33.333333%; }
  .lg\:width-3\/6 { width: 50%; }
  .lg\:width-4\/6 { width: 66.666667%; }
  .lg\:width-5\/6 { width: 83.333333%; }
  .lg\:width-1\/12 { width: 8.333333%; }
  .lg\:width-2\/12 { width: 16.666667%; }
  .lg\:width-3\/12 { width: 25%; }
  .lg\:width-4\/12 { width: 33.333333%; }
  .lg\:width-5\/12 { width: 41.666667%; }
  .lg\:width-6\/12 { width: 50%; }
  .lg\:width-7\/12 { width: 58.333333%; }
  .lg\:width-8\/12 { width: 66.666667%; }
  .lg\:width-9\/12 { width: 75%; }
  .lg\:width-10\/12 { width: 83.333333%; }
  .lg\:width-11\/12 { width: 91.666667%; }
  .lg\:width-full { width: 100%; }
  .lg\:width-screen { width: 100vw; }
  .lg\:width-min { width: min-content; }
  .lg\:width-max { width: max-content; }
  .lg\:width-fit { width: fit-content; }
  
  /* Min width */
  .lg\:min-width-full { min-width: 100%; }
  .lg\:min-width-min { min-width: min-content; }
  .lg\:min-width-max { min-width: max-content; }
  .lg\:min-width-fit { min-width: fit-content; }

  /* Max width */
  .lg\:max-width-full { max-width: 100%; }
  .lg\:max-width-min { max-width: min-content; }
  .lg\:max-width-max { max-width: max-content; }
  .lg\:max-width-fit { max-width: fit-content; }
  .lg\:max-width-none { max-width: none; }
}

@media screen and (min-width: 1200px) {
  .xl\:width-auto { width: auto; }
  .xl\:width-1\/2 { width: 50%; }
  .xl\:width-1\/3 { width: 33.333333%; }
  .xl\:width-2\/3 { width: 66.666667%; }
  .xl\:width-1\/4 { width: 25%; }
  .xl\:width-2\/4 { width: 50%; }
  .xl\:width-3\/4 { width: 75%; }
  .xl\:width-1\/5 { width: 20%; }
  .xl\:width-2\/5 { width: 40%; }
  .xl\:width-3\/5 { width: 60%; }
  .xl\:width-4\/5 { width: 80%; }
  .xl\:width-1\/6 { width: 16.666667%; }
  .xl\:width-2\/6 { width: 33.333333%; }
  .xl\:width-3\/6 { width: 50%; }
  .xl\:width-4\/6 { width: 66.666667%; }
  .xl\:width-5\/6 { width: 83.333333%; }
  .xl\:width-1\/12 { width: 8.333333%; }
  .xl\:width-2\/12 { width: 16.666667%; }
  .xl\:width-3\/12 { width: 25%; }
  .xl\:width-4\/12 { width: 33.333333%; }
  .xl\:width-5\/12 { width: 41.666667%; }
  .xl\:width-6\/12 { width: 50%; }
  .xl\:width-7\/12 { width: 58.333333%; }
  .xl\:width-8\/12 { width: 66.666667%; }
  .xl\:width-9\/12 { width: 75%; }
  .xl\:width-10\/12 { width: 83.333333%; }
  .xl\:width-11\/12 { width: 91.666667%; }
  .xl\:width-full { width: 100%; }
  .xl\:width-screen { width: 100vw; }
  .xl\:width-min { width: min-content; }
  .xl\:width-max { width: max-content; }
  .xl\:width-fit { width: fit-content; }

  /* Min width */
  .xl\:min-width-full { min-width: 100%; }
  .xl\:min-width-min { min-width: min-content; }
  .xl\:min-width-max { min-width: max-content; }
  .xl\:min-width-fit { min-width: fit-content; }

  /* Max width */
  .xl\:max-width-full { max-width: 100%; }
  .xl\:max-width-min { max-width: min-content; }
  .xl\:max-width-max { max-width: max-content; }
  .xl\:max-width-fit { max-width: fit-content; }
  .xl\:max-width-none { max-width: none; }
}

@media screen and (min-width: 1400px) {
  .xxl\:width-auto { width: auto; }
  .xxl\:width-1\/2 { width: 50%; }
  .xxl\:width-1\/3 { width: 33.333333%; }
  .xxl\:width-2\/3 { width: 66.666667%; }
  .xxl\:width-1\/4 { width: 25%; }
  .xxl\:width-2\/4 { width: 50%; }
  .xxl\:width-3\/4 { width: 75%; }
  .xxl\:width-1\/5 { width: 20%; }
  .xxl\:width-2\/5 { width: 40%; }
  .xxl\:width-3\/5 { width: 60%; }
  .xxl\:width-4\/5 { width: 80%; }
  .xxl\:width-1\/6 { width: 16.666667%; }
  .xxl\:width-2\/6 { width: 33.333333%; }
  .xxl\:width-3\/6 { width: 50%; }
  .xxl\:width-4\/6 { width: 66.666667%; }
  .xxl\:width-5\/6 { width: 83.333333%; }
  .xxl\:width-1\/12 { width: 8.333333%; }
  .xxl\:width-2\/12 { width: 16.666667%; }
  .xxl\:width-3\/12 { width: 25%; }
  .xxl\:width-4\/12 { width: 33.333333%; }
  .xxl\:width-5\/12 { width: 41.666667%; }
  .xxl\:width-6\/12 { width: 50%; }
  .xxl\:width-7\/12 { width: 58.333333%; }
  .xxl\:width-8\/12 { width: 66.666667%; }
  .xxl\:width-9\/12 { width: 75%; }
  .xxl\:width-10\/12 { width: 83.333333%; }
  .xxl\:width-11\/12 { width: 91.666667%; }
  .xxl\:width-full { width: 100%; }
  .xxl\:width-screen { width: 100vw; }
  .xxl\:width-min { width: min-content; }
  .xxl\:width-max { width: max-content; }
  .xxl\:width-fit { width: fit-content; }

  /* Min width */
  .xxl\:min-width-full { min-width: 100%; }
  .xxl\:min-width-min { min-width: min-content; }
  .xxl\:min-width-max { min-width: max-content; }
  .xxl\:min-width-fit { min-width: fit-content; }

  /* Max width */
  .xxl\:max-width-full { max-width: 100%; }
  .xxl\:max-width-min { max-width: min-content; }
  .xxl\:max-width-max { max-width: max-content; }
  .xxl\:max-width-fit { max-width: fit-content; }
  .xxl\:max-width-none { max-width: none; }
}

/* Height */

.height-auto { height: auto; }
.height-1\/2 { height: 50%; }
.height-1\/3 { height: 33.333333%; }
.height-2\/3 { height: 66.666667%; }
.height-1\/4 { height: 25%; }
.height-2\/4 { height: 50%; }
.height-3\/4 { height: 75%; }
.height-1\/5 { height: 20%; }
.height-2\/5 { height: 40%; }
.height-3\/5 { height: 60%; }
.height-4\/5 { height: 80%; }
.height-1\/6 { height: 16.666667%; }
.height-2\/6 { height: 33.333333%; }
.height-3\/6 { height: 50%; }
.height-4\/6 { height: 66.666667%; }
.height-5\/6 { height: 83.333333%; }
.height-full { height: 100%; }
.height-screen { height: 100vh; }
.height-svh { height: 100svh; }
.height-lvh { height: 100lvh; }
.height-dvh { height: 100dvh; }
.height-min { height: min-content; }
.height-max { height: max-content; }
.height-fit { height: fit-content; }

/* Min height */
.min-height-full { min-height: 100%; }
.min-height-screen { min-height: 100vh; }
.min-height-min { min-height: min-content; }
.min-height-max { min-height: max-content; }
.min-height-fit { min-height: fit-content; }

/* Max height */
.max-height-none { max-height: none; }
.max-height-full { max-height: 100%; }
.max-height-screen { max-height: 100vh; }
.max-height-min { max-height: min-content; }
.max-height-max { max-height: max-content; }
.max-height-fit { max-height: fit-content; }

@media screen and (min-width: 576px) {
  .sm\:height-auto { height: auto; }
  .sm\:height-1\/2 { height: 50%; }
  .sm\:height-1\/3 { height: 33.333333%; }
  .sm\:height-2\/3 { height: 66.666667%; }
  .sm\:height-1\/4 { height: 25%; }
  .sm\:height-2\/4 { height: 50%; }
  .sm\:height-3\/4 { height: 75%; }
  .sm\:height-1\/5 { height: 20%; }
  .sm\:height-2\/5 { height: 40%; }
  .sm\:height-3\/5 { height: 60%; }
  .sm\:height-4\/5 { height: 80%; }
  .sm\:height-1\/6 { height: 16.666667%; }
  .sm\:height-2\/6 { height: 33.333333%; }
  .sm\:height-3\/6 { height: 50%; }
  .sm\:height-4\/6 { height: 66.666667%; }
  .sm\:height-5\/6 { height: 83.333333%; }
  .sm\:height-full { height: 100%; }
  .sm\:height-screen { height: 100vh; }
  .sm\:height-svh { height: 100svh; }
  .sm\:height-lvh { height: 100lvh; }
  .sm\:height-dvh { height: 100dvh; }
  .sm\:height-min { height: min-content; }
  .sm\:height-max { height: max-content; }
  .sm\:height-fit { height: fit-content; }

  /* Min height */
  .sm\:min-height-full { min-height: 100%; }
  .sm\:min-height-screen { min-height: 100vh; }
  .sm\:min-height-min { min-height: min-content; }
  .sm\:min-height-max { min-height: max-content; }
  .sm\:min-height-fit { min-height: fit-content; }

  /* Max height */
  .sm\:max-height-none { max-height: none; }
  .sm\:max-height-full { max-height: 100%; }
  .sm\:max-height-screen { max-height: 100vh; }
  .sm\:max-height-min { max-height: min-content; }
  .sm\:max-height-max { max-height: max-content; }
  .sm\:max-height-fit { max-height: fit-content; }
}

@media screen and (min-width: 768px) {
  .md\:height-auto { height: auto; }
  .md\:height-1\/2 { height: 50%; }
  .md\:height-1\/3 { height: 33.333333%; }
  .md\:height-2\/3 { height: 66.666667%; }
  .md\:height-1\/4 { height: 25%; }
  .md\:height-2\/4 { height: 50%; }
  .md\:height-3\/4 { height: 75%; }
  .md\:height-1\/5 { height: 20%; }
  .md\:height-2\/5 { height: 40%; }
  .md\:height-3\/5 { height: 60%; }
  .md\:height-4\/5 { height: 80%; }
  .md\:height-1\/6 { height: 16.666667%; }
  .md\:height-2\/6 { height: 33.333333%; }
  .md\:height-3\/6 { height: 50%; }
  .md\:height-4\/6 { height: 66.666667%; }
  .md\:height-5\/6 { height: 83.333333%; }
  .md\:height-full { height: 100%; }
  .md\:height-screen { height: 100vh; }
  .md\:height-svh { height: 100svh; }
  .md\:height-lvh { height: 100lvh; }
  .md\:height-dvh { height: 100dvh; }
  .md\:height-min { height: min-content; }
  .md\:height-max { height: max-content; }
  .md\:height-fit { height: fit-content; }

  /* Min height */
  .md\:min-height-full { min-height: 100%; }
  .md\:min-height-screen { min-height: 100vh; }
  .md\:min-height-min { min-height: min-content; }
  .md\:min-height-max { min-height: max-content; }
  .md\:min-height-fit { min-height: fit-content; }

  /* Max height */
  .md\:max-height-none { max-height: none; }
  .md\:max-height-full { max-height: 100%; }
  .md\:max-height-screen { max-height: 100vh; }
  .md\:max-height-min { max-height: min-content; }
  .md\:max-height-max { max-height: max-content; }
  .md\:max-height-fit { max-height: fit-content; }
}

@media screen and (min-width: 992px) {
  .lg\:height-auto { height: auto; }
  .lg\:height-1\/2 { height: 50%; }
  .lg\:height-1\/3 { height: 33.333333%; }
  .lg\:height-2\/3 { height: 66.666667%; }
  .lg\:height-1\/4 { height: 25%; }
  .lg\:height-2\/4 { height: 50%; }
  .lg\:height-3\/4 { height: 75%; }
  .lg\:height-1\/5 { height: 20%; }
  .lg\:height-2\/5 { height: 40%; }
  .lg\:height-3\/5 { height: 60%; }
  .lg\:height-4\/5 { height: 80%; }
  .lg\:height-1\/6 { height: 16.666667%; }
  .lg\:height-2\/6 { height: 33.333333%; }
  .lg\:height-3\/6 { height: 50%; }
  .lg\:height-4\/6 { height: 66.666667%; }
  .lg\:height-5\/6 { height: 83.333333%; }
  .lg\:height-full { height: 100%; }
  .lg\:height-screen { height: 100vh; }
  .lg\:height-svh { height: 100svh; }
  .lg\:height-lvh { height: 100lvh; }
  .lg\:height-dvh { height: 100dvh; }
  .lg\:height-min { height: min-content; }
  .lg\:height-max { height: max-content; }
  .lg\:height-fit { height: fit-content; }

  /* Min height */
  .lg\:min-height-full { min-height: 100%; }
  .lg\:min-height-screen { min-height: 100vh; }
  .lg\:min-height-min { min-height: min-content; }
  .lg\:min-height-max { min-height: max-content; }
  .lg\:min-height-fit { min-height: fit-content; }

  /* Max height */
  .lg\:max-height-none { max-height: none; }
  .lg\:max-height-full { max-height: 100%; }
  .lg\:max-height-screen { max-height: 100vh; }
  .lg\:max-height-min { max-height: min-content; }
  .lg\:max-height-max { max-height: max-content; }
  .lg\:max-height-fit { max-height: fit-content; }
}

@media screen and (min-width: 1200px) {
  .xl\:height-auto { height: auto; }
  .xl\:height-1\/2 { height: 50%; }
  .xl\:height-1\/3 { height: 33.333333%; }
  .xl\:height-2\/3 { height: 66.666667%; }
  .xl\:height-1\/4 { height: 25%; }
  .xl\:height-2\/4 { height: 50%; }
  .xl\:height-3\/4 { height: 75%; }
  .xl\:height-1\/5 { height: 20%; }
  .xl\:height-2\/5 { height: 40%; }
  .xl\:height-3\/5 { height: 60%; }
  .xl\:height-4\/5 { height: 80%; }
  .xl\:height-1\/6 { height: 16.666667%; }
  .xl\:height-2\/6 { height: 33.333333%; }
  .xl\:height-3\/6 { height: 50%; }
  .xl\:height-4\/6 { height: 66.666667%; }
  .xl\:height-5\/6 { height: 83.333333%; }
  .xl\:height-full { height: 100%; }
  .xl\:height-screen { height: 100vh; }
  .xl\:height-svh { height: 100svh; }
  .xl\:height-lvh { height: 100lvh; }
  .xl\:height-dvh { height: 100dvh; }
  .xl\:height-min { height: min-content; }
  .xl\:height-max { height: max-content; }
  .xl\:height-fit { height: fit-content; }

  /* Min height */
  .xl\:min-height-full { min-height: 100%; }
  .xl\:min-height-screen { min-height: 100vh; }
  .xl\:min-height-min { min-height: min-content; }
  .xl\:min-height-max { min-height: max-content; }
  .xl\:min-height-fit { min-height: fit-content; }

  /* Max height */
  .xl\:max-height-none { max-height: none; }
  .xl\:max-height-full { max-height: 100%; }
  .xl\:max-height-screen { max-height: 100vh; }
  .xl\:max-height-min { max-height: min-content; }
  .xl\:max-height-max { max-height: max-content; }
  .xl\:max-height-fit { max-height: fit-content; }
}

@media screen and (min-width: 1400px) {
  .xxl\:height-auto { height: auto; }
  .xxl\:height-1\/2 { height: 50%; }
  .xxl\:height-1\/3 { height: 33.333333%; }
  .xxl\:height-2\/3 { height: 66.666667%; }
  .xxl\:height-1\/4 { height: 25%; }
  .xxl\:height-2\/4 { height: 50%; }
  .xxl\:height-3\/4 { height: 75%; }
  .xxl\:height-1\/5 { height: 20%; }
  .xxl\:height-2\/5 { height: 40%; }
  .xxl\:height-3\/5 { height: 60%; }
  .xxl\:height-4\/5 { height: 80%; }
  .xxl\:height-1\/6 { height: 16.666667%; }
  .xxl\:height-2\/6 { height: 33.333333%; }
  .xxl\:height-3\/6 { height: 50%; }
  .xxl\:height-4\/6 { height: 66.666667%; }
  .xxl\:height-5\/6 { height: 83.333333%; }
  .xxl\:height-full { height: 100%; }
  .xxl\:height-screen { height: 100vh; }
  .xxl\:height-svh { height: 100svh; }
  .xxl\:height-lvh { height: 100lvh; }
  .xxl\:height-dvh { height: 100dvh; }
  .xxl\:height-min { height: min-content; }
  .xxl\:height-max { height: max-content; }
  .xxl\:height-fit { height: fit-content; }

  /* Min height */
  .xxl\:min-height-full { min-height: 100%; }
  .xxl\:min-height-screen { min-height: 100vh; }
  .xxl\:min-height-min { min-height: min-content; }
  .xxl\:min-height-max { min-height: max-content; }
  .xxl\:min-height-fit { min-height: fit-content; }

  /* Max height */
  .xxl\:max-height-none { max-height: none; }
  .xxl\:max-height-full { max-height: 100%; }
  .xxl\:max-height-screen { max-height: 100vh; }
  .xxl\:max-height-min { max-height: min-content; }
  .xxl\:max-height-max { max-height: max-content; }
  .xxl\:max-height-fit { max-height: fit-content; }
}

/* Display */

.d-inline {display: inline;}
.d-inline-block {display: inline-block;}  
.d-block {display: block;}
.d-grid {display: grid;}
.d-table {display: table;}
.d-table-row {display: table-row;}
.d-table-cell {display: table-cell;}
.d-flex {display: flex;}
.d-inline-flex {display: inline-flex;}
.d-none {display: none;}

@media screen and (min-width: 576px) {
  .sm\:d-inline { display: inline; }
  .sm\:d-inline-block { display: inline-block; }
  .sm\:d-block { display: block; }
  .sm\:d-grid { display: grid; }
  .sm\:d-table { display: table; }
  .sm\:d-table-row { display: table-row; }
  .sm\:d-table-cell { display: table-cell; }
  .sm\:d-flex { display: flex; }
  .sm\:d-inline-flex { display: inline-flex; }
  .sm\:d-none { display: none; }
}

@media screen and (min-width: 768px) {
  .md\:d-inline { display: inline; }
  .md\:d-inline-block { display: inline-block; }
  .md\:d-block { display: block; }
  .md\:d-grid { display: grid; }
  .md\:d-table { display: table; }
  .md\:d-table-row { display: table-row; }
  .md\:d-table-cell { display: table-cell; }
  .md\:d-flex { display: flex; }
  .md\:d-inline-flex { display: inline-flex; }
  .md\:d-none { display: none; }
}

@media screen and (min-width: 992px) {
  .lg\:d-inline { display: inline; }
  .lg\:d-inline-block { display: inline-block; }
  .lg\:d-block { display: block; }
  .lg\:d-grid { display: grid; }
  .lg\:d-table { display: table; }
  .lg\:d-table-row { display: table-row; }
  .lg\:d-table-cell { display: table-cell; }
  .lg\:d-flex { display: flex; }
  .lg\:d-inline-flex { display: inline-flex; }
  .lg\:d-none { display: none; }
}

@media screen and (min-width: 1200px) {
  .xl\:d-inline { display: inline; }
  .xl\:d-inline-block { display: inline-block; }
  .xl\:d-block { display: block; }
  .xl\:d-grid { display: grid; }
  .xl\:d-table { display: table; }
  .xl\:d-table-row { display: table-row; }
  .xl\:d-table-cell { display: table-cell; }
  .xl\:d-flex { display: flex; }
  .xl\:d-inline-flex { display: inline-flex; }
  .xl\:d-none { display: none; }
}

@media screen and (min-width: 1400px) {
  .xxl\:d-inline { display: inline; }
  .xxl\:d-inline-block { display: inline-block; }
  .xxl\:d-block { display: block; }
  .xxl\:d-grid { display: grid; }
  .xxl\:d-table { display: table; }
  .xxl\:d-table-row { display: table-row; }
  .xxl\:d-table-cell { display: table-cell; }
  .xxl\:d-flex { display: flex; }
  .xxl\:d-inline-flex { display: inline-flex; }
  .xxl\:d-none { display: none; }
}

/* Flex box */

.flex-row {flex-direction: row;}
.flex-row-reverse {flex-direction: row-reverse;}
.flex-column {flex-direction: column;}
.flex-column-reverse {flex-direction: column-reverse;}
.flex-grow-0 {flex-grow: 0;}
.flex-grow-1 {flex-grow: 1;}
.flex-shrink-0 {flex-shrink: 0;}
.flex-shrink-1 {flex-shrink: 1;}
.flex-wrap {flex-wrap: wrap;}
.flex-no-wrap {flex-wrap: nowrap;}
.flex-wrap-reverse {flex-wrap: wrap-reverse;}

.justify-content-start {justify-content: flex-start;}
.justify-content-end {justify-content: flex-end;}
.justify-content-center {justify-content: center;}
.justify-content-between {justify-content: space-between;}
.justify-content-around {justify-content: space-around;}
.justify-content-evenly {justify-content: space-evenly;}

.align-items-start {align-items: flex-start;}
.align-items-end {align-items: flex-end;}
.align-items-center {align-items: center;}
.align-items-baseline {align-items: baseline;}
.align-items-stretch {align-items: stretch;}

.align-content-start {align-content: flex-start;}
.align-content-end {align-content: flex-end;}
.align-content-center {align-content: center;}
.align-content-between {align-content: space-between;}
.align-content-around {align-content: space-around;}
.align-content-stretch {align-content: stretch;}

.align-self-auto {align-self: auto;}
.align-self-start {align-self:flex-start;}
.align-self-end {align-self: flex-end;}
.align-self-center {align-self: center;}
.align-self-baseline {align-self: baseline;}
.align-self-stretch {align-self: stretch;}

.order-1 {order: 1;}
.order-2 {order: 2;}
.order-3 {order: 3;}
.order-4 {order: 4;}
.order-5 {order: 5;}
.order-6 {order: 6;}

.gap-0 { gap: var(--spacing0); }
.gap-0-5 { gap: var(--spacing0-5); }
.gap-1 { gap: var(--spacing1); }
.gap-1-5 { gap: var(--spacing1-5); }
.gap-2 { gap: var(--spacing2); }
.gap-2-5 { gap: var(--spacing2-5); }
.gap-3 { gap: var(--spacing3); }
.gap-3-5 { gap: var(--spacing3-5); }
.gap-4 { gap: var(--spacing4); }
.gap-4-5 { gap: var(--spacing4-5); }
.gap-5 { gap: var(--spacing5); }
.gap-6 { gap: var(--spacing6); }
.gap-7 { gap: var(--spacing7); }
.gap-8 { gap: var(--spacing8); }
.gap-10 { gap: var(--spacing10); }
.gap-12 { gap: var(--spacing12); }
.gap-14 { gap: var(--spacing14); }
.gap-16 { gap: var(--spacing16); }
.gap-20 { gap: var(--spacing20); }
.gap-24 { gap: var(--spacing24); }
.gap-30 { gap: var(--spacing30); }
.gap-32 { gap: var(--spacing32); }
.gap-40 { gap: var(--spacing40); }
.gap-48 { gap: var(--spacing48); }
.gap-56 { gap: var(--spacing56); }
.gap-64 { gap: var(--spacing64); }

@media screen and (min-width: 576px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-row-reverse { flex-direction: row-reverse; }
  .sm\:flex-column { flex-direction: column; }
  .sm\:flex-column-reverse { flex-direction: column-reverse; }
  .sm\:flex-grow-0 { flex-grow: 0; }
  .sm\:flex-grow-1 { flex-grow: 1; }
  .sm\:flex-shrink-0 { flex-shrink: 0; }
  .sm\:flex-shrink-1 { flex-shrink: 1; }
  .sm\:flex-wrap { flex-wrap: wrap; }
  .sm\:flex-no-wrap { flex-wrap: nowrap; }
  .sm\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  
  .sm\:justify-content-start { justify-content: flex-start; }
  .sm\:justify-content-end { justify-content: flex-end; }
  .sm\:justify-content-center { justify-content: center; }
  .sm\:justify-content-between { justify-content: space-between; }
  .sm\:justify-content-around { justify-content: space-around; }
  .sm\:justify-content-evenly { justify-content: space-evenly; }
  
  .sm\:align-items-start { align-items: flex-start; }
  .sm\:align-items-end { align-items: flex-end; }
  .sm\:align-items-center { align-items: center; }
  .sm\:align-items-baseline { align-items: baseline; }
  .sm\:align-items-stretch { align-items: stretch; }
  
  .sm\:align-content-start { align-content: flex-start; }
  .sm\:align-content-end { align-content: flex-end; }
  .sm\:align-content-center { align-content: center; }
  .sm\:align-content-between { align-content: space-between; }
  .sm\:align-content-around { align-content: space-around; }
  .sm\:align-content-stretch { align-content: stretch; }
  
  .sm\:align-self-auto { align-self: auto; }
  .sm\:align-self-start { align-self: flex-start; }
  .sm\:align-self-end { align-self: flex-end; }
  .sm\:align-self-center { align-self: center; }
  .sm\:align-self-baseline { align-self: baseline; }
  .sm\:align-self-stretch { align-self: stretch; }
  
  .sm\:order-1 { order: 1; }
  .sm\:order-2 { order: 2; }
  .sm\:order-3 { order: 3; }
  .sm\:order-4 { order: 4; }
  .sm\:order-5 { order: 5; }
  .sm\:order-6 { order: 6; }

  .sm\:gap-0 { gap: var(--spacing0); }
  .sm\:gap-0-5 { gap: var(--spacing0-5); }
  .sm\:gap-1 { gap: var(--spacing1); }
  .sm\:gap-1-5 { gap: var(--spacing1-5); }
  .sm\:gap-2 { gap: var(--spacing2); }
  .sm\:gap-2-5 { gap: var(--spacing2-5); }
  .sm\:gap-3 { gap: var(--spacing3); }
  .sm\:gap-3-5 { gap: var(--spacing3-5); }
  .sm\:gap-4 { gap: var(--spacing4); }
  .sm\:gap-4-5 { gap: var(--spacing4-5); }
  .sm\:gap-5 { gap: var(--spacing5); }
  .sm\:gap-6 { gap: var(--spacing6); }
  .sm\:gap-7 { gap: var(--spacing7); }
  .sm\:gap-8 { gap: var(--spacing8); }
  .sm\:gap-10 { gap: var(--spacing10); }
  .sm\:gap-12 { gap: var(--spacing12); }
  .sm\:gap-14 { gap: var(--spacing14); }
  .sm\:gap-16 { gap: var(--spacing16); }
  .sm\:gap-20 { gap: var(--spacing20); }
  .sm\:gap-24 { gap: var(--spacing24); }
  .sm\:gap-30 { gap: var(--spacing30); }
  .sm\:gap-32 { gap: var(--spacing32); }
  .sm\:gap-40 { gap: var(--spacing40); }
  .sm\:gap-48 { gap: var(--spacing48); }
  .sm\:gap-56 { gap: var(--spacing56); }
  .sm\:gap-64 { gap: var(--spacing64); }
}

@media screen and (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-row-reverse { flex-direction: row-reverse; }
  .md\:flex-column { flex-direction: column; }
  .md\:flex-column-reverse { flex-direction: column-reverse; }
  .md\:flex-grow-0 { flex-grow: 0; }
  .md\:flex-grow-1 { flex-grow: 1; }
  .md\:flex-shrink-0 { flex-shrink: 0; }
  .md\:flex-shrink-1 { flex-shrink: 1; }
  .md\:flex-wrap { flex-wrap: wrap; }
  .md\:flex-no-wrap { flex-wrap: nowrap; }
  .md\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  
  .md\:justify-content-start { justify-content: flex-start; }
  .md\:justify-content-end { justify-content: flex-end; }
  .md\:justify-content-center { justify-content: center; }
  .md\:justify-content-between { justify-content: space-between; }
  .md\:justify-content-around { justify-content: space-around; }
  .md\:justify-content-evenly { justify-content: space-evenly; }
  
  .md\:align-items-start { align-items: flex-start; }
  .md\:align-items-end { align-items: flex-end; }
  .md\:align-items-center { align-items: center; }
  .md\:align-items-baseline { align-items: baseline; }
  .md\:align-items-stretch { align-items: stretch; }
  
  .md\:align-content-start { align-content: flex-start; }
  .md\:align-content-end { align-content: flex-end; }
  .md\:align-content-center { align-content: center; }
  .md\:align-content-between { align-content: space-between; }
  .md\:align-content-around { align-content: space-around; }
  .md\:align-content-stretch { align-content: stretch; }
  
  .md\:align-self-auto { align-self: auto; }
  .md\:align-self-start { align-self: flex-start; }
  .md\:align-self-end { align-self: flex-end; }
  .md\:align-self-center { align-self: center; }
  .md\:align-self-baseline { align-self: baseline; }
  .md\:align-self-stretch { align-self: stretch; }
  
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
  .md\:order-3 { order: 3; }
  .md\:order-4 { order: 4; }
  .md\:order-5 { order: 5; }
  .md\:order-6 { order: 6; }

  .md\:gap-0 { gap: var(--spacing0); }
  .md\:gap-0-5 { gap: var(--spacing0-5); }
  .md\:gap-1 { gap: var(--spacing1); }
  .md\:gap-1-5 { gap: var(--spacing1-5); }
  .md\:gap-2 { gap: var(--spacing2); }
  .md\:gap-2-5 { gap: var(--spacing2-5); }
  .md\:gap-3 { gap: var(--spacing3); }
  .md\:gap-3-5 { gap: var(--spacing3-5); }
  .md\:gap-4 { gap: var(--spacing4); }
  .md\:gap-4-5 { gap: var(--spacing4-5); }
  .md\:gap-5 { gap: var(--spacing5); }
  .md\:gap-6 { gap: var(--spacing6); }
  .md\:gap-7 { gap: var(--spacing7); }
  .md\:gap-8 { gap: var(--spacing8); }
  .md\:gap-10 { gap: var(--spacing10); }
  .md\:gap-12 { gap: var(--spacing12); }
  .md\:gap-14 { gap: var(--spacing14); }
  .md\:gap-16 { gap: var(--spacing16); }
  .md\:gap-20 { gap: var(--spacing20); }
  .md\:gap-24 { gap: var(--spacing24); }
  .md\:gap-30 { gap: var(--spacing30); }
  .md\:gap-32 { gap: var(--spacing32); }
  .md\:gap-40 { gap: var(--spacing40); }
  .md\:gap-48 { gap: var(--spacing48); }
  .md\:gap-56 { gap: var(--spacing56); }
  .md\:gap-64 { gap: var(--spacing64); }
}

@media screen and (min-width: 992px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-row-reverse { flex-direction: row-reverse; }
  .lg\:flex-column { flex-direction: column; }
  .lg\:flex-column-reverse { flex-direction: column-reverse; }
  .lg\:flex-grow-0 { flex-grow: 0; }
  .lg\:flex-grow-1 { flex-grow: 1; }
  .lg\:flex-shrink-0 { flex-shrink: 0; }
  .lg\:flex-shrink-1 { flex-shrink: 1; }
  .lg\:flex-wrap { flex-wrap: wrap; }
  .lg\:flex-no-wrap { flex-wrap: nowrap; }
  .lg\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  
  .lg\:justify-content-start { justify-content: flex-start; }
  .lg\:justify-content-end { justify-content: flex-end; }
  .lg\:justify-content-center { justify-content: center; }
  .lg\:justify-content-between { justify-content: space-between; }
  .lg\:justify-content-around { justify-content: space-around; }
  .lg\:justify-content-evenly { justify-content: space-evenly; }
  
  .lg\:align-items-start { align-items: flex-start; }
  .lg\:align-items-end { align-items: flex-end; }
  .lg\:align-items-center { align-items: center; }
  .lg\:align-items-baseline { align-items: baseline; }
  .lg\:align-items-stretch { align-items: stretch; }
  
  .lg\:align-content-start { align-content: flex-start; }
  .lg\:align-content-end { align-content: flex-end; }
  .lg\:align-content-center { align-content: center; }
  .lg\:align-content-between { align-content: space-between; }
  .lg\:align-content-around { align-content: space-around; }
  .lg\:align-content-stretch { align-content: stretch; }
  
  .lg\:align-self-auto { align-self: auto; }
  .lg\:align-self-start { align-self: flex-start; }
  .lg\:align-self-end { align-self: flex-end; }
  .lg\:align-self-center { align-self: center; }
  .lg\:align-self-baseline { align-self: baseline; }
  .lg\:align-self-stretch { align-self: stretch; }
  
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:order-3 { order: 3; }
  .lg\:order-4 { order: 4; }
  .lg\:order-5 { order: 5; }
  .lg\:order-6 { order: 6; }

  .lg\:gap-0 { gap: var(--spacing0); }
  .lg\:gap-0-5 { gap: var(--spacing0-5); }
  .lg\:gap-1 { gap: var(--spacing1); }
  .lg\:gap-1-5 { gap: var(--spacing1-5); }
  .lg\:gap-2 { gap: var(--spacing2); }
  .lg\:gap-2-5 { gap: var(--spacing2-5); }
  .lg\:gap-3 { gap: var(--spacing3); }
  .lg\:gap-3-5 { gap: var(--spacing3-5); }
  .lg\:gap-4 { gap: var(--spacing4); }
  .lg\:gap-4-5 { gap: var(--spacing4-5); }
  .lg\:gap-5 { gap: var(--spacing5); }
  .lg\:gap-6 { gap: var(--spacing6); }
  .lg\:gap-7 { gap: var(--spacing7); }
  .lg\:gap-8 { gap: var(--spacing8); }
  .lg\:gap-10 { gap: var(--spacing10); }
  .lg\:gap-12 { gap: var(--spacing12); }
  .lg\:gap-14 { gap: var(--spacing14); }
  .lg\:gap-16 { gap: var(--spacing16); }
  .lg\:gap-20 { gap: var(--spacing20); }
  .lg\:gap-24 { gap: var(--spacing24); }
  .lg\:gap-30 { gap: var(--spacing30); }
  .lg\:gap-32 { gap: var(--spacing32); }
  .lg\:gap-40 { gap: var(--spacing40); }
  .lg\:gap-48 { gap: var(--spacing48); }
  .lg\:gap-56 { gap: var(--spacing56); }
  .lg\:gap-64 { gap: var(--spacing64); }
}

@media screen and (min-width: 1200px) {
  .xl\:flex-row { flex-direction: row; }
  .xl\:flex-row-reverse { flex-direction: row-reverse; }
  .xl\:flex-column { flex-direction: column; }
  .xl\:flex-column-reverse { flex-direction: column-reverse; }
  .xl\:flex-grow-0 { flex-grow: 0; }
  .xl\:flex-grow-1 { flex-grow: 1; }
  .xl\:flex-shrink-0 { flex-shrink: 0; }
  .xl\:flex-shrink-1 { flex-shrink: 1; }
  .xl\:flex-wrap { flex-wrap: wrap; }
  .xl\:flex-no-wrap { flex-wrap: nowrap; }
  .xl\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  
  .xl\:justify-content-start { justify-content: flex-start; }
  .xl\:justify-content-end { justify-content: flex-end; }
  .xl\:justify-content-center { justify-content: center; }
  .xl\:justify-content-between { justify-content: space-between; }
  .xl\:justify-content-around { justify-content: space-around; }
  .xl\:justify-content-evenly { justify-content: space-evenly; }
  
  .xl\:align-items-start { align-items: flex-start; }
  .xl\:align-items-end { align-items: flex-end; }
  .xl\:align-items-center { align-items: center; }
  .xl\:align-items-baseline { align-items: baseline; }
  .xl\:align-items-stretch { align-items: stretch; }
  
  .xl\:align-content-start { align-content: flex-start; }
  .xl\:align-content-end { align-content: flex-end; }
  .xl\:align-content-center { align-content: center; }
  .xl\:align-content-between { align-content: space-between; }
  .xl\:align-content-around { align-content: space-around; }
  .xl\:align-content-stretch { align-content: stretch; }
  
  .xl\:align-self-auto { align-self: auto; }
  .xl\:align-self-start { align-self: flex-start; }
  .xl\:align-self-end { align-self: flex-end; }
  .xl\:align-self-center { align-self: center; }
  .xl\:align-self-baseline { align-self: baseline; }
  .xl\:align-self-stretch { align-self: stretch; }
  
  .xl\:order-1 { order: 1; }
  .xl\:order-2 { order: 2; }
  .xl\:order-3 { order: 3; }
  .xl\:order-4 { order: 4; }
  .xl\:order-5 { order: 5; }
  .xl\:order-6 { order: 6; }

  .xl\:gap-0 { gap: var(--spacing0); }
  .xl\:gap-0-5 { gap: var(--spacing0-5); }
  .xl\:gap-1 { gap: var(--spacing1); }
  .xl\:gap-1-5 { gap: var(--spacing1-5); }
  .xl\:gap-2 { gap: var(--spacing2); }
  .xl\:gap-2-5 { gap: var(--spacing2-5); }
  .xl\:gap-3 { gap: var(--spacing3); }
  .xl\:gap-3-5 { gap: var(--spacing3-5); }
  .xl\:gap-4 { gap: var(--spacing4); }
  .xl\:gap-4-5 { gap: var(--spacing4-5); }
  .xl\:gap-5 { gap: var(--spacing5); }
  .xl\:gap-6 { gap: var(--spacing6); }
  .xl\:gap-7 { gap: var(--spacing7); }
  .xl\:gap-8 { gap: var(--spacing8); }
  .xl\:gap-10 { gap: var(--spacing10); }
  .xl\:gap-12 { gap: var(--spacing12); }
  .xl\:gap-14 { gap: var(--spacing14); }
  .xl\:gap-16 { gap: var(--spacing16); }
  .xl\:gap-20 { gap: var(--spacing20); }
  .xl\:gap-24 { gap: var(--spacing24); }
  .xl\:gap-30 { gap: var(--spacing30); }
  .xl\:gap-32 { gap: var(--spacing32); }
  .xl\:gap-40 { gap: var(--spacing40); }
  .xl\:gap-48 { gap: var(--spacing48); }
  .xl\:gap-56 { gap: var(--spacing56); }
  .xl\:gap-64 { gap: var(--spacing64); }

}

@media screen and (min-width: 1400px) {
  .xxl\:flex-row { flex-direction: row; }
  .xxl\:flex-row-reverse { flex-direction: row-reverse; }
  .xxl\:flex-column { flex-direction: column; }
  .xxl\:flex-column-reverse { flex-direction: column-reverse; }
  .xxl\:flex-grow-0 { flex-grow: 0; }
  .xxl\:flex-grow-1 { flex-grow: 1; }
  .xxl\:flex-shrink-0 { flex-shrink: 0; }
  .xxl\:flex-shrink-1 { flex-shrink: 1; }
  .xxl\:flex-wrap { flex-wrap: wrap; }
  .xxl\:flex-no-wrap { flex-wrap: nowrap; }
  .xxl\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  
  .xxl\:justify-content-start { justify-content: flex-start; }
  .xxl\:justify-content-end { justify-content: flex-end; }
  .xxl\:justify-content-center { justify-content: center; }
  .xxl\:justify-content-between { justify-content: space-between; }
  .xxl\:justify-content-around { justify-content: space-around; }
  .xxl\:justify-content-evenly { justify-content: space-evenly; }
  
  .xxl\:align-items-start { align-items: flex-start; }
  .xxl\:align-items-end { align-items: flex-end; }
  .xxl\:align-items-center { align-items: center; }
  .xxl\:align-items-baseline { align-items: baseline; }
  .xxl\:align-items-stretch { align-items: stretch; }
  
  .xxl\:align-content-start { align-content: flex-start; }
  .xxl\:align-content-end { align-content: flex-end; }
  .xxl\:align-content-center { align-content: center; }
  .xxl\:align-content-between { align-content: space-between; }
  .xxl\:align-content-around { align-content: space-around; }
  .xxl\:align-content-stretch { align-content: stretch; }
  
  .xxl\:align-self-auto { align-self: auto; }
  .xxl\:align-self-start { align-self: flex-start; }
  .xxl\:align-self-end { align-self: flex-end; }
  .xxl\:align-self-center { align-self: center; }
  .xxl\:align-self-baseline { align-self: baseline; }
  .xxl\:align-self-stretch { align-self: stretch; }
  
  .xxl\:order-1 { order: 1; }
  .xxl\:order-2 { order: 2; }
  .xxl\:order-3 { order: 3; }
  .xxl\:order-4 { order: 4; }
  .xxl\:order-5 { order: 5; }
  .xxl\:order-6 { order: 6; }

  .xxl\:gap-0 { gap: var(--spacing0); }
  .xxl\:gap-0-5 { gap: var(--spacing0-5); }
  .xxl\:gap-1 { gap: var(--spacing1); }
  .xxl\:gap-1-5 { gap: var(--spacing1-5); }
  .xxl\:gap-2 { gap: var(--spacing2); }
  .xxl\:gap-2-5 { gap: var(--spacing2-5); }
  .xxl\:gap-3 { gap: var(--spacing3); }
  .xxl\:gap-3-5 { gap: var(--spacing3-5); }
  .xxl\:gap-4 { gap: var(--spacing4); }
  .xxl\:gap-4-5 { gap: var(--spacing4-5); }
  .xxl\:gap-5 { gap: var(--spacing5); }
  .xxl\:gap-6 { gap: var(--spacing6); }
  .xxl\:gap-7 { gap: var(--spacing7); }
  .xxl\:gap-8 { gap: var(--spacing8); }
  .xxl\:gap-10 { gap: var(--spacing10); }
  .xxl\:gap-12 { gap: var(--spacing12); }
  .xxl\:gap-14 { gap: var(--spacing14); }
  .xxl\:gap-16 { gap: var(--spacing16); }
  .xxl\:gap-20 { gap: var(--spacing20); }
  .xxl\:gap-24 { gap: var(--spacing24); }
  .xxl\:gap-30 { gap: var(--spacing30); }
  .xxl\:gap-32 { gap: var(--spacing32); }
  .xxl\:gap-40 { gap: var(--spacing40); }
  .xxl\:gap-48 { gap: var(--spacing48); }
  .xxl\:gap-56 { gap: var(--spacing56); }
  .xxl\:gap-64 { gap: var(--spacing64); }
}


/* Float */

.float-left {float: left;}
.float-right {float: right;}
.float-none {float: none;}
.clear-left {clear: left;}
.clear-right {clear: right;}
.clear-both {clear: both;}

@media screen and (min-width: 576px) {
  .sm\:float-left { float: left; }
  .sm\:float-right { float: right; }
  .sm\:float-none { float: none; }
  .sm\:clear-left { clear: left; }
  .sm\:clear-right { clear: right; }
  .sm\:clear-both { clear: both; }
}

@media screen and (min-width: 768px) {
  .md\:float-left { float: left; }
  .md\:float-right { float: right; }
  .md\:float-none { float: none; }
  .md\:clear-left { clear: left; }
  .md\:clear-right { clear: right; }
  .md\:clear-both { clear: both; }
}

@media screen and (min-width: 992px) {
  .lg\:float-left { float: left; }
  .lg\:float-right { float: right; }
  .lg\:float-none { float: none; }
  .lg\:clear-left { clear: left; }
  .lg\:clear-right { clear: right; }
  .lg\:clear-both { clear: both; }
}

@media screen and (min-width: 1200px) {
  .xl\:float-left { float: left; }
  .xl\:float-right { float: right; }
  .xl\:float-none { float: none; }
  .xl\:clear-left { clear: left; }
  .xl\:clear-right { clear: right; }
  .xl\:clear-both { clear: both; }
}

@media screen and (min-width: 1400px) {
  .xxl\:float-left { float: left; }
  .xxl\:float-right { float: right; }
  .xxl\:float-none { float: none; }
  .xxl\:clear-left { clear: left; }
  .xxl\:clear-right { clear: right; }
  .xxl\:clear-both { clear: both; }
}

/* Vertical align */

.align-baseline {vertical-align: baseline;}
.align-bottom {vertical-align: bottom;}
.align-middle {vertical-align: middle;}
.align-text-bottom {vertical-align: text-bottom;}
.align-text-top {vertical-align: text-top;} 
.align-top {vertical-align: top;}

@media screen and (min-width: 576px) {
  .sm\:align-baseline { vertical-align: baseline; }
  .sm\:align-bottom { vertical-align: bottom; }
  .sm\:align-middle { vertical-align: middle; }
  .sm\:align-text-bottom { vertical-align: text-bottom; }
  .sm\:align-text-top { vertical-align: text-top; }
  .sm\:align-top { vertical-align: top; }
}

@media screen and (min-width: 768px) {
  .md\:align-baseline { vertical-align: baseline; }
  .md\:align-bottom { vertical-align: bottom; }
  .md\:align-middle { vertical-align: middle; }
  .md\:align-text-bottom { vertical-align: text-bottom; }
  .md\:align-text-top { vertical-align: text-top; }
  .md\:align-top { vertical-align: top; }
}

@media screen and (min-width: 992px) {
  .lg\:align-baseline { vertical-align: baseline; }
  .lg\:align-bottom { vertical-align: bottom; }
  .lg\:align-middle { vertical-align: middle; }
  .lg\:align-text-bottom { vertical-align: text-bottom; }
  .lg\:align-text-top { vertical-align: text-top; }
  .lg\:align-top { vertical-align: top; }
}

@media screen and (min-width: 1200px) {
  .xl\:align-baseline { vertical-align: baseline; }
  .xl\:align-bottom { vertical-align: bottom; }
  .xl\:align-middle { vertical-align: middle; }
  .xl\:align-text-bottom { vertical-align: text-bottom; }
  .xl\:align-text-top { vertical-align: text-top; }
  .xl\:align-top { vertical-align: top; }
}

@media screen and (min-width: 1400px) {
  .xxl\:align-baseline { vertical-align: baseline; }
  .xxl\:align-bottom { vertical-align: bottom; }
  .xxl\:align-middle { vertical-align: middle; }
  .xxl\:align-text-bottom { vertical-align: text-bottom; }
  .xxl\:align-text-top { vertical-align: text-top; }
  .xxl\:align-top { vertical-align: top; }
}

/* ============== */
/* === IMAGES === */
/* ============== */

.object-fit-contain {object-fit: contain;}
.object-fit-cover {object-fit: cover;}
.object-fit-fill {object-fit: fill;}
.object-fit-scale {object-fit: scale-down;}
.object-fit-none {object-fit: none;}

@media screen and (min-width: 576px) {
  .sm\:object-fit-contain { object-fit: contain; }
  .sm\:object-fit-cover { object-fit: cover; }
  .sm\:object-fit-fill { object-fit: fill; }
  .sm\:object-fit-scale { object-fit: scale-down; }
  .sm\:object-fit-none { object-fit: none; }
}

@media screen and (min-width: 768px) {
  .md\:object-fit-contain { object-fit: contain; }
  .md\:object-fit-cover { object-fit: cover; }
  .md\:object-fit-fill { object-fit: fill; }
  .md\:object-fit-scale { object-fit: scale-down; }
  .md\:object-fit-none { object-fit: none; }
}

@media screen and (min-width: 992px) {
  .lg\:object-fit-contain { object-fit: contain; }
  .lg\:object-fit-cover { object-fit: cover; }
  .lg\:object-fit-fill { object-fit: fill; }
  .lg\:object-fit-scale { object-fit: scale-down; }
  .lg\:object-fit-none { object-fit: none; }
}

@media screen and (min-width: 1200px) {
  .xl\:object-fit-contain { object-fit: contain; }
  .xl\:object-fit-cover { object-fit: cover; }
  .xl\:object-fit-fill { object-fit: fill; }
  .xl\:object-fit-scale { object-fit: scale-down; }
  .xl\:object-fit-none { object-fit: none; }
}

@media screen and (min-width: 1400px) {
  .xxl\:object-fit-contain { object-fit: contain; }
  .xxl\:object-fit-cover { object-fit: cover; }
  .xxl\:object-fit-fill { object-fit: fill; }
  .xxl\:object-fit-scale { object-fit: scale-down; }
  .xxl\:object-fit-none { object-fit: none; }
}

/* =============== */
/* === OPACITY === */
/* =============== */

.opacity-0 {opacity: 0;}
.opacity-25 {opacity: .25;}
.opacity-50 {opacity: .50;}
.opacity-75 {opacity: .75;}
.opacity-100 {opacity: 1;}

.hover\:opacity-0:hover { opacity: 0; }
.hover\:opacity-25:hover { opacity: .25; }
.hover\:opacity-50:hover { opacity: .50; }
.hover\:opacity-75:hover { opacity: .75; }
.hover\:opacity-100:hover { opacity: 1; }


/* ================ */
/* === OVERFLOW === */
/* ================ */

.overflow-auto {overflow: auto;}
.overflow-hidden {overflow: hidden;}
.overflow-visible {overflow: visible;}
.overflow-scroll {overflow: scroll;}

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

@media screen and (min-width: 576px) {
  .sm\:overflow-auto { overflow: auto; }
  .sm\:overflow-hidden { overflow: hidden; }
  .sm\:overflow-visible { overflow: visible; }
  .sm\:overflow-scroll { overflow: scroll; }

  .sm\:overflow-x-auto { overflow-x: auto; }
  .sm\:overflow-x-hidden { overflow-x: hidden; }
  .sm\:overflow-x-visible { overflow-x: visible; }
  .sm\:overflow-x-scroll { overflow-x: scroll; }

  .sm\:overflow-y-auto { overflow-y: auto; }
  .sm\:overflow-y-hidden { overflow-y: hidden; }
  .sm\:overflow-y-visible { overflow-y: visible; }
  .sm\:overflow-y-scroll { overflow-y: scroll; }
}

@media screen and (min-width: 768px) {
  .md\:overflow-auto { overflow: auto; }
  .md\:overflow-hidden { overflow: hidden; }
  .md\:overflow-visible { overflow: visible; }
  .md\:overflow-scroll { overflow: scroll; }

  .md\:overflow-x-auto { overflow-x: auto; }
  .md\:overflow-x-hidden { overflow-x: hidden; }
  .md\:overflow-x-visible { overflow-x: visible; }
  .md\:overflow-x-scroll { overflow-x: scroll; }

  .md\:overflow-y-auto { overflow-y: auto; }
  .md\:overflow-y-hidden { overflow-y: hidden; }
  .md\:overflow-y-visible { overflow-y: visible; }
  .md\:overflow-y-scroll { overflow-y: scroll; }
}

@media screen and (min-width: 992px) {
  .lg\:overflow-auto { overflow: auto; }
  .lg\:overflow-hidden { overflow: hidden; }
  .lg\:overflow-visible { overflow: visible; }
  .lg\:overflow-scroll { overflow: scroll; }

  .lg\:overflow-x-auto { overflow-x: auto; }
  .lg\:overflow-x-hidden { overflow-x: hidden; }
  .lg\:overflow-x-visible { overflow-x: visible; }
  .lg\:overflow-x-scroll { overflow-x: scroll; }

  .lg\:overflow-y-auto { overflow-y: auto; }
  .lg\:overflow-y-hidden { overflow-y: hidden; }
  .lg\:overflow-y-visible { overflow-y: visible; }
  .lg\:overflow-y-scroll { overflow-y: scroll; }
}

@media screen and (min-width: 1200px) {
  .xl\:overflow-auto { overflow: auto; }
  .xl\:overflow-hidden { overflow: hidden; }
  .xl\:overflow-visible { overflow: visible; }
  .xl\:overflow-scroll { overflow: scroll; }

  .xl\:overflow-x-auto { overflow-x: auto; }
  .xl\:overflow-x-hidden { overflow-x: hidden; }
  .xl\:overflow-x-visible { overflow-x: visible; }
  .xl\:overflow-x-scroll { overflow-x: scroll; }

  .xl\:overflow-y-auto { overflow-y: auto; }
  .xl\:overflow-y-hidden { overflow-y: hidden; }
  .xl\:overflow-y-visible { overflow-y: visible; }
  .xl\:overflow-y-scroll { overflow-y: scroll; }
}

@media screen and (min-width: 1400px) {
  .xxl\:overflow-auto { overflow: auto; }
  .xxl\:overflow-hidden { overflow: hidden; }
  .xxl\:overflow-visible { overflow: visible; }
  .xxl\:overflow-scroll { overflow: scroll; }

  .xxl\:overflow-x-auto { overflow-x: auto; }
  .xxl\:overflow-x-hidden { overflow-x: hidden; }
  .xxl\:overflow-x-visible { overflow-x: visible; }
  .xxl\:overflow-x-scroll { overflow-x: scroll; }

  .xxl\:overflow-y-auto { overflow-y: auto; }
  .xxl\:overflow-y-hidden { overflow-y: hidden; }
  .xxl\:overflow-y-visible { overflow-y: visible; }
  .xxl\:overflow-y-scroll { overflow-y: scroll; }
}

/* ================ */
/* === POSITION === */
/* ================ */

.position-static {position: static;}
.position-relative {position: relative;}
.position-absolute {position: absolute;}
.position-fixed {position: fixed;}
.position-sticky {position: sticky;}  

.top {top: 0;}
.top-50 {top: 50%;}
.top-100 {top: 100%;}

.bottom {bottom: 0;}
.bottom-50 {bottom: 50%;}
.bottom-100 {bottom: 100%;}

.start {left: 0;}
.start-50 {left: 50%;}
.start-100 {left: 100%;}

.end {right: 0;}
.end-50 {right: 50%;}
.end-100 {right: 100%;}

.translate-middle {transform: translate(-50%, -50%);}
.translate-middle-x {transform: translateX(-50%);}
.translate-middle-y {transform: translateY(-50%);}

@media screen and (min-width: 576px) {
  .sm\:position-static { position: static; }
  .sm\:position-relative { position: relative; }
  .sm\:position-absolute { position: absolute; }
  .sm\:position-fixed { position: fixed; }
  .sm\:position-sticky { position: sticky; }

  .sm\:top { top: 0; }
  .sm\:top-50 { top: 50%; }
  .sm\:top-100 { top: 100%; }

  .sm\:bottom { bottom: 0; }
  .sm\:bottom-50 { bottom: 50%; }
  .sm\:bottom-100 { bottom: 100%; }

  .sm\:start { left: 0; }
  .sm\:start-50 { left: 50%; }
  .sm\:start-100 { left: 100%; }

  .sm\:end { right: 0; }
  .sm\:end-50 { right: 50%; }
  .sm\:end-100 { right: 100%; }

  .sm\:translate-middle { transform: translate(-50%, -50%); }
  .sm\:translate-middle-x { transform: translateX(-50%); }
  .sm\:translate-middle-y { transform: translateY(-50%); }
}

@media screen and (min-width: 768px) {
  .md\:position-static { position: static; }
  .md\:position-relative { position: relative; }
  .md\:position-absolute { position: absolute; }
  .md\:position-fixed { position: fixed; }
  .md\:position-sticky { position: sticky; }

  .md\:top { top: 0; }
  .md\:top-50 { top: 50%; }
  .md\:top-100 { top: 100%; }

  .md\:bottom { bottom: 0; }
  .md\:bottom-50 { bottom: 50%; }
  .md\:bottom-100 { bottom: 100%; }

  .md\:start { left: 0; }
  .md\:start-50 { left: 50%; }
  .md\:start-100 { left: 100%; }

  .md\:end { right: 0; }
  .md\:end-50 { right: 50%; }
  .md\:end-100 { right: 100%; }

  .md\:translate-middle { transform: translate(-50%, -50%); }
  .md\:translate-middle-x { transform: translateX(-50%); }
  .md\:translate-middle-y { transform: translateY(-50%); }
}

@media screen and (min-width: 992px) {
  .lg\:position-static { position: static; }
  .lg\:position-relative { position: relative; }
  .lg\:position-absolute { position: absolute; }
  .lg\:position-fixed { position: fixed; }
  .lg\:position-sticky { position: sticky; }

  .lg\:top { top: 0; }
  .lg\:top-50 { top: 50%; }
  .lg\:top-100 { top: 100%; }

  .lg\:bottom { bottom: 0; }
  .lg\:bottom-50 { bottom: 50%; }
  .lg\:bottom-100 { bottom: 100%; }

  .lg\:start { left: 0; }
  .lg\:start-50 { left: 50%; }
  .lg\:start-100 { left: 100%; }

  .lg\:end { right: 0; }
  .lg\:end-50 { right: 50%; }
  .lg\:end-100 { right: 100%; }

  .lg\:translate-middle { transform: translate(-50%, -50%); }
  .lg\:translate-middle-x { transform: translateX(-50%); }
  .lg\:translate-middle-y { transform: translateY(-50%); }
}

@media screen and (min-width: 1200px) {
  .xl\:position-static { position: static; }
  .xl\:position-relative { position: relative; }
  .xl\:position-absolute { position: absolute; }
  .xl\:position-fixed { position: fixed; }
  .xl\:position-sticky { position: sticky; }

  .xl\:top { top: 0; }
  .xl\:top-50 { top: 50%; }
  .xl\:top-100 { top: 100%; }

  .xl\:bottom { bottom: 0; }
  .xl\:bottom-50 { bottom: 50%; }
  .xl\:bottom-100 { bottom: 100%; }

  .xl\:start { left: 0; }
  .xl\:start-50 { left: 50%; }
  .xl\:start-100 { left: 100%; }

  .xl\:end { right: 0; }
  .xl\:end-50 { right: 50%; }
  .xl\:end-100 { right: 100%; }

  .xl\:translate-middle { transform: translate(-50%, -50%); }
  .xl\:translate-middle-x { transform: translateX(-50%); }
  .xl\:translate-middle-y { transform: translateY(-50%); }
}

@media screen and (min-width: 1400px) {
  .xxl\:position-static { position: static; }
  .xxl\:position-relative { position: relative; }
  .xxl\:position-absolute { position: absolute; }
  .xxl\:position-fixed { position: fixed; }
  .xxl\:position-sticky { position: sticky; }

  .xxl\:top { top: 0; }
  .xxl\:top-50 { top: 50%; }
  .xxl\:top-100 { top: 100%; }

  .xxl\:bottom { bottom: 0; }
  .xxl\:bottom-50 { bottom: 50%; }
  .xxl\:bottom-100 { bottom: 100%; }

  .xxl\:start { left: 0; }
  .xxl\:start-50 { left: 50%; }
  .xxl\:start-100 { left: 100%; }

  .xxl\:end { right: 0; }
  .xxl\:end-50 { right: 50%; }
  .xxl\:end-100 { right: 100%; }

  .xxl\:translate-middle { transform: translate(-50%, -50%); }
  .xxl\:translate-middle-x { transform: translateX(-50%); }
  .xxl\:translate-middle-y { transform: translateY(-50%); }
}

/* ================== */
/* === VISIBILITY === */
/* ================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  white-space: nowrap;
  overflow: hidden; 
}

.visibility-visible { visibility: visible; }
.visibility-hidden { visibility: hidden; }
.visibility-collapse { visibility: collapse; }


/* ================== */
/* === LINE-CLAMP === */
/* ================== */

[class*="line-clamp"]  {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.line-clamp-1 {-webkit-line-clamp: 1;}
.line-clamp-2 {-webkit-line-clamp: 2;}
.line-clamp-3 {-webkit-line-clamp: 3;}
.line-clamp-4 {-webkit-line-clamp: 4;}
.line-clamp-5 {-webkit-line-clamp: 5;}
.line-clamp-6 {-webkit-line-clamp: 6;}

@media screen and (min-width: 576px) {
  .sm\:line-clamp-1 { -webkit-line-clamp: 1; }
  .sm\:line-clamp-2 { -webkit-line-clamp: 2; }
  .sm\:line-clamp-3 { -webkit-line-clamp: 3; }
  .sm\:line-clamp-4 { -webkit-line-clamp: 4; }
  .sm\:line-clamp-5 { -webkit-line-clamp: 5; }
  .sm\:line-clamp-6 { -webkit-line-clamp: 6; }
}

@media screen and (min-width: 768px) {
  .md\:line-clamp-1 { -webkit-line-clamp: 1; }
  .md\:line-clamp-2 { -webkit-line-clamp: 2; }
  .md\:line-clamp-3 { -webkit-line-clamp: 3; }
  .md\:line-clamp-4 { -webkit-line-clamp: 4; }
  .md\:line-clamp-5 { -webkit-line-clamp: 5; }
  .md\:line-clamp-6 { -webkit-line-clamp: 6; }
}

@media screen and (min-width: 992px) {
  .lg\:line-clamp-1 { -webkit-line-clamp: 1; }
  .lg\:line-clamp-2 { -webkit-line-clamp: 2; }
  .lg\:line-clamp-3 { -webkit-line-clamp: 3; }
  .lg\:line-clamp-4 { -webkit-line-clamp: 4; }
  .lg\:line-clamp-5 { -webkit-line-clamp: 5; }
  .lg\:line-clamp-6 { -webkit-line-clamp: 6; }
}

@media screen and (min-width: 1200px) {
  .xl\:line-clamp-1 { -webkit-line-clamp: 1; }
  .xl\:line-clamp-2 { -webkit-line-clamp: 2; }
  .xl\:line-clamp-3 { -webkit-line-clamp: 3; }
  .xl\:line-clamp-4 { -webkit-line-clamp: 4; }
  .xl\:line-clamp-5 { -webkit-line-clamp: 5; }
  .xl\:line-clamp-6 { -webkit-line-clamp: 6; }
}

@media screen and (min-width: 1400px) {
  .xxl\:line-clamp-1 { -webkit-line-clamp: 1; }
  .xxl\:line-clamp-2 { -webkit-line-clamp: 2; }
  .xxl\:line-clamp-3 { -webkit-line-clamp: 3; }
  .xxl\:line-clamp-4 { -webkit-line-clamp: 4; }
  .xxl\:line-clamp-5 { -webkit-line-clamp: 5; }
  .xxl\:line-clamp-6 { -webkit-line-clamp: 6; }
}

/* ================= */
/* === ALIGNMENT === */
/* ================= */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-start { text-align: start; }
.text-end { text-align: end; }

@media screen and (min-width: 576px) {
  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }
  .sm\:text-justify { text-align: justify; }
  .sm\:text-start { text-align: start; }
  .sm\:text-end { text-align: end; }
}

@media screen and (min-width: 768px) {
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
  .md\:text-justify { text-align: justify; }
  .md\:text-start { text-align: start; }
  .md\:text-end { text-align: end; }
}

@media screen and (min-width: 992px) {
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }
  .lg\:text-justify { text-align: justify; }
  .lg\:text-start { text-align: start; }
  .lg\:text-end { text-align: end; }
}

@media screen and (min-width: 1200px) {
  .xl\:text-left { text-align: left; }
  .xl\:text-center { text-align: center; }
  .xl\:text-right { text-align: right; }
  .xl\:text-justify { text-align: justify; }
  .xl\:text-start { text-align: start; }
  .xl\:text-end { text-align: end; }
}

@media screen and (min-width: 1400px) {
  .xxl\:text-left { text-align: left; }
  .xxl\:text-center { text-align: center; }
  .xxl\:text-right { text-align: right; }
  .xxl\:text-justify { text-align: justify; }
  .xxl\:text-start { text-align: start; }
  .xxl\:text-end { text-align: end; }
}