@charset "UTF-8";
/* ===================================================================
 * DEFAULT
 * ================================================================= */
/**
 * SETTINGS : Variables globales, couleurs, polices, etc.
 * TOOLS : Outils disponibles de manières globales, mixins, fonctions
 * GENERIC : Styles de niveau 0 (Normalize.css, resets, box-sizing)
 * ELEMENTS : Éléments HTML (sélecteur de balises), H1–H6, liens, listes, etc
 * LAYOUT : Éléments de mise en page (Grille etc...)
 * OBJECTS : Composants simples (Boutons, Listes etc...)
 * COMPONENTS : Composants (Cartes, Fil d'ariane, Header, Footer, Navigations etc...)
 * SECTIONS : Modules (Actualités, événements etc...)
 * UTILITIES : Les atouts, utilitaires avec des spécificités maximales.
 */
/* backdrop */
::backdrop {
  --color-gray-1: #222222;
}

:root {
  /* =============================================================================
  COLORS
  ============================================================================= */
  --color-black: #000000;
  --color-gray-1: #222222;
  --color-gray-2: #444444;
  --color-gray-3: #666666;
  --color-gray-4: #A5A5A5;
  --color-gray-5: #CCCCCC;
  --color-gray-6: #EEEEEE;
  --color-white: #FFFFFF;
  --color-gray-1-1: #575757;
  --color-gray-2-1: #707070;
  --color-gray-3-1: #647278;
  --color-gray-4-1: #00000029;
  --color-gray-5-1: #F7F7F7;
  --color-light: var(--color-white);
  --color-dark: var(--color-black);
  --color-default: var(--color-gray-1);
  /*
  --color-:#586BD4;
  --color-:#0381A2;
  --color-:#707070;
  --color-:#6B797F;
  --color-:#018DAD;
  --color-:#D53E5A;
  --color-:#575757;
  --color-:#00000029;
  */
  --color-primary-lighter: #9BA3E8;
  --color-primary-light: #7984DE;
  --color-primary: #576CD4;
  --color-primary-dark: #4B5DBA;
  --color-primary-darker: #404E9F;
  --color-secondary-lighter: #4AB0C9;
  --color-secondary-light: #4CB8D1;
  --color-secondary: #0A7C99;
  --color-secondary-dark: #02657F;
  --color-secondary-darker: #026075;
  --color-tertiary-lighter: #0381A2;
  --color-tertiary-light: #0381A2;
  --color-tertiary: #0381A2;
  --color-tertiary-dark: #0381A2;
  --color-tertiary-darker: #0381A2;
  --color-information: #586BD4;
  --color-success: #018DAD;
  --color-warning: #D53E5A;
  --color-fail: #575757;
  --color-brand-facebook: #586BD4;
  --color-brand-twitter: #0381A2;
  --color-brand-linkedin: #707070;
  --color-brand-instagram: #6B797F;
  --color-brand-youtube: #D53E5A;
  --c-card-title-color: var(--color-light);
  /* =============================================================================
  SPACING
  ============================================================================= */
  --spacer: 4px;
  --spacer-0: calc(var(--spacer) * 0); /* 0 */
  --spacer-1: calc(var(--spacer) * 0.5); /* 4px */
  --spacer-2: calc(var(--spacer)); /* 8px */
  --spacer-3: calc(var(--spacer) * 1.5); /* 12px */
  --spacer-4: calc(var(--spacer) * 2); /* 16px */
  --spacer-5: calc(var(--spacer) * 3); /* 24px */
  --spacer-6: calc(var(--spacer) * 4); /* 32px */
  --spacer-7: calc(var(--spacer) * 5); /* 40px */
  --spacer-8: calc(var(--spacer) * 6); /* 48px */
  --spacer-9: calc(var(--spacer) * 8); /* 64px */
  --spacer-10: calc(var(--spacer) * 10); /* 80px */
  --spacer-11: calc(var(--spacer) * 12); /* 96px */
  --spacer-12: calc(var(--spacer) * 14); /* 112px */
  --spacer-13: calc(var(--spacer) * 16); /* 128px */
  --spacer-14: calc(var(--spacer) * 18); /* 144px */
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --font-size-sm: 1.6rem;
  --font-size-md: 2rem;
  --font-size-lg: 2.4rem;
  /* =============================================================================
  FONTS
  ============================================================================= */
  --font-family-body: "Poppins", sans-serif;
  --font-family-heading: "Exo_2_bold", sans-serif;
  --font-family-monospace: monospace;
  --font-family-icons: "packicons";
  /* =============================================================================
  RADIUS
  ============================================================================= */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  /* =============================================================================
  BUTTONS OVERRIDES
  ============================================================================= */
  /* default */
  --c-button-font-size: 1.6rem;
  --c-button-letter-spacing: 0.04rem;
  --c-button-padding-block: var(--spacer-4);
  --c-button-padding-inline: var(--spacer-5);
  --c-button-column-gap: var(--spacer-2);
  --c-button-icon-size: 4.8rem;
  --c-button-icon-font-size: 1.6rem;
  --c-button-color: var(--color-light);
  --c-button-bg-color: var(--color-default);
  --c-button-hover-bg-color: var(--color-primary-dark);
  --c-button-outline-color: var(--color-default);
  /* small */
  --c-button-sm-font-size: 1.2rem;
  --c-button-sm-letter-spacing: 0.03rem;
  --c-button-sm-padding-block: var(--spacer-2);
  --c-button-sm-padding-inline: var(--spacer-4);
  --c-button-sm-column-gap: var(--spacer-1);
  --c-button-sm-icon-size: 3.1rem;
  --c-button-sm-icon-font-size: 1.5rem;
  /* large */
  --c-button-lg-font-size: 1.8rem;
  --c-button-lg-letter-spacing: 0.045rem;
  --c-button-lg-padding-block: var(--spacer-5);
  --c-button-lg-padding-inline: var(--spacer-6);
  --c-button-lg-column-gap: var(--spacer-3);
  --c-button-lg-icon-size: 6.8rem;
  --c-button-lg-icon-font-size: 2rem;
  /* secondary */
  --c-button-secondary-color: var(--color-default);
  --c-button-secondary-bg-color: var(--color-light);
  /* light */
  --c-button-light-color: var(--color-dark);
  --c-button-light-bg-color: var(--color-light);
  --c-button-light-hover-color: var(--c-button-light-color);
  --c-button-light-hover-bg-color: var(--color-primary-light);
  /* =============================================================================
  LINKS OVERRIDES
  ============================================================================= */
  /* default */
  --o-link-color: var(--color-gray-2);
  --o-link-border-color: var(--color-gray-1);
  --o-link-hover-color: var(--color-primary-dark);
  --o-link-hover-border-color: currentColor;
  /* =============================================================================
  SKIP LINKS OVERRIDES
  ============================================================================= */
  --c-skip-links-padding-y: var(--spacer-3);
  --c-skip-links-bgd-color: var(--color-gray-1);
  --c-skip-links-translate-y: -60px;
  --c-skip-links-color: var(--color-light);
  --c-skip-links-hover-color: var(--color-primary-lighter);
  /* =============================================================================
  BACK TO TOP OVERRIDES
  ============================================================================= */
  --c-back-to-top-color: var(--color-light);
  --c-back-to-top-bgd-color: var(--color-primary);
  --c-back-to-top-border-color: var(--color-primary);
  --c-back-to-top-hover-color: var(--color-light);
  --c-back-to-top-hover-bgd-color: var(--color-secondary);
  --c-back-to-top-hover-border-color: var(--color-primary-dark);
  /* =============================================================================
  LIST OVERRIDES
  ============================================================================= */
  --c-list-marker-color: currentColor;
  /* =============================================================================
  BREADCRUMB OVERRIDES
  ============================================================================= */
  --c-breadcrumb-color: var(--color-gray-2);
  --c-breadcrumb-border-color: var(--color-gray-1);
  --c-breadcrumb-separator-color: var(--color-gray-1);
  --c-breadcrumb-hover-color: var(--color-primary-dark);
  --c-breadcrumb-hover-border-color: currentColor;
  --c-breadcrumb-separator: "/";
  --c-breadcrumb-spacing: 4px;
  /* =============================================================================
  FLASH INFO OVERRIDES
  ============================================================================= */
  --c-flash-info-color: var(--color-light);
  --c-flash-info-bgd-color: var(--color-gray-1);
  /* =============================================================================
  ACCORDION OVERRIDES
  ============================================================================= */
  /* heading - button */
  --c-accordion-btn-font-family: var(--font-family-heading);
  --c-accordion-btn-font-size: 2.2rem;
  --c-accordion-btn-color: var(--color-light);
  --c-accordion-btn-bgd: var(--color-default);
  --c-accordion-btn-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20005 10.113L7.99589 14.8002L12.8 10.113M8.0042 14.8002V1.2002' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --c-accordion-btn-padding-y: var(--spacer-4);
  --c-accordion-btn-padding-x: var(--spacer-5);
  /* body - panel content */
  --c-accordion-panel-font-family: inherit;
  --c-accordion-panel-font-size: 1.7rem;
  --c-accordion-panel-color: var(--color-gray-2);
  --c-accordion-panel-border-color: var(--color-gray-5);
  --c-accordion-panel-padding-y: var(--spacer-5);
  --c-accordion-panel-padding-x: var(--spacer-5);
  /* =============================================================================
  TABS OVERRIDES
  ============================================================================= */
  /* heading - button */
  --c-tabs-btn-font-family: var(--font-family-heading);
  --c-tabs-btn-font-size: 1.7rem;
  --c-tabs-btn-color: var(--color-light);
  --c-tabs-btn-bgd: var(--color-default);
  --c-tabs-btn-border-color: var(--color-gray-5);
  --c-tabs-btn-padding-y: var(--spacer-3);
  --c-tabs-btn-padding-x: var(--spacer-4);
  --c-tabs-btn-active-color: var(--color-light);
  --c-tabs-btn-active-bgd: var(--color-primary-dark);
  /* body - panel content */
  --c-tabs-panel-font-family: inherit;
  --c-tabs-panel-font-size: 1.7rem;
  --c-tabs-panel-color: var(--color-gray-2);
  --c-tabs-panel-border-color: var(--color-gray-5);
  --c-tabs-panel-padding-y: var(--spacer-5);
  --c-tabs-panel-padding-x: var(--spacer-5);
  --c-tabs-panel-min-height: auto;
  --c-tabs-panel-max-height: none;
  /* =============================================================================
  BANNER OVERRIDES
  ============================================================================= */
  --c-banner-color: var(--color-dark);
  --c-banner-tag-color: var(--color-light);
  --c-banner-tag-background: var(--color-gray-2);
  /* =============================================================================
  PAGER OVERRIDES
  ============================================================================= */
  --c-pager-font-size: 1.7rem;
  --c-pager-item-spacing: 12px;
  --c-pager-item-width: 42px;
  --c-pager-item-height: 42px;
  --c-pager-link-color: var(--color-default);
  --c-pager-link-bgd-color: var(--color-light);
  --c-pager-link-border-color: var(--color-gray-3);
  --c-pager-link-border-radius: var(--radius-sm);
  --c-pager-icon-font-size: 1.6rem;
  --c-pager-link-hover-color: var(--color-light);
  --c-pager-link-hover-bgd-color: var(--color-primary-dark);
  /* =============================================================================
  FORM OVERRIDES
  ============================================================================= */
  --c-form-color: var(--color-gray-2);
  --c-form-placeholder-color: var(--color-gray-3);
  --c-form-label-font-weight: 700;
  --c-form-item-height: 50px;
  --c-form-item-font-size: 1.7rem;
  --c-form-item-font-weight: 400;
  --c-form-item-font-color: var(--color-gray-3);
  --c-form-item-bgd-color: var(--color-light);
  --c-form-item-border-color: var(--color-gray-4);
  --c-form-item-disabled-color: var(--color-gray-3);
  --c-form-item-disabled-bgd-color: var(--color-gray-5);
  --c-form-alert-font-size: 1.5rem;
  --c-form-alert-icon-size: 42px;
  --c-form-alert-icon-font-size: 1.7rem;
  --c-form-alert-info-color: var(--color-gray-1);
  --c-form-alert-info-bgd-color: #B6DCFF;
  --c-form-select-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.641L9.9948 18.5L16 12.641M10.0052 18.5V1.5' stroke='%23008383' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --c-form-select-icon-dark: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.641L9.9948 18.5L16 12.641M10.0052 18.5V1.5' stroke='%2300DCCF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --c-form-date-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7.18607H18M5.57263 2V5.06042M14.4274 2V5.06042M4.04341 3.46619H15.9566C17.0851 3.46619 18 4.34334 18 5.42537V16.0408C18 17.1228 17.0851 18 15.9566 18H4.04341C2.91486 18 2 17.1228 2 16.0408V5.42537C2 4.34334 2.91486 3.46619 4.04341 3.46619Z' stroke='%23008383' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --c-form-date-icon-dark: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7.18607H18M5.57263 2V5.06042M14.4274 2V5.06042M4.04341 3.46619H15.9566C17.0851 3.46619 18 4.34334 18 5.42537V16.0408C18 17.1228 17.0851 18 15.9566 18H4.04341C2.91486 18 2 17.1228 2 16.0408V5.42537C2 4.34334 2.91486 3.46619 4.04341 3.46619Z' stroke='%2300DCCF' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --c-form-check-size: 14px;
  --c-form-check-border-color: var(--color-gray-2);
  --c-form-check-bgd-color: var(--color-light);
  --c-form-checked-inner-size: 8px;
  --c-form-checked-border-color: var(--color-primary-dark);
  --c-form-checked-bgd-color: var(--color-primary-dark);
  --c-form-actions-height: 48px;
  --c-form-actions-search-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.20039 10.8L2.40039 13.6M13.6001 7.06666C13.6001 9.64399 11.5107 11.7333 8.93342 11.7333C6.35609 11.7333 4.26675 9.64399 4.26675 7.06666C4.26675 4.48933 6.35609 2.39999 8.93342 2.39999C11.5107 2.39999 13.6001 4.48933 13.6001 7.06666Z' stroke='white' stroke-width='1.25' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
  /* =============================================================================
  FORM OVERLAP (SEARCH) OVERRIDES
  ============================================================================= */
  --c-form-overlap-height: 74px;
  --c-form-overlap-border-color: var(--c-form-item-border-color);
  --c-form-overlap-item-color: var(--color-dark);
  --c-form-overlap-action-font-size: 2rem;
  --c-form-overlap-action-color: var(--color-primary-dark);
  --c-form-overlap-action-hover-color: var(--color-light);
  --c-form-overlap-action-hover-bgd-color: var(--c-form-overlap-action-color);
  /* =============================================================================
  TOOLTIP OVERRIDES
  ============================================================================= */
  /* tooltip button */
  --c-tooltip-btn-size: 42px;
  --c-tooltip-btn-color: #ffffff;
  --c-tooltip-btn-bgd-color: #008383;
  --c-tooltip-btn-font-size: 1.7rem;
  --c-tooltip-btn-font-weight: 700;
  /* tooltip description */
  --c-tooltip-desc-spacer: 2px; /* space between the button and the arrow */
  --c-tooltip-desc-padding-y: .5em;
  --c-tooltip-desc-padding-x: 1em;
  --c-tooltip-desc-color: var(--color-light);
  --c-tooltip-desc-bgd-color: var(--color-dark);
  --c-tooltip-desc-arrow-size: .5em;
  /* =============================================================================
  ALERT OVERRIDES
  ============================================================================= */
  --c-alert-padding-y: var(--spacer-5);
  --c-alert-padding-x: var(--spacer-7);
  --c-alert-font-size: 1.7rem;
  --c-alert-font-size-mobile: 1.5rem;
  --c-alert-color: var(--color-white);
  --c-alert-title-font-size: 4.6rem;
  --c-alert-title-font-size-mobile: 2.2rem;
  --c-alert-title-spacing: var(--spacer-5);
  --c-alert-description-spacing: var(--spacer-3);
  /* =============================================================================
  TABLE OVERRIDES
  ============================================================================= */
  --c-table-header-bgd-color: var(--color-default);
  --c-table-header-color: var(--color-light);
  --c-table-border-color: var(--color-gray-6);
  --c-table-cell-border-color: var(--color-light);
  --c-table-strip-color: var(--color-gray-6);
  /* =============================================================================
  QUOTE OVERRIDES
  ============================================================================= */
  --c-quote-font-size: 2.6rem;
  --c-quote-font-size-mobile: 2rem;
  --c-quote-author-font-size: 1.2rem;
  --c-quote-color: var(--color-dark);
  --c-quote-icon: url("data:image/svg+xml,%3Csvg width='52' height='46' viewBox='0 0 52 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' d='M15.3333 6C19.4 6 23.3001 7.61549 26.1756 10.491C29.0512 13.3666 30.6667 17.2667 30.6667 21.3333C30.6667 25.4 29.0512 29.3001 26.1756 32.1757C23.3001 35.0513 19.4 36.6667 15.3333 36.6667V46C3.09333 37.6 0 30.5467 0 21.3333C0 17.2667 1.61541 13.3666 4.49097 10.491C7.36652 7.61549 11.2667 6 15.3333 6Z' fill='%23A5A5A5'/%3E%3Cpath d='M36.6667 6C40.7333 6 44.6334 7.61549 47.5089 10.491C50.3845 13.3666 52 17.2667 52 21.3333C52 25.4 50.3845 29.3001 47.5089 32.1757C44.6334 35.0513 40.7333 36.6667 36.6667 36.6667V46C24.4267 37.6 21.3333 30.5467 21.3333 21.3333C21.3333 17.2667 22.9487 13.3666 25.8243 10.491C28.6999 7.61549 32.6 6 36.6667 6Z' fill='%23666666'/%3E%3C/svg%3E%0A");
  --c-quote-icon-dark: url("data:image/svg+xml,%3Csvg width='52' height='46' viewBox='0 0 52 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' d='M15.3333 6C19.4 6 23.3001 7.61549 26.1756 10.491C29.0512 13.3666 30.6667 17.2667 30.6667 21.3333C30.6667 25.4 29.0512 29.3001 26.1756 32.1757C23.3001 35.0513 19.4 36.6667 15.3333 36.6667V46C3.09333 37.6 0 30.5467 0 21.3333C0 17.2667 1.61541 13.3666 4.49097 10.491C7.36652 7.61549 11.2667 6 15.3333 6Z' fill='%23A5A5A5'/%3E%3Cpath d='M36.6666 6C40.7333 6 44.6334 7.61549 47.5089 10.491C50.3845 13.3666 52 17.2667 52 21.3333C52 25.4 50.3845 29.3001 47.5089 32.1757C44.6334 35.0513 40.7333 36.6667 36.6666 36.6667V46C24.4266 37.6 21.3333 30.5467 21.3333 21.3333C21.3333 17.2667 22.9487 13.3666 25.8243 10.491C28.6998 7.61549 32.6 6 36.6666 6Z' fill='%23CCCCCC'/%3E%3C/svg%3E");
  /* =============================================================================
  MODAL OVERRIDES
  ============================================================================= */
  --c-modal-backdrop-color: var(--color-gray-1);
  --c-modal-backdrop-opacity: 0.8;
  /* dialog */
  --c-modal-dialog-padding-y: var(--spacer-6);
  --c-modal-dialog-padding-x: var(--spacer-5);
  --c-modal-dialog-bgd-color: var(--color-white);
  --c-modal-dialog-border-radius: var(--radius-sm);
  --c-modal-dialog-width-sm: 300px;
  --c-modal-dialog-width-md: 600px;
  --c-modal-dialog-width-lg: 900px;
  /* content */
  --c-modal-header-color: var(--color-fail);
  --c-modal-body-color: var(--color-gray-2);
  --c-modal-close-btn-color: var(--color-gray-2);
  /* =============================================================================
  VIDEO OVERRIDES
  ============================================================================= */
  --c-video-y-spacing: var(--spacer-3);
  --c-video-button-bg-color: var(--color-dark);
  --c-video-button-icon-size: 8rem;
  --c-video-button-fg-color: #fff;
  --c-video-button-font-size: 3rem;
  --c-video-media-border-radius: 0;
  --c-video-media-aspect-ratio: 16/9;
  /* =============================================================================
  FIGURE OVERRIDES
  ============================================================================= */
  --c-figure-y-spacing: var(--spacer-2);
  --c-figure-bg-color: var(--color-light);
  --c-figure-border-radius: var(--radius-md);
  --c-figure-aspect-ratio: 16/9;
  /* caption */
  --c-figure-caption-spacing: var(--spacer-6);
  --c-figure-caption-font-size: 1.2rem;
  --c-figure-caption-font-weight: 400;
  --c-figure-caption-line-height: 1.5;
  --c-figure-caption-color: var(--color-gray-2);
  /* =============================================================================
    TAC OVERRIDES
    ============================================================================= */
  --c-tac-bg-color: #EFEFEF;
  --c-tac-text-color: var(--color-dark);
}
@media (min-width: 792px) {
  :root {
    --spacer: 8px;
  }
}

.c-breadcrumb--light {
  --c-breadcrumb-color: var(--color-light);
  --c-breadcrumb-border-color: var(--color-gray-4);
  --c-breadcrumb-separator-color: var(--color-gray-4);
  --c-breadcrumb-hover-color: var(--color-primary-light);
}

.c-banner--light {
  --c-banner-color: var(--color-light);
  --c-banner-tag-color: var(--color-dark);
  --c-banner-tag-background: var(--color-gray-5);
}

[data-theme=dark] {
  color-scheme: dark;
  --color-black: #FFFFFF;
  --color-gray-1: #EEEEEE;
  --color-gray-2: #CCCCCC;
  --color-gray-3: #A5A5A5;
  --color-gray-4: #666666;
  --color-gray-5: #444444;
  --color-gray-6: #222222;
  --color-white: #000000;
  --color-primary-lighter: #005F6C;
  --color-primary-light: #008383;
  --color-primary: #00DCCF;
  --color-primary-dark: #5FFAF0;
  --color-primary-darker: #ACFFFA;
  --color-secondary-lighter: #150025;
  --color-secondary-light: #3A0067;
  --color-secondary: #4F039B;
  --color-secondary-dark: #7333DB;
  --color-secondary-darker: #8C70FB;
  --color-tertiary-lighter: #310023;
  --color-tertiary-light: #740053;
  --color-tertiary: #B70585;
  --color-tertiary-dark: #E362BF;
  --color-tertiary-darker: #FAD4EF;
  --color-information: #B6DCFF;
  --color-success: #C1FFAB;
  --color-warning: #FFE2C0;
  --color-fail: #FFACAC;
  background-color: var(--color-dark);
  --c-button-color: var(--color-dark);
  --c-button-bg-color: var(--color-gray-1);
  --c-button-hover-bg-color: var(--color-primary-dark);
  --c-button-outline-color: var(--color-dark);
}

/* ===================================================================
 * FONTS
 * ================================================================= */
/*
 *   => $family: font name
 *   => $police: font file.
 *   => $font-weight: (normal, 600...)
 *   => $font-style: (normal, italic...)
 *   Example :
 *   @font-face {
 *       @include font-face('ExampleFont', 'ExampleFont-webfont', 400);
 *   }
 *
 *   Pour une police d'icône, la 'font-display' doit être à 'block' :
 *   @font-face {
 *       @include font-face('IconFont', 'path-to-icon-font', 400, block);
 *   }
 */
/* Headdings */
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-ExtraBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2_bold";
  src: url("../fonts/Exo2-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-ExtraLightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-ExtraBoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo_2";
  src: url("../fonts/Exo2-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraLightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "packicons";
  src: url("../fonts/packicons.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ===================================================================
 * FORMS
 * ================================================================= */
/*
 *  Placeholder :
 *  A utiliser sur une champ input, ex: "c-form__item"
 *  => $color:          couleur du texte
 *  => $fontWeight:     poids de la police
 */
/*
 *   Checkbox :
 *   => $checkboxMarginTop:         alignement de la case avec le libellé
 *   => $checkboxSize:              largeur et hauteur de la case
 *   => $checkboxBorderColor:       couleur de bordure de la case
 *   => $checkboxBgColor:           couleur de fond de la case
 *   => $checkboxInnerSize:         largeur et hauteur de la coche
 *   => $checkboxInnerBorderColor:  couleur de bordure de la case coché
 *   => $checkboxInnerBgColor:      couleur de fond de la case coché
 *   => $checkboxDisabledColor:     couleur de désactivé de la case
 */
/*
 *   Radio button :
 *   => $radioMarginTop:        alignement du bouton radio avec le libellé
 *   => $radioSize:             largeur et hauteur du bouton radio
 *   => $radioBorderColor:      couleur de bordure du bouton radio
 *   => $radioBgColor:          couleur de fond du bouton radio
 *   => $radioInnerSize:        largeur et hauteur de la coche
 *   => $radioInnerBorderColor: couleur de bordure du bouton radio coché
 *   => $radioInnerBgColor:     couleur de fond du bouton radio coché
 *   => $radioDisabledColor:    couleur de désactivé du bouton radio
 */
/*
 *   Custom select :
 *   => $arrow:   nom du fichier image
 *   => $taille:  width du background en pixels permettant de calculer le padding-right
 *   => $right:   espacement de l'image par rapport au bord droit
 */
/*
 *   IMAGE DECLARATION
 *   => @a : image file name
 *   => @b : background color, repeat...
 *   Example :
 *       .backgroundImage('bullet.png', no-repeat 0 0 #fff);
 */
/**
 * GRADIENT
 */
/**
 * CLEARFIX
 */
/**
 * SVG
 */
/**
 * Génération des colonnes
 */
/**
 * Génère une classe utilitaire avec ses suffixes responsive (issue de 1_settings/breakpoints)
 * @mixin
 * @param {string} $className - Le nom de la classe
 * @param {string} $property - La propriété CSS (exemple: "text-align")
 * @param {string} $property - La valeur de la propriété CSS entière (exemple: "right")
 *
 * @example
 * .u-text-right {
       text-align: right;

        &\@xs {
            @media (min-width: $smallmobile) {
                text-align: right;
            }
        }
        [...]
    }
 */
/**
 * Taille d'un element en cercle
 */
/**
 * 3 tailles de box shadow par défaut (large, medium & small)
 */
/**
 * Scrollbar style
 */
/**
 * Font icon
 */
/**
 * Assistive technology only (sr-only)
 */
/*
 * Calcul la taille d'une colonne dans un contexte CSS Gap
 * Permet d'avoir la taille exact d'une colonne séparée par la gouttière spécifiée.
 * @param  {$nbCols}   int      Nombre de colonnes
 * @param  {$gutter}   int      Gouttière (En px)
 */
html {
  box-sizing: border-box;
}

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

/* stylelint-disable declaration-property-unit-allowed-list */
@media print {
  html {
    line-height: 1.4;
    font-family: var(--font-family-body);
    font-size: 11pt;
  }
}
/* stylelint-enable declaration-property-unit-allowed-list */
/* normalize.css v3.aze.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  /* 2 */
  text-size-adjust: 100%; /* 2 */
  font-size: 62.5%;
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  position: relative;
  vertical-align: baseline;
  line-height: 0;
  font-size: 75%;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0; /* 3 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  appearance: textfield; /* 1 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  margin: 0 2px;
  border: 1px solid #c0c0c0;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

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

strong {
  font-weight: 700;
}

h1, h2, h3,
h4, h5, h6 {
  margin-top: 0;
  border: none;
  padding: 0;
  color: var(--color-dark);
  font-family: var(--font-family-heading);
  font-weight: 400;
}
@media (min-width: 1024px) {
  h1, h2, h3,
  h4, h5, h6 {
    line-height: 1.35;
  }
}

h2, h3,
h4, h5, h6 {
  margin-bottom: var(--spacer-5);
}

h1 {
  font-size: 2.6rem;
}
@media (min-width: 1024px) {
  h1 {
    font-size: 5.4rem;
  }
}

h2 {
  font-size: 2.2rem;
}
@media (min-width: 1024px) {
  h2 {
    font-size: 4.6rem;
  }
}

h3 {
  font-size: 1.9rem;
}
@media (min-width: 1024px) {
  h3 {
    font-size: 3rem;
  }
}

h4 {
  font-size: 1.7rem;
}
@media (min-width: 1024px) {
  h4 {
    font-size: 2.5rem;
  }
}

h5 {
  font-size: 1.5rem;
}
@media (min-width: 1024px) {
  h5 {
    font-size: 2.2rem;
  }
}

h6 {
  font-size: 1.5rem;
}
@media (min-width: 1024px) {
  h6 {
    font-size: 1.7rem;
  }
}

img {
  max-width: 100%;
  height: auto;
}

a:active, a:hover {
  text-decoration: underline;
}

ol,
ul {
  padding-left: 1.5em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--color-light);
  width: 100%;
  color: var(--color-dark);
  font-family: var(--font-family-body);
  font-size: 1.4rem;
  font-weight: 400;
}
@media (min-width: 792px) {
  body {
    font-size: 1.6rem;
  }
}

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

@media print {
  body,
  html {
    height: auto;
  }
}
p {
  margin: 0 0 var(--spacer-5);
  line-height: var(--line-height-base);
}

:root {
  --table-header-bg: var(--color-default);
  --table-header-fg: var(--color-light);
  --table-border-color: var(--color-gray-5);
}

.table {
  margin-bottom: var(--spacer-5);
  width: 100%;
}
.table th, .table td {
  padding: 1rem;
}
.table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  font-weight: 700;
}
.table--centered {
  text-align: center;
}
.table--bordered {
  border: 0.1rem solid var(--table-border-color);
}
.table--bordered th, .table--bordered td {
  border: 0.1rem solid var(--table-border-color);
}

fieldset {
  margin: 0;
  padding: var(--spacer-4);
  border-color: var(--color-gray-4);
}
fieldset:not(:last-child) {
  margin-bottom: 16px;
}

legend {
  padding: 0 5px;
  font-weight: 700;
  font-style: italic;
}

.container-fluid {
  padding-right: calc(32px / 2);
  padding-left: calc(32px / 2);
  width: 100%;
}
.container-fluid :where(.container) {
  padding: 0;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-right: calc(32px / 2);
  padding-left: calc(32px / 2);
  width: 100%;
}
@media (min-width: 1024px) {
  .container {
    max-width: 1116px;
  }
}
@media (min-width: 1459px) {
  .container {
    max-width: 1172px;
  }
}
@media (min-width: 1759px) {
  .container {
    max-width: 1450px;
  }
}
.container :where(.container) {
  padding: 0;
}

.container-grid {
  display: grid;
  grid-template-columns: 1fr repeat(12, minmax(21.3333333333px, 74.6666666667px)) 1fr;
  gap: 0 32px;
  width: 100%;
}
.container-grid > * {
  display: block;
  grid-column: 3/13;
}
.container-grid .full-bleed {
  grid-column: 1/15;
  width: 100%;
}
.container-grid :where(.container) {
  padding: 0;
}
@media (max-width: 1023px) {
  .container-grid {
    display: flex;
    flex-direction: column;
  }
  .container-grid > :not(.full-bleed) {
    padding-inline: calc(32px / 2);
  }
}

.has-column-left .container-grid__left {
  grid-row: 1/100;
  grid-column: 3/6;
}
.has-column-left > * {
  display: block;
  grid-column: 6/13;
}

.has-column-right .container-grid__right {
  grid-row: 1/100;
  grid-column: 10/13;
}
.has-column-right > * {
  display: block;
  grid-column: 3/10;
}

/* Exemple d'utilisation :
<div class="row" style="--row-gap: 16px;">
    <div class="col-md-6">
    <div class="col-md-6">
</div>
 */
.row {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--row-gap, 0);
  margin: 0 calc(32px * -0.5);
}
.row > * {
  flex-grow: 1;
  padding-right: calc(32px * 0.5);
  padding-left: calc(32px * 0.5);
}

.col {
  flex: 1 0 0;
}

[class*=col-] {
  flex-grow: 0;
  padding-right: calc(32px * 0.5);
  padding-left: calc(32px * 0.5);
  width: 100%;
  min-height: 1px;
}

@media (min-width: 575px) {
  .col-xs-1 {
    width: 8.3333333333%;
  }
  .col-xs-2 {
    width: 16.6666666667%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.3333333333%;
  }
  .col-xs-5 {
    width: 41.6666666667%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.3333333333%;
  }
  .col-xs-8 {
    width: 66.6666666667%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-10 {
    width: 83.3333333333%;
  }
  .col-xs-11 {
    width: 91.6666666667%;
  }
  .col-xs-12 {
    width: 100%;
  }
}
@media (min-width: 792px) {
  .col-sm-1 {
    width: 8.3333333333%;
  }
  .col-sm-2 {
    width: 16.6666666667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.3333333333%;
  }
  .col-sm-5 {
    width: 41.6666666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.3333333333%;
  }
  .col-sm-8 {
    width: 66.6666666667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.3333333333%;
  }
  .col-sm-11 {
    width: 91.6666666667%;
  }
  .col-sm-12 {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .col-md-1 {
    width: 8.3333333333%;
  }
  .col-md-2 {
    width: 16.6666666667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.3333333333%;
  }
  .col-md-5 {
    width: 41.6666666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.3333333333%;
  }
  .col-md-8 {
    width: 66.6666666667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.3333333333%;
  }
  .col-md-11 {
    width: 91.6666666667%;
  }
  .col-md-12 {
    width: 100%;
  }
}
@media (min-width: 1280px) {
  .col-lg-1 {
    width: 8.3333333333%;
  }
  .col-lg-2 {
    width: 16.6666666667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.3333333333%;
  }
  .col-lg-5 {
    width: 41.6666666667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.3333333333%;
  }
  .col-lg-8 {
    width: 66.6666666667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.3333333333%;
  }
  .col-lg-11 {
    width: 91.6666666667%;
  }
  .col-lg-12 {
    width: 100%;
  }
}
@media (min-width: 1450px) {
  .col-lg-x-1 {
    width: 8.3333333333%;
  }
  .col-lg-x-2 {
    width: 16.6666666667%;
  }
  .col-lg-x-3 {
    width: 25%;
  }
  .col-lg-x-4 {
    width: 33.3333333333%;
  }
  .col-lg-x-5 {
    width: 41.6666666667%;
  }
  .col-lg-x-6 {
    width: 50%;
  }
  .col-lg-x-7 {
    width: 58.3333333333%;
  }
  .col-lg-x-8 {
    width: 66.6666666667%;
  }
  .col-lg-x-9 {
    width: 75%;
  }
  .col-lg-x-10 {
    width: 83.3333333333%;
  }
  .col-lg-x-11 {
    width: 91.6666666667%;
  }
  .col-lg-x-12 {
    width: 100%;
  }
}
@media (min-width: 1600px) {
  .col-xl-1 {
    width: 8.3333333333%;
  }
  .col-xl-2 {
    width: 16.6666666667%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-4 {
    width: 33.3333333333%;
  }
  .col-xl-5 {
    width: 41.6666666667%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-7 {
    width: 58.3333333333%;
  }
  .col-xl-8 {
    width: 66.6666666667%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .col-xl-10 {
    width: 83.3333333333%;
  }
  .col-xl-11 {
    width: 91.6666666667%;
  }
  .col-xl-12 {
    width: 100%;
  }
}
.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--spacer-4));
}

.l-side {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .l-side\@md {
    flex-direction: column;
    align-items: flex-start;
  }
}

.l-side-force {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .l-side-force\@md {
    flex-direction: column;
    align-items: flex-start;
  }
}

.o-icon {
  display: block;
}
.o-icon::before {
  display: block;
  text-transform: none;
  line-height: 1;
  color: currentColor;
  font-family: var(--font-family-icons);
  font-weight: normal;
  font-style: normal;
}
.o-icon--arrow::before {
  content: "\e800";
}
.o-icon--arrow-circle::before {
  content: "\e801";
}
.o-icon--burger::before {
  content: "\e802";
}
.o-icon--close::before {
  content: "\e803";
}
.o-icon--document::before {
  content: "\e804";
}
.o-icon--edit::before {
  content: "\e805";
}
.o-icon--email::before {
  content: "\e806";
}
.o-icon--hands::before {
  content: "\e807";
}
.o-icon--hg-footer::before {
  content: "\e808";
}
.o-icon--home::before {
  content: "\e809";
}
.o-icon--phone::before {
  content: "\e80a";
}
.o-icon--pin::before {
  content: "\e80b";
}
.o-icon--play::before {
  content: "\e80c";
}
.o-icon--plus-circle::before {
  content: "\e80d";
}
.o-icon--print::before {
  content: "\e80e";
}
.o-icon--quote::before {
  content: "\e80f";
}
.o-icon--search::before {
  content: "\e810";
}
.o-icon--separate::before {
  content: "\e811";
}
.o-icon--share::before {
  content: "\e812";
}
.o-icon--triangle::before {
  content: "\e813";
}
.o-icon--download::before {
  content: "\e814";
}
.o-icon--export::before {
  content: "\e815";
}
.o-icon--link::before {
  content: "\e816";
}
.o-icon--calendar::before {
  content: "\e817";
}
.o-icon--header-export::before {
  content: "\e818";
}
.o-icon--eye::before {
  content: "\e819";
}
.o-icon--mirror::before {
  transform: scaleX(-1);
}
.o-icon--mirror-y::before {
  transform: scaleY(-1);
}
.o-icon--medium {
  font-size: 1.3em;
}
.o-icon--big {
  font-size: 1.6em;
}
.o-icon--color-primary {
  transition: color 200ms ease-in-out;
  color: var(--color-primary-dark);
}
.o-icon--color-secondary {
  transition: color 200ms ease-in-out;
  color: var(--color-secondary-dark);
}

/* Utilisation dans le HTML :
    <div class="has-icon">
        <i class="o-icon o-icon--facebook" aria-hidden="true"></i>
        Mon texte
    </div>
 */
.has-icon {
  display: inline-flex;
  gap: var(--spacer-4);
  align-items: center;
}
.has-icon .o-icon {
  position: relative;
  z-index: 1;
}

.o-tags {
  display: inline-flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--spacer-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.o-tags__item {
  border-radius: var(--radius-lg);
  background: var(--color-gray-2);
  padding-block: 4px;
  padding-inline: 8px;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.045rem;
  color: var(--color-light);
  font-size: 1.2rem;
  font-weight: 700;
}
.o-tags__item--outline {
  border: 1px solid var(--color-primary-dark);
  background: var(--color-light);
  color: var(--color-default);
}
.o-tags__item--big {
  padding: 8px 12px;
}
.o-tags .is-link {
  position: relative;
  transition: background-color 0.2s ease-in-out;
  z-index: 3;
  text-decoration: none;
}
.o-tags .is-link:hover, .o-tags .is-link:focus {
  background-color: var(--color-primary-dark) !important;
  text-decoration: none;
}

.u-flex {
  display: flex;
}
@media (min-width: 1024px) {
  .u-flex\@md {
    display: flex;
  }
}
@media (max-width: 1023px) {
  .u-flex\@md- {
    display: flex;
  }
}

.u-flex-column {
  flex-direction: column;
}
@media (min-width: 1024px) {
  .u-flex-column\@md {
    flex-direction: column;
  }
}
@media (max-width: 1023px) {
  .u-flex-column\@md- {
    flex-direction: column;
  }
}

.u-flex-column-reverse {
  flex-direction: column-reverse;
}
@media (min-width: 1024px) {
  .u-flex-column-reverse\@md {
    flex-direction: column-reverse;
  }
}
@media (max-width: 1023px) {
  .u-flex-column-reverse\@md- {
    flex-direction: column-reverse;
  }
}

.u-flex-row {
  flex-direction: row;
}
@media (min-width: 1024px) {
  .u-flex-row\@md {
    flex-direction: row;
  }
}
@media (max-width: 1023px) {
  .u-flex-row\@md- {
    flex-direction: row;
  }
}

.u-flex-row-reverse {
  flex-direction: row-reverse;
}
@media (min-width: 1024px) {
  .u-flex-row-reverse\@md {
    flex-direction: row-reverse;
  }
}
@media (max-width: 1023px) {
  .u-flex-row-reverse\@md- {
    flex-direction: row-reverse;
  }
}

.u-justify-center {
  justify-content: center;
}
@media (min-width: 1024px) {
  .u-justify-center\@md {
    justify-content: center;
  }
}
@media (max-width: 1023px) {
  .u-justify-center\@md- {
    justify-content: center;
  }
}

.u-justify-end {
  justify-content: flex-end;
}
@media (min-width: 1024px) {
  .u-justify-end\@md {
    justify-content: flex-end;
  }
}
@media (max-width: 1023px) {
  .u-justify-end\@md- {
    justify-content: flex-end;
  }
}

.u-align-center {
  align-items: center;
}
@media (min-width: 1024px) {
  .u-align-center\@md {
    align-items: center;
  }
}
@media (max-width: 1023px) {
  .u-align-center\@md- {
    align-items: center;
  }
}

.u-align-end {
  align-items: flex-end;
}
@media (min-width: 1024px) {
  .u-align-end\@md {
    align-items: flex-end;
  }
}
@media (max-width: 1023px) {
  .u-align-end\@md- {
    align-items: flex-end;
  }
}

.u-space-between {
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .u-space-between\@md {
    justify-content: space-between;
  }
}
@media (max-width: 1023px) {
  .u-space-between\@md- {
    justify-content: space-between;
  }
}

.u-hidden {
  display: none;
}
@media (min-width: 575px) {
  .u-hidden\@xs {
    display: none;
  }
}
@media (min-width: 792px) {
  .u-hidden\@sm {
    display: none;
  }
}
@media (min-width: 1024px) {
  .u-hidden\@md {
    display: none;
  }
}
@media (min-width: 1280px) {
  .u-hidden\@lg {
    display: none;
  }
}

@media (max-width: 574px) {
  .u-visible\@xs {
    display: none;
  }
}
@media (max-width: 791px) {
  .u-visible\@sm {
    display: none;
  }
}
@media (max-width: 1023px) {
  .u-visible\@md {
    display: none;
  }
}
@media (max-width: 1279px) {
  .u-visible\@lg {
    display: none;
  }
}

.u-hidden-important {
  display: none !important;
}
@media (min-width: 575px) {
  .u-hidden-important\@xs {
    display: none !important;
  }
}
@media (min-width: 792px) {
  .u-hidden-important\@sm {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .u-hidden-important\@md {
    display: none !important;
  }
}
@media (min-width: 1280px) {
  .u-hidden-important\@lg {
    display: none !important;
  }
}

.u-visuallyhidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
@media (max-width: 574px) {
  .u-visuallyhidden\@xs:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}
@media (max-width: 791px) {
  .u-visuallyhidden\@sm:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}
@media (max-width: 1023px) {
  .u-visuallyhidden\@md:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}
@media (max-width: 1279px) {
  .u-visuallyhidden\@lg:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

/*
 *  Marges automatiques
 */
.u-m-auto {
  margin: auto;
}

.u-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.u-my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.u-mb-auto {
  margin-bottom: auto;
}

.u-mt-auto {
  margin-top: auto;
}

.u-ml-auto {
  margin-left: auto;
}

.u-mr-auto {
  margin-right: auto;
}

/*
 * Génération des classes utilitaires d'espacements
 * Tous les niveaux de 0 à 14 sont généré pour tous les types de marges interne et externe (margin & padding - top/right/bottom/left)
 * Exemples de classes générés:
 * .u-m-0 { margin: 0; }
 * .u-mb-4 { margin-bottom: $spacer-4; // 16px }
 * .u-ml-8 { margin-left: $spacer-8; // 64px }
 * .u-pr-8 { padding-right: $spacer-8; // 64px }
 * .u-pb-14 { padding-bottom: $spacer-14; // 144px }
 */
.u-m-0 {
  margin: calc(var(--spacer) * 0);
}

.u-m-1 {
  margin: calc(var(--spacer) * 0.5);
}

.u-m-2 {
  margin: calc(var(--spacer));
}

.u-m-3 {
  margin: calc(var(--spacer) * 1.5);
}

.u-m-4 {
  margin: calc(var(--spacer) * 2);
}

.u-m-5 {
  margin: calc(var(--spacer) * 3);
}

.u-m-6 {
  margin: calc(var(--spacer) * 4);
}

.u-m-7 {
  margin: calc(var(--spacer) * 5);
}

.u-m-8 {
  margin: calc(var(--spacer) * 6);
}

.u-m-9 {
  margin: calc(var(--spacer) * 8);
}

.u-m-10 {
  margin: calc(var(--spacer) * 10);
}

.u-m-11 {
  margin: calc(var(--spacer) * 12);
}

.u-m-12 {
  margin: calc(var(--spacer) * 14);
}

.u-m-13 {
  margin: calc(var(--spacer) * 16);
}

.u-m-14 {
  margin: calc(var(--spacer) * 18);
}

.u-mt-0 {
  margin-block-start: calc(var(--spacer) * 0);
}

.u-mt-1 {
  margin-block-start: calc(var(--spacer) * 0.5);
}

.u-mt-2 {
  margin-block-start: calc(var(--spacer));
}

.u-mt-3 {
  margin-block-start: calc(var(--spacer) * 1.5);
}

.u-mt-4 {
  margin-block-start: calc(var(--spacer) * 2);
}

.u-mt-5 {
  margin-block-start: calc(var(--spacer) * 3);
}

.u-mt-6 {
  margin-block-start: calc(var(--spacer) * 4);
}

.u-mt-7 {
  margin-block-start: calc(var(--spacer) * 5);
}

.u-mt-8 {
  margin-block-start: calc(var(--spacer) * 6);
}

.u-mt-9 {
  margin-block-start: calc(var(--spacer) * 8);
}

.u-mt-10 {
  margin-block-start: calc(var(--spacer) * 10);
}

.u-mt-11 {
  margin-block-start: calc(var(--spacer) * 12);
}

.u-mt-12 {
  margin-block-start: calc(var(--spacer) * 14);
}

.u-mt-13 {
  margin-block-start: calc(var(--spacer) * 16);
}

.u-mt-14 {
  margin-block-start: calc(var(--spacer) * 18);
}

.u-ml-0 {
  margin-inline-start: calc(var(--spacer) * 0);
}

.u-ml-1 {
  margin-inline-start: calc(var(--spacer) * 0.5);
}

.u-ml-2 {
  margin-inline-start: calc(var(--spacer));
}

.u-ml-3 {
  margin-inline-start: calc(var(--spacer) * 1.5);
}

.u-ml-4 {
  margin-inline-start: calc(var(--spacer) * 2);
}

.u-ml-5 {
  margin-inline-start: calc(var(--spacer) * 3);
}

.u-ml-6 {
  margin-inline-start: calc(var(--spacer) * 4);
}

.u-ml-7 {
  margin-inline-start: calc(var(--spacer) * 5);
}

.u-ml-8 {
  margin-inline-start: calc(var(--spacer) * 6);
}

.u-ml-9 {
  margin-inline-start: calc(var(--spacer) * 8);
}

.u-ml-10 {
  margin-inline-start: calc(var(--spacer) * 10);
}

.u-ml-11 {
  margin-inline-start: calc(var(--spacer) * 12);
}

.u-ml-12 {
  margin-inline-start: calc(var(--spacer) * 14);
}

.u-ml-13 {
  margin-inline-start: calc(var(--spacer) * 16);
}

.u-ml-14 {
  margin-inline-start: calc(var(--spacer) * 18);
}

.u-mr-0 {
  margin-inline-end: calc(var(--spacer) * 0);
}

.u-mr-1 {
  margin-inline-end: calc(var(--spacer) * 0.5);
}

.u-mr-2 {
  margin-inline-end: calc(var(--spacer));
}

.u-mr-3 {
  margin-inline-end: calc(var(--spacer) * 1.5);
}

.u-mr-4 {
  margin-inline-end: calc(var(--spacer) * 2);
}

.u-mr-5 {
  margin-inline-end: calc(var(--spacer) * 3);
}

.u-mr-6 {
  margin-inline-end: calc(var(--spacer) * 4);
}

.u-mr-7 {
  margin-inline-end: calc(var(--spacer) * 5);
}

.u-mr-8 {
  margin-inline-end: calc(var(--spacer) * 6);
}

.u-mr-9 {
  margin-inline-end: calc(var(--spacer) * 8);
}

.u-mr-10 {
  margin-inline-end: calc(var(--spacer) * 10);
}

.u-mr-11 {
  margin-inline-end: calc(var(--spacer) * 12);
}

.u-mr-12 {
  margin-inline-end: calc(var(--spacer) * 14);
}

.u-mr-13 {
  margin-inline-end: calc(var(--spacer) * 16);
}

.u-mr-14 {
  margin-inline-end: calc(var(--spacer) * 18);
}

.u-mb-0 {
  margin-block-end: calc(var(--spacer) * 0);
}

.u-mb-1 {
  margin-block-end: calc(var(--spacer) * 0.5);
}

.u-mb-2 {
  margin-block-end: calc(var(--spacer));
}

.u-mb-3 {
  margin-block-end: calc(var(--spacer) * 1.5);
}

.u-mb-4 {
  margin-block-end: calc(var(--spacer) * 2);
}

.u-mb-5 {
  margin-block-end: calc(var(--spacer) * 3);
}

.u-mb-6 {
  margin-block-end: calc(var(--spacer) * 4);
}

.u-mb-7 {
  margin-block-end: calc(var(--spacer) * 5);
}

.u-mb-8 {
  margin-block-end: calc(var(--spacer) * 6);
}

.u-mb-9 {
  margin-block-end: calc(var(--spacer) * 8);
}

.u-mb-10 {
  margin-block-end: calc(var(--spacer) * 10);
}

.u-mb-11 {
  margin-block-end: calc(var(--spacer) * 12);
}

.u-mb-12 {
  margin-block-end: calc(var(--spacer) * 14);
}

.u-mb-13 {
  margin-block-end: calc(var(--spacer) * 16);
}

.u-mb-14 {
  margin-block-end: calc(var(--spacer) * 18);
}

.u-mx-0 {
  margin-inline: calc(var(--spacer) * 0);
}

.u-mx-1 {
  margin-inline: calc(var(--spacer) * 0.5);
}

.u-mx-2 {
  margin-inline: calc(var(--spacer));
}

.u-mx-3 {
  margin-inline: calc(var(--spacer) * 1.5);
}

.u-mx-4 {
  margin-inline: calc(var(--spacer) * 2);
}

.u-mx-5 {
  margin-inline: calc(var(--spacer) * 3);
}

.u-mx-6 {
  margin-inline: calc(var(--spacer) * 4);
}

.u-mx-7 {
  margin-inline: calc(var(--spacer) * 5);
}

.u-mx-8 {
  margin-inline: calc(var(--spacer) * 6);
}

.u-mx-9 {
  margin-inline: calc(var(--spacer) * 8);
}

.u-mx-10 {
  margin-inline: calc(var(--spacer) * 10);
}

.u-mx-11 {
  margin-inline: calc(var(--spacer) * 12);
}

.u-mx-12 {
  margin-inline: calc(var(--spacer) * 14);
}

.u-mx-13 {
  margin-inline: calc(var(--spacer) * 16);
}

.u-mx-14 {
  margin-inline: calc(var(--spacer) * 18);
}

.u-my-0 {
  margin-block: calc(var(--spacer) * 0);
}

.u-my-1 {
  margin-block: calc(var(--spacer) * 0.5);
}

.u-my-2 {
  margin-block: calc(var(--spacer));
}

.u-my-3 {
  margin-block: calc(var(--spacer) * 1.5);
}

.u-my-4 {
  margin-block: calc(var(--spacer) * 2);
}

.u-my-5 {
  margin-block: calc(var(--spacer) * 3);
}

.u-my-6 {
  margin-block: calc(var(--spacer) * 4);
}

.u-my-7 {
  margin-block: calc(var(--spacer) * 5);
}

.u-my-8 {
  margin-block: calc(var(--spacer) * 6);
}

.u-my-9 {
  margin-block: calc(var(--spacer) * 8);
}

.u-my-10 {
  margin-block: calc(var(--spacer) * 10);
}

.u-my-11 {
  margin-block: calc(var(--spacer) * 12);
}

.u-my-12 {
  margin-block: calc(var(--spacer) * 14);
}

.u-my-13 {
  margin-block: calc(var(--spacer) * 16);
}

.u-my-14 {
  margin-block: calc(var(--spacer) * 18);
}

.u-p-0 {
  padding: calc(var(--spacer) * 0);
}

.u-p-1 {
  padding: calc(var(--spacer) * 0.5);
}

.u-p-2 {
  padding: calc(var(--spacer));
}

.u-p-3 {
  padding: calc(var(--spacer) * 1.5);
}

.u-p-4 {
  padding: calc(var(--spacer) * 2);
}

.u-p-5 {
  padding: calc(var(--spacer) * 3);
}

.u-p-6 {
  padding: calc(var(--spacer) * 4);
}

.u-p-7 {
  padding: calc(var(--spacer) * 5);
}

.u-p-8 {
  padding: calc(var(--spacer) * 6);
}

.u-p-9 {
  padding: calc(var(--spacer) * 8);
}

.u-p-10 {
  padding: calc(var(--spacer) * 10);
}

.u-p-11 {
  padding: calc(var(--spacer) * 12);
}

.u-p-12 {
  padding: calc(var(--spacer) * 14);
}

.u-p-13 {
  padding: calc(var(--spacer) * 16);
}

.u-p-14 {
  padding: calc(var(--spacer) * 18);
}

.u-pt-0 {
  padding-block-start: calc(var(--spacer) * 0);
}

.u-pt-1 {
  padding-block-start: calc(var(--spacer) * 0.5);
}

.u-pt-2 {
  padding-block-start: calc(var(--spacer));
}

.u-pt-3 {
  padding-block-start: calc(var(--spacer) * 1.5);
}

.u-pt-4 {
  padding-block-start: calc(var(--spacer) * 2);
}

.u-pt-5 {
  padding-block-start: calc(var(--spacer) * 3);
}

.u-pt-6 {
  padding-block-start: calc(var(--spacer) * 4);
}

.u-pt-7 {
  padding-block-start: calc(var(--spacer) * 5);
}

.u-pt-8 {
  padding-block-start: calc(var(--spacer) * 6);
}

.u-pt-9 {
  padding-block-start: calc(var(--spacer) * 8);
}

.u-pt-10 {
  padding-block-start: calc(var(--spacer) * 10);
}

.u-pt-11 {
  padding-block-start: calc(var(--spacer) * 12);
}

.u-pt-12 {
  padding-block-start: calc(var(--spacer) * 14);
}

.u-pt-13 {
  padding-block-start: calc(var(--spacer) * 16);
}

.u-pt-14 {
  padding-block-start: calc(var(--spacer) * 18);
}

.u-pl-0 {
  padding-inline-start: calc(var(--spacer) * 0);
}

.u-pl-1 {
  padding-inline-start: calc(var(--spacer) * 0.5);
}

.u-pl-2 {
  padding-inline-start: calc(var(--spacer));
}

.u-pl-3 {
  padding-inline-start: calc(var(--spacer) * 1.5);
}

.u-pl-4 {
  padding-inline-start: calc(var(--spacer) * 2);
}

.u-pl-5 {
  padding-inline-start: calc(var(--spacer) * 3);
}

.u-pl-6 {
  padding-inline-start: calc(var(--spacer) * 4);
}

.u-pl-7 {
  padding-inline-start: calc(var(--spacer) * 5);
}

.u-pl-8 {
  padding-inline-start: calc(var(--spacer) * 6);
}

.u-pl-9 {
  padding-inline-start: calc(var(--spacer) * 8);
}

.u-pl-10 {
  padding-inline-start: calc(var(--spacer) * 10);
}

.u-pl-11 {
  padding-inline-start: calc(var(--spacer) * 12);
}

.u-pl-12 {
  padding-inline-start: calc(var(--spacer) * 14);
}

.u-pl-13 {
  padding-inline-start: calc(var(--spacer) * 16);
}

.u-pl-14 {
  padding-inline-start: calc(var(--spacer) * 18);
}

.u-pr-0 {
  padding-inline-end: calc(var(--spacer) * 0);
}

.u-pr-1 {
  padding-inline-end: calc(var(--spacer) * 0.5);
}

.u-pr-2 {
  padding-inline-end: calc(var(--spacer));
}

.u-pr-3 {
  padding-inline-end: calc(var(--spacer) * 1.5);
}

.u-pr-4 {
  padding-inline-end: calc(var(--spacer) * 2);
}

.u-pr-5 {
  padding-inline-end: calc(var(--spacer) * 3);
}

.u-pr-6 {
  padding-inline-end: calc(var(--spacer) * 4);
}

.u-pr-7 {
  padding-inline-end: calc(var(--spacer) * 5);
}

.u-pr-8 {
  padding-inline-end: calc(var(--spacer) * 6);
}

.u-pr-9 {
  padding-inline-end: calc(var(--spacer) * 8);
}

.u-pr-10 {
  padding-inline-end: calc(var(--spacer) * 10);
}

.u-pr-11 {
  padding-inline-end: calc(var(--spacer) * 12);
}

.u-pr-12 {
  padding-inline-end: calc(var(--spacer) * 14);
}

.u-pr-13 {
  padding-inline-end: calc(var(--spacer) * 16);
}

.u-pr-14 {
  padding-inline-end: calc(var(--spacer) * 18);
}

.u-pb-0 {
  padding-block-end: calc(var(--spacer) * 0);
}

.u-pb-1 {
  padding-block-end: calc(var(--spacer) * 0.5);
}

.u-pb-2 {
  padding-block-end: calc(var(--spacer));
}

.u-pb-3 {
  padding-block-end: calc(var(--spacer) * 1.5);
}

.u-pb-4 {
  padding-block-end: calc(var(--spacer) * 2);
}

.u-pb-5 {
  padding-block-end: calc(var(--spacer) * 3);
}

.u-pb-6 {
  padding-block-end: calc(var(--spacer) * 4);
}

.u-pb-7 {
  padding-block-end: calc(var(--spacer) * 5);
}

.u-pb-8 {
  padding-block-end: calc(var(--spacer) * 6);
}

.u-pb-9 {
  padding-block-end: calc(var(--spacer) * 8);
}

.u-pb-10 {
  padding-block-end: calc(var(--spacer) * 10);
}

.u-pb-11 {
  padding-block-end: calc(var(--spacer) * 12);
}

.u-pb-12 {
  padding-block-end: calc(var(--spacer) * 14);
}

.u-pb-13 {
  padding-block-end: calc(var(--spacer) * 16);
}

.u-pb-14 {
  padding-block-end: calc(var(--spacer) * 18);
}

.u-px-0 {
  padding-inline: calc(var(--spacer) * 0);
}

.u-px-1 {
  padding-inline: calc(var(--spacer) * 0.5);
}

.u-px-2 {
  padding-inline: calc(var(--spacer));
}

.u-px-3 {
  padding-inline: calc(var(--spacer) * 1.5);
}

.u-px-4 {
  padding-inline: calc(var(--spacer) * 2);
}

.u-px-5 {
  padding-inline: calc(var(--spacer) * 3);
}

.u-px-6 {
  padding-inline: calc(var(--spacer) * 4);
}

.u-px-7 {
  padding-inline: calc(var(--spacer) * 5);
}

.u-px-8 {
  padding-inline: calc(var(--spacer) * 6);
}

.u-px-9 {
  padding-inline: calc(var(--spacer) * 8);
}

.u-px-10 {
  padding-inline: calc(var(--spacer) * 10);
}

.u-px-11 {
  padding-inline: calc(var(--spacer) * 12);
}

.u-px-12 {
  padding-inline: calc(var(--spacer) * 14);
}

.u-px-13 {
  padding-inline: calc(var(--spacer) * 16);
}

.u-px-14 {
  padding-inline: calc(var(--spacer) * 18);
}

.u-py-0 {
  padding-block: calc(var(--spacer) * 0);
}

.u-py-1 {
  padding-block: calc(var(--spacer) * 0.5);
}

.u-py-2 {
  padding-block: calc(var(--spacer));
}

.u-py-3 {
  padding-block: calc(var(--spacer) * 1.5);
}

.u-py-4 {
  padding-block: calc(var(--spacer) * 2);
}

.u-py-5 {
  padding-block: calc(var(--spacer) * 3);
}

.u-py-6 {
  padding-block: calc(var(--spacer) * 4);
}

.u-py-7 {
  padding-block: calc(var(--spacer) * 5);
}

.u-py-8 {
  padding-block: calc(var(--spacer) * 6);
}

.u-py-9 {
  padding-block: calc(var(--spacer) * 8);
}

.u-py-10 {
  padding-block: calc(var(--spacer) * 10);
}

.u-py-11 {
  padding-block: calc(var(--spacer) * 12);
}

.u-py-12 {
  padding-block: calc(var(--spacer) * 14);
}

.u-py-13 {
  padding-block: calc(var(--spacer) * 16);
}

.u-py-14 {
  padding-block: calc(var(--spacer) * 18);
}

/*
 * Classes utilitaires d'espacement responsive
 * Tous les styles responsive sont appliqué au point de rupture spécifié et au-dessus
 * Exemples de classes générés:
 * @media (min-width: 1024px) {
 *      .u-m-md-0 { margin: 0; }
 *  }
 * @media (min-width: 792px) {
 *      .u-pb-sm-12 { padding-bottom: 112px; }
 *  }
 */
@media (min-width: 575px) {
  .u-m-xs-0 {
    margin: calc(var(--spacer) * 0);
  }
  .u-m-xs-1 {
    margin: calc(var(--spacer) * 0.5);
  }
  .u-m-xs-2 {
    margin: calc(var(--spacer));
  }
  .u-m-xs-3 {
    margin: calc(var(--spacer) * 1.5);
  }
  .u-m-xs-4 {
    margin: calc(var(--spacer) * 2);
  }
  .u-m-xs-5 {
    margin: calc(var(--spacer) * 3);
  }
  .u-m-xs-6 {
    margin: calc(var(--spacer) * 4);
  }
  .u-m-xs-7 {
    margin: calc(var(--spacer) * 5);
  }
  .u-m-xs-8 {
    margin: calc(var(--spacer) * 6);
  }
  .u-m-xs-9 {
    margin: calc(var(--spacer) * 8);
  }
  .u-m-xs-10 {
    margin: calc(var(--spacer) * 10);
  }
  .u-m-xs-11 {
    margin: calc(var(--spacer) * 12);
  }
  .u-m-xs-12 {
    margin: calc(var(--spacer) * 14);
  }
  .u-m-xs-13 {
    margin: calc(var(--spacer) * 16);
  }
  .u-m-xs-14 {
    margin: calc(var(--spacer) * 18);
  }
  .u-mt-xs-0 {
    margin-block-start: calc(var(--spacer) * 0);
  }
  .u-mt-xs-1 {
    margin-block-start: calc(var(--spacer) * 0.5);
  }
  .u-mt-xs-2 {
    margin-block-start: calc(var(--spacer));
  }
  .u-mt-xs-3 {
    margin-block-start: calc(var(--spacer) * 1.5);
  }
  .u-mt-xs-4 {
    margin-block-start: calc(var(--spacer) * 2);
  }
  .u-mt-xs-5 {
    margin-block-start: calc(var(--spacer) * 3);
  }
  .u-mt-xs-6 {
    margin-block-start: calc(var(--spacer) * 4);
  }
  .u-mt-xs-7 {
    margin-block-start: calc(var(--spacer) * 5);
  }
  .u-mt-xs-8 {
    margin-block-start: calc(var(--spacer) * 6);
  }
  .u-mt-xs-9 {
    margin-block-start: calc(var(--spacer) * 8);
  }
  .u-mt-xs-10 {
    margin-block-start: calc(var(--spacer) * 10);
  }
  .u-mt-xs-11 {
    margin-block-start: calc(var(--spacer) * 12);
  }
  .u-mt-xs-12 {
    margin-block-start: calc(var(--spacer) * 14);
  }
  .u-mt-xs-13 {
    margin-block-start: calc(var(--spacer) * 16);
  }
  .u-mt-xs-14 {
    margin-block-start: calc(var(--spacer) * 18);
  }
  .u-ml-xs-0 {
    margin-inline-start: calc(var(--spacer) * 0);
  }
  .u-ml-xs-1 {
    margin-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-ml-xs-2 {
    margin-inline-start: calc(var(--spacer));
  }
  .u-ml-xs-3 {
    margin-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-ml-xs-4 {
    margin-inline-start: calc(var(--spacer) * 2);
  }
  .u-ml-xs-5 {
    margin-inline-start: calc(var(--spacer) * 3);
  }
  .u-ml-xs-6 {
    margin-inline-start: calc(var(--spacer) * 4);
  }
  .u-ml-xs-7 {
    margin-inline-start: calc(var(--spacer) * 5);
  }
  .u-ml-xs-8 {
    margin-inline-start: calc(var(--spacer) * 6);
  }
  .u-ml-xs-9 {
    margin-inline-start: calc(var(--spacer) * 8);
  }
  .u-ml-xs-10 {
    margin-inline-start: calc(var(--spacer) * 10);
  }
  .u-ml-xs-11 {
    margin-inline-start: calc(var(--spacer) * 12);
  }
  .u-ml-xs-12 {
    margin-inline-start: calc(var(--spacer) * 14);
  }
  .u-ml-xs-13 {
    margin-inline-start: calc(var(--spacer) * 16);
  }
  .u-ml-xs-14 {
    margin-inline-start: calc(var(--spacer) * 18);
  }
  .u-mr-xs-0 {
    margin-inline-end: calc(var(--spacer) * 0);
  }
  .u-mr-xs-1 {
    margin-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-mr-xs-2 {
    margin-inline-end: calc(var(--spacer));
  }
  .u-mr-xs-3 {
    margin-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-mr-xs-4 {
    margin-inline-end: calc(var(--spacer) * 2);
  }
  .u-mr-xs-5 {
    margin-inline-end: calc(var(--spacer) * 3);
  }
  .u-mr-xs-6 {
    margin-inline-end: calc(var(--spacer) * 4);
  }
  .u-mr-xs-7 {
    margin-inline-end: calc(var(--spacer) * 5);
  }
  .u-mr-xs-8 {
    margin-inline-end: calc(var(--spacer) * 6);
  }
  .u-mr-xs-9 {
    margin-inline-end: calc(var(--spacer) * 8);
  }
  .u-mr-xs-10 {
    margin-inline-end: calc(var(--spacer) * 10);
  }
  .u-mr-xs-11 {
    margin-inline-end: calc(var(--spacer) * 12);
  }
  .u-mr-xs-12 {
    margin-inline-end: calc(var(--spacer) * 14);
  }
  .u-mr-xs-13 {
    margin-inline-end: calc(var(--spacer) * 16);
  }
  .u-mr-xs-14 {
    margin-inline-end: calc(var(--spacer) * 18);
  }
  .u-mb-xs-0 {
    margin-block-end: calc(var(--spacer) * 0);
  }
  .u-mb-xs-1 {
    margin-block-end: calc(var(--spacer) * 0.5);
  }
  .u-mb-xs-2 {
    margin-block-end: calc(var(--spacer));
  }
  .u-mb-xs-3 {
    margin-block-end: calc(var(--spacer) * 1.5);
  }
  .u-mb-xs-4 {
    margin-block-end: calc(var(--spacer) * 2);
  }
  .u-mb-xs-5 {
    margin-block-end: calc(var(--spacer) * 3);
  }
  .u-mb-xs-6 {
    margin-block-end: calc(var(--spacer) * 4);
  }
  .u-mb-xs-7 {
    margin-block-end: calc(var(--spacer) * 5);
  }
  .u-mb-xs-8 {
    margin-block-end: calc(var(--spacer) * 6);
  }
  .u-mb-xs-9 {
    margin-block-end: calc(var(--spacer) * 8);
  }
  .u-mb-xs-10 {
    margin-block-end: calc(var(--spacer) * 10);
  }
  .u-mb-xs-11 {
    margin-block-end: calc(var(--spacer) * 12);
  }
  .u-mb-xs-12 {
    margin-block-end: calc(var(--spacer) * 14);
  }
  .u-mb-xs-13 {
    margin-block-end: calc(var(--spacer) * 16);
  }
  .u-mb-xs-14 {
    margin-block-end: calc(var(--spacer) * 18);
  }
  .u-mx-xs-0 {
    margin-inline: calc(var(--spacer) * 0);
  }
  .u-mx-xs-1 {
    margin-inline: calc(var(--spacer) * 0.5);
  }
  .u-mx-xs-2 {
    margin-inline: calc(var(--spacer));
  }
  .u-mx-xs-3 {
    margin-inline: calc(var(--spacer) * 1.5);
  }
  .u-mx-xs-4 {
    margin-inline: calc(var(--spacer) * 2);
  }
  .u-mx-xs-5 {
    margin-inline: calc(var(--spacer) * 3);
  }
  .u-mx-xs-6 {
    margin-inline: calc(var(--spacer) * 4);
  }
  .u-mx-xs-7 {
    margin-inline: calc(var(--spacer) * 5);
  }
  .u-mx-xs-8 {
    margin-inline: calc(var(--spacer) * 6);
  }
  .u-mx-xs-9 {
    margin-inline: calc(var(--spacer) * 8);
  }
  .u-mx-xs-10 {
    margin-inline: calc(var(--spacer) * 10);
  }
  .u-mx-xs-11 {
    margin-inline: calc(var(--spacer) * 12);
  }
  .u-mx-xs-12 {
    margin-inline: calc(var(--spacer) * 14);
  }
  .u-mx-xs-13 {
    margin-inline: calc(var(--spacer) * 16);
  }
  .u-mx-xs-14 {
    margin-inline: calc(var(--spacer) * 18);
  }
  .u-my-xs-0 {
    margin-block: calc(var(--spacer) * 0);
  }
  .u-my-xs-1 {
    margin-block: calc(var(--spacer) * 0.5);
  }
  .u-my-xs-2 {
    margin-block: calc(var(--spacer));
  }
  .u-my-xs-3 {
    margin-block: calc(var(--spacer) * 1.5);
  }
  .u-my-xs-4 {
    margin-block: calc(var(--spacer) * 2);
  }
  .u-my-xs-5 {
    margin-block: calc(var(--spacer) * 3);
  }
  .u-my-xs-6 {
    margin-block: calc(var(--spacer) * 4);
  }
  .u-my-xs-7 {
    margin-block: calc(var(--spacer) * 5);
  }
  .u-my-xs-8 {
    margin-block: calc(var(--spacer) * 6);
  }
  .u-my-xs-9 {
    margin-block: calc(var(--spacer) * 8);
  }
  .u-my-xs-10 {
    margin-block: calc(var(--spacer) * 10);
  }
  .u-my-xs-11 {
    margin-block: calc(var(--spacer) * 12);
  }
  .u-my-xs-12 {
    margin-block: calc(var(--spacer) * 14);
  }
  .u-my-xs-13 {
    margin-block: calc(var(--spacer) * 16);
  }
  .u-my-xs-14 {
    margin-block: calc(var(--spacer) * 18);
  }
  .u-p-xs-0 {
    padding: calc(var(--spacer) * 0);
  }
  .u-p-xs-1 {
    padding: calc(var(--spacer) * 0.5);
  }
  .u-p-xs-2 {
    padding: calc(var(--spacer));
  }
  .u-p-xs-3 {
    padding: calc(var(--spacer) * 1.5);
  }
  .u-p-xs-4 {
    padding: calc(var(--spacer) * 2);
  }
  .u-p-xs-5 {
    padding: calc(var(--spacer) * 3);
  }
  .u-p-xs-6 {
    padding: calc(var(--spacer) * 4);
  }
  .u-p-xs-7 {
    padding: calc(var(--spacer) * 5);
  }
  .u-p-xs-8 {
    padding: calc(var(--spacer) * 6);
  }
  .u-p-xs-9 {
    padding: calc(var(--spacer) * 8);
  }
  .u-p-xs-10 {
    padding: calc(var(--spacer) * 10);
  }
  .u-p-xs-11 {
    padding: calc(var(--spacer) * 12);
  }
  .u-p-xs-12 {
    padding: calc(var(--spacer) * 14);
  }
  .u-p-xs-13 {
    padding: calc(var(--spacer) * 16);
  }
  .u-p-xs-14 {
    padding: calc(var(--spacer) * 18);
  }
  .u-pt-xs-0 {
    padding-block-start: calc(var(--spacer) * 0);
  }
  .u-pt-xs-1 {
    padding-block-start: calc(var(--spacer) * 0.5);
  }
  .u-pt-xs-2 {
    padding-block-start: calc(var(--spacer));
  }
  .u-pt-xs-3 {
    padding-block-start: calc(var(--spacer) * 1.5);
  }
  .u-pt-xs-4 {
    padding-block-start: calc(var(--spacer) * 2);
  }
  .u-pt-xs-5 {
    padding-block-start: calc(var(--spacer) * 3);
  }
  .u-pt-xs-6 {
    padding-block-start: calc(var(--spacer) * 4);
  }
  .u-pt-xs-7 {
    padding-block-start: calc(var(--spacer) * 5);
  }
  .u-pt-xs-8 {
    padding-block-start: calc(var(--spacer) * 6);
  }
  .u-pt-xs-9 {
    padding-block-start: calc(var(--spacer) * 8);
  }
  .u-pt-xs-10 {
    padding-block-start: calc(var(--spacer) * 10);
  }
  .u-pt-xs-11 {
    padding-block-start: calc(var(--spacer) * 12);
  }
  .u-pt-xs-12 {
    padding-block-start: calc(var(--spacer) * 14);
  }
  .u-pt-xs-13 {
    padding-block-start: calc(var(--spacer) * 16);
  }
  .u-pt-xs-14 {
    padding-block-start: calc(var(--spacer) * 18);
  }
  .u-pl-xs-0 {
    padding-inline-start: calc(var(--spacer) * 0);
  }
  .u-pl-xs-1 {
    padding-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-pl-xs-2 {
    padding-inline-start: calc(var(--spacer));
  }
  .u-pl-xs-3 {
    padding-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-pl-xs-4 {
    padding-inline-start: calc(var(--spacer) * 2);
  }
  .u-pl-xs-5 {
    padding-inline-start: calc(var(--spacer) * 3);
  }
  .u-pl-xs-6 {
    padding-inline-start: calc(var(--spacer) * 4);
  }
  .u-pl-xs-7 {
    padding-inline-start: calc(var(--spacer) * 5);
  }
  .u-pl-xs-8 {
    padding-inline-start: calc(var(--spacer) * 6);
  }
  .u-pl-xs-9 {
    padding-inline-start: calc(var(--spacer) * 8);
  }
  .u-pl-xs-10 {
    padding-inline-start: calc(var(--spacer) * 10);
  }
  .u-pl-xs-11 {
    padding-inline-start: calc(var(--spacer) * 12);
  }
  .u-pl-xs-12 {
    padding-inline-start: calc(var(--spacer) * 14);
  }
  .u-pl-xs-13 {
    padding-inline-start: calc(var(--spacer) * 16);
  }
  .u-pl-xs-14 {
    padding-inline-start: calc(var(--spacer) * 18);
  }
  .u-pr-xs-0 {
    padding-inline-end: calc(var(--spacer) * 0);
  }
  .u-pr-xs-1 {
    padding-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-pr-xs-2 {
    padding-inline-end: calc(var(--spacer));
  }
  .u-pr-xs-3 {
    padding-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-pr-xs-4 {
    padding-inline-end: calc(var(--spacer) * 2);
  }
  .u-pr-xs-5 {
    padding-inline-end: calc(var(--spacer) * 3);
  }
  .u-pr-xs-6 {
    padding-inline-end: calc(var(--spacer) * 4);
  }
  .u-pr-xs-7 {
    padding-inline-end: calc(var(--spacer) * 5);
  }
  .u-pr-xs-8 {
    padding-inline-end: calc(var(--spacer) * 6);
  }
  .u-pr-xs-9 {
    padding-inline-end: calc(var(--spacer) * 8);
  }
  .u-pr-xs-10 {
    padding-inline-end: calc(var(--spacer) * 10);
  }
  .u-pr-xs-11 {
    padding-inline-end: calc(var(--spacer) * 12);
  }
  .u-pr-xs-12 {
    padding-inline-end: calc(var(--spacer) * 14);
  }
  .u-pr-xs-13 {
    padding-inline-end: calc(var(--spacer) * 16);
  }
  .u-pr-xs-14 {
    padding-inline-end: calc(var(--spacer) * 18);
  }
  .u-pb-xs-0 {
    padding-block-end: calc(var(--spacer) * 0);
  }
  .u-pb-xs-1 {
    padding-block-end: calc(var(--spacer) * 0.5);
  }
  .u-pb-xs-2 {
    padding-block-end: calc(var(--spacer));
  }
  .u-pb-xs-3 {
    padding-block-end: calc(var(--spacer) * 1.5);
  }
  .u-pb-xs-4 {
    padding-block-end: calc(var(--spacer) * 2);
  }
  .u-pb-xs-5 {
    padding-block-end: calc(var(--spacer) * 3);
  }
  .u-pb-xs-6 {
    padding-block-end: calc(var(--spacer) * 4);
  }
  .u-pb-xs-7 {
    padding-block-end: calc(var(--spacer) * 5);
  }
  .u-pb-xs-8 {
    padding-block-end: calc(var(--spacer) * 6);
  }
  .u-pb-xs-9 {
    padding-block-end: calc(var(--spacer) * 8);
  }
  .u-pb-xs-10 {
    padding-block-end: calc(var(--spacer) * 10);
  }
  .u-pb-xs-11 {
    padding-block-end: calc(var(--spacer) * 12);
  }
  .u-pb-xs-12 {
    padding-block-end: calc(var(--spacer) * 14);
  }
  .u-pb-xs-13 {
    padding-block-end: calc(var(--spacer) * 16);
  }
  .u-pb-xs-14 {
    padding-block-end: calc(var(--spacer) * 18);
  }
  .u-px-xs-0 {
    padding-inline: calc(var(--spacer) * 0);
  }
  .u-px-xs-1 {
    padding-inline: calc(var(--spacer) * 0.5);
  }
  .u-px-xs-2 {
    padding-inline: calc(var(--spacer));
  }
  .u-px-xs-3 {
    padding-inline: calc(var(--spacer) * 1.5);
  }
  .u-px-xs-4 {
    padding-inline: calc(var(--spacer) * 2);
  }
  .u-px-xs-5 {
    padding-inline: calc(var(--spacer) * 3);
  }
  .u-px-xs-6 {
    padding-inline: calc(var(--spacer) * 4);
  }
  .u-px-xs-7 {
    padding-inline: calc(var(--spacer) * 5);
  }
  .u-px-xs-8 {
    padding-inline: calc(var(--spacer) * 6);
  }
  .u-px-xs-9 {
    padding-inline: calc(var(--spacer) * 8);
  }
  .u-px-xs-10 {
    padding-inline: calc(var(--spacer) * 10);
  }
  .u-px-xs-11 {
    padding-inline: calc(var(--spacer) * 12);
  }
  .u-px-xs-12 {
    padding-inline: calc(var(--spacer) * 14);
  }
  .u-px-xs-13 {
    padding-inline: calc(var(--spacer) * 16);
  }
  .u-px-xs-14 {
    padding-inline: calc(var(--spacer) * 18);
  }
  .u-py-xs-0 {
    padding-block: calc(var(--spacer) * 0);
  }
  .u-py-xs-1 {
    padding-block: calc(var(--spacer) * 0.5);
  }
  .u-py-xs-2 {
    padding-block: calc(var(--spacer));
  }
  .u-py-xs-3 {
    padding-block: calc(var(--spacer) * 1.5);
  }
  .u-py-xs-4 {
    padding-block: calc(var(--spacer) * 2);
  }
  .u-py-xs-5 {
    padding-block: calc(var(--spacer) * 3);
  }
  .u-py-xs-6 {
    padding-block: calc(var(--spacer) * 4);
  }
  .u-py-xs-7 {
    padding-block: calc(var(--spacer) * 5);
  }
  .u-py-xs-8 {
    padding-block: calc(var(--spacer) * 6);
  }
  .u-py-xs-9 {
    padding-block: calc(var(--spacer) * 8);
  }
  .u-py-xs-10 {
    padding-block: calc(var(--spacer) * 10);
  }
  .u-py-xs-11 {
    padding-block: calc(var(--spacer) * 12);
  }
  .u-py-xs-12 {
    padding-block: calc(var(--spacer) * 14);
  }
  .u-py-xs-13 {
    padding-block: calc(var(--spacer) * 16);
  }
  .u-py-xs-14 {
    padding-block: calc(var(--spacer) * 18);
  }
}
@media (min-width: 792px) {
  .u-m-sm-0 {
    margin: calc(var(--spacer) * 0);
  }
  .u-m-sm-1 {
    margin: calc(var(--spacer) * 0.5);
  }
  .u-m-sm-2 {
    margin: calc(var(--spacer));
  }
  .u-m-sm-3 {
    margin: calc(var(--spacer) * 1.5);
  }
  .u-m-sm-4 {
    margin: calc(var(--spacer) * 2);
  }
  .u-m-sm-5 {
    margin: calc(var(--spacer) * 3);
  }
  .u-m-sm-6 {
    margin: calc(var(--spacer) * 4);
  }
  .u-m-sm-7 {
    margin: calc(var(--spacer) * 5);
  }
  .u-m-sm-8 {
    margin: calc(var(--spacer) * 6);
  }
  .u-m-sm-9 {
    margin: calc(var(--spacer) * 8);
  }
  .u-m-sm-10 {
    margin: calc(var(--spacer) * 10);
  }
  .u-m-sm-11 {
    margin: calc(var(--spacer) * 12);
  }
  .u-m-sm-12 {
    margin: calc(var(--spacer) * 14);
  }
  .u-m-sm-13 {
    margin: calc(var(--spacer) * 16);
  }
  .u-m-sm-14 {
    margin: calc(var(--spacer) * 18);
  }
  .u-mt-sm-0 {
    margin-block-start: calc(var(--spacer) * 0);
  }
  .u-mt-sm-1 {
    margin-block-start: calc(var(--spacer) * 0.5);
  }
  .u-mt-sm-2 {
    margin-block-start: calc(var(--spacer));
  }
  .u-mt-sm-3 {
    margin-block-start: calc(var(--spacer) * 1.5);
  }
  .u-mt-sm-4 {
    margin-block-start: calc(var(--spacer) * 2);
  }
  .u-mt-sm-5 {
    margin-block-start: calc(var(--spacer) * 3);
  }
  .u-mt-sm-6 {
    margin-block-start: calc(var(--spacer) * 4);
  }
  .u-mt-sm-7 {
    margin-block-start: calc(var(--spacer) * 5);
  }
  .u-mt-sm-8 {
    margin-block-start: calc(var(--spacer) * 6);
  }
  .u-mt-sm-9 {
    margin-block-start: calc(var(--spacer) * 8);
  }
  .u-mt-sm-10 {
    margin-block-start: calc(var(--spacer) * 10);
  }
  .u-mt-sm-11 {
    margin-block-start: calc(var(--spacer) * 12);
  }
  .u-mt-sm-12 {
    margin-block-start: calc(var(--spacer) * 14);
  }
  .u-mt-sm-13 {
    margin-block-start: calc(var(--spacer) * 16);
  }
  .u-mt-sm-14 {
    margin-block-start: calc(var(--spacer) * 18);
  }
  .u-ml-sm-0 {
    margin-inline-start: calc(var(--spacer) * 0);
  }
  .u-ml-sm-1 {
    margin-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-ml-sm-2 {
    margin-inline-start: calc(var(--spacer));
  }
  .u-ml-sm-3 {
    margin-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-ml-sm-4 {
    margin-inline-start: calc(var(--spacer) * 2);
  }
  .u-ml-sm-5 {
    margin-inline-start: calc(var(--spacer) * 3);
  }
  .u-ml-sm-6 {
    margin-inline-start: calc(var(--spacer) * 4);
  }
  .u-ml-sm-7 {
    margin-inline-start: calc(var(--spacer) * 5);
  }
  .u-ml-sm-8 {
    margin-inline-start: calc(var(--spacer) * 6);
  }
  .u-ml-sm-9 {
    margin-inline-start: calc(var(--spacer) * 8);
  }
  .u-ml-sm-10 {
    margin-inline-start: calc(var(--spacer) * 10);
  }
  .u-ml-sm-11 {
    margin-inline-start: calc(var(--spacer) * 12);
  }
  .u-ml-sm-12 {
    margin-inline-start: calc(var(--spacer) * 14);
  }
  .u-ml-sm-13 {
    margin-inline-start: calc(var(--spacer) * 16);
  }
  .u-ml-sm-14 {
    margin-inline-start: calc(var(--spacer) * 18);
  }
  .u-mr-sm-0 {
    margin-inline-end: calc(var(--spacer) * 0);
  }
  .u-mr-sm-1 {
    margin-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-mr-sm-2 {
    margin-inline-end: calc(var(--spacer));
  }
  .u-mr-sm-3 {
    margin-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-mr-sm-4 {
    margin-inline-end: calc(var(--spacer) * 2);
  }
  .u-mr-sm-5 {
    margin-inline-end: calc(var(--spacer) * 3);
  }
  .u-mr-sm-6 {
    margin-inline-end: calc(var(--spacer) * 4);
  }
  .u-mr-sm-7 {
    margin-inline-end: calc(var(--spacer) * 5);
  }
  .u-mr-sm-8 {
    margin-inline-end: calc(var(--spacer) * 6);
  }
  .u-mr-sm-9 {
    margin-inline-end: calc(var(--spacer) * 8);
  }
  .u-mr-sm-10 {
    margin-inline-end: calc(var(--spacer) * 10);
  }
  .u-mr-sm-11 {
    margin-inline-end: calc(var(--spacer) * 12);
  }
  .u-mr-sm-12 {
    margin-inline-end: calc(var(--spacer) * 14);
  }
  .u-mr-sm-13 {
    margin-inline-end: calc(var(--spacer) * 16);
  }
  .u-mr-sm-14 {
    margin-inline-end: calc(var(--spacer) * 18);
  }
  .u-mb-sm-0 {
    margin-block-end: calc(var(--spacer) * 0);
  }
  .u-mb-sm-1 {
    margin-block-end: calc(var(--spacer) * 0.5);
  }
  .u-mb-sm-2 {
    margin-block-end: calc(var(--spacer));
  }
  .u-mb-sm-3 {
    margin-block-end: calc(var(--spacer) * 1.5);
  }
  .u-mb-sm-4 {
    margin-block-end: calc(var(--spacer) * 2);
  }
  .u-mb-sm-5 {
    margin-block-end: calc(var(--spacer) * 3);
  }
  .u-mb-sm-6 {
    margin-block-end: calc(var(--spacer) * 4);
  }
  .u-mb-sm-7 {
    margin-block-end: calc(var(--spacer) * 5);
  }
  .u-mb-sm-8 {
    margin-block-end: calc(var(--spacer) * 6);
  }
  .u-mb-sm-9 {
    margin-block-end: calc(var(--spacer) * 8);
  }
  .u-mb-sm-10 {
    margin-block-end: calc(var(--spacer) * 10);
  }
  .u-mb-sm-11 {
    margin-block-end: calc(var(--spacer) * 12);
  }
  .u-mb-sm-12 {
    margin-block-end: calc(var(--spacer) * 14);
  }
  .u-mb-sm-13 {
    margin-block-end: calc(var(--spacer) * 16);
  }
  .u-mb-sm-14 {
    margin-block-end: calc(var(--spacer) * 18);
  }
  .u-mx-sm-0 {
    margin-inline: calc(var(--spacer) * 0);
  }
  .u-mx-sm-1 {
    margin-inline: calc(var(--spacer) * 0.5);
  }
  .u-mx-sm-2 {
    margin-inline: calc(var(--spacer));
  }
  .u-mx-sm-3 {
    margin-inline: calc(var(--spacer) * 1.5);
  }
  .u-mx-sm-4 {
    margin-inline: calc(var(--spacer) * 2);
  }
  .u-mx-sm-5 {
    margin-inline: calc(var(--spacer) * 3);
  }
  .u-mx-sm-6 {
    margin-inline: calc(var(--spacer) * 4);
  }
  .u-mx-sm-7 {
    margin-inline: calc(var(--spacer) * 5);
  }
  .u-mx-sm-8 {
    margin-inline: calc(var(--spacer) * 6);
  }
  .u-mx-sm-9 {
    margin-inline: calc(var(--spacer) * 8);
  }
  .u-mx-sm-10 {
    margin-inline: calc(var(--spacer) * 10);
  }
  .u-mx-sm-11 {
    margin-inline: calc(var(--spacer) * 12);
  }
  .u-mx-sm-12 {
    margin-inline: calc(var(--spacer) * 14);
  }
  .u-mx-sm-13 {
    margin-inline: calc(var(--spacer) * 16);
  }
  .u-mx-sm-14 {
    margin-inline: calc(var(--spacer) * 18);
  }
  .u-my-sm-0 {
    margin-block: calc(var(--spacer) * 0);
  }
  .u-my-sm-1 {
    margin-block: calc(var(--spacer) * 0.5);
  }
  .u-my-sm-2 {
    margin-block: calc(var(--spacer));
  }
  .u-my-sm-3 {
    margin-block: calc(var(--spacer) * 1.5);
  }
  .u-my-sm-4 {
    margin-block: calc(var(--spacer) * 2);
  }
  .u-my-sm-5 {
    margin-block: calc(var(--spacer) * 3);
  }
  .u-my-sm-6 {
    margin-block: calc(var(--spacer) * 4);
  }
  .u-my-sm-7 {
    margin-block: calc(var(--spacer) * 5);
  }
  .u-my-sm-8 {
    margin-block: calc(var(--spacer) * 6);
  }
  .u-my-sm-9 {
    margin-block: calc(var(--spacer) * 8);
  }
  .u-my-sm-10 {
    margin-block: calc(var(--spacer) * 10);
  }
  .u-my-sm-11 {
    margin-block: calc(var(--spacer) * 12);
  }
  .u-my-sm-12 {
    margin-block: calc(var(--spacer) * 14);
  }
  .u-my-sm-13 {
    margin-block: calc(var(--spacer) * 16);
  }
  .u-my-sm-14 {
    margin-block: calc(var(--spacer) * 18);
  }
  .u-p-sm-0 {
    padding: calc(var(--spacer) * 0);
  }
  .u-p-sm-1 {
    padding: calc(var(--spacer) * 0.5);
  }
  .u-p-sm-2 {
    padding: calc(var(--spacer));
  }
  .u-p-sm-3 {
    padding: calc(var(--spacer) * 1.5);
  }
  .u-p-sm-4 {
    padding: calc(var(--spacer) * 2);
  }
  .u-p-sm-5 {
    padding: calc(var(--spacer) * 3);
  }
  .u-p-sm-6 {
    padding: calc(var(--spacer) * 4);
  }
  .u-p-sm-7 {
    padding: calc(var(--spacer) * 5);
  }
  .u-p-sm-8 {
    padding: calc(var(--spacer) * 6);
  }
  .u-p-sm-9 {
    padding: calc(var(--spacer) * 8);
  }
  .u-p-sm-10 {
    padding: calc(var(--spacer) * 10);
  }
  .u-p-sm-11 {
    padding: calc(var(--spacer) * 12);
  }
  .u-p-sm-12 {
    padding: calc(var(--spacer) * 14);
  }
  .u-p-sm-13 {
    padding: calc(var(--spacer) * 16);
  }
  .u-p-sm-14 {
    padding: calc(var(--spacer) * 18);
  }
  .u-pt-sm-0 {
    padding-block-start: calc(var(--spacer) * 0);
  }
  .u-pt-sm-1 {
    padding-block-start: calc(var(--spacer) * 0.5);
  }
  .u-pt-sm-2 {
    padding-block-start: calc(var(--spacer));
  }
  .u-pt-sm-3 {
    padding-block-start: calc(var(--spacer) * 1.5);
  }
  .u-pt-sm-4 {
    padding-block-start: calc(var(--spacer) * 2);
  }
  .u-pt-sm-5 {
    padding-block-start: calc(var(--spacer) * 3);
  }
  .u-pt-sm-6 {
    padding-block-start: calc(var(--spacer) * 4);
  }
  .u-pt-sm-7 {
    padding-block-start: calc(var(--spacer) * 5);
  }
  .u-pt-sm-8 {
    padding-block-start: calc(var(--spacer) * 6);
  }
  .u-pt-sm-9 {
    padding-block-start: calc(var(--spacer) * 8);
  }
  .u-pt-sm-10 {
    padding-block-start: calc(var(--spacer) * 10);
  }
  .u-pt-sm-11 {
    padding-block-start: calc(var(--spacer) * 12);
  }
  .u-pt-sm-12 {
    padding-block-start: calc(var(--spacer) * 14);
  }
  .u-pt-sm-13 {
    padding-block-start: calc(var(--spacer) * 16);
  }
  .u-pt-sm-14 {
    padding-block-start: calc(var(--spacer) * 18);
  }
  .u-pl-sm-0 {
    padding-inline-start: calc(var(--spacer) * 0);
  }
  .u-pl-sm-1 {
    padding-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-pl-sm-2 {
    padding-inline-start: calc(var(--spacer));
  }
  .u-pl-sm-3 {
    padding-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-pl-sm-4 {
    padding-inline-start: calc(var(--spacer) * 2);
  }
  .u-pl-sm-5 {
    padding-inline-start: calc(var(--spacer) * 3);
  }
  .u-pl-sm-6 {
    padding-inline-start: calc(var(--spacer) * 4);
  }
  .u-pl-sm-7 {
    padding-inline-start: calc(var(--spacer) * 5);
  }
  .u-pl-sm-8 {
    padding-inline-start: calc(var(--spacer) * 6);
  }
  .u-pl-sm-9 {
    padding-inline-start: calc(var(--spacer) * 8);
  }
  .u-pl-sm-10 {
    padding-inline-start: calc(var(--spacer) * 10);
  }
  .u-pl-sm-11 {
    padding-inline-start: calc(var(--spacer) * 12);
  }
  .u-pl-sm-12 {
    padding-inline-start: calc(var(--spacer) * 14);
  }
  .u-pl-sm-13 {
    padding-inline-start: calc(var(--spacer) * 16);
  }
  .u-pl-sm-14 {
    padding-inline-start: calc(var(--spacer) * 18);
  }
  .u-pr-sm-0 {
    padding-inline-end: calc(var(--spacer) * 0);
  }
  .u-pr-sm-1 {
    padding-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-pr-sm-2 {
    padding-inline-end: calc(var(--spacer));
  }
  .u-pr-sm-3 {
    padding-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-pr-sm-4 {
    padding-inline-end: calc(var(--spacer) * 2);
  }
  .u-pr-sm-5 {
    padding-inline-end: calc(var(--spacer) * 3);
  }
  .u-pr-sm-6 {
    padding-inline-end: calc(var(--spacer) * 4);
  }
  .u-pr-sm-7 {
    padding-inline-end: calc(var(--spacer) * 5);
  }
  .u-pr-sm-8 {
    padding-inline-end: calc(var(--spacer) * 6);
  }
  .u-pr-sm-9 {
    padding-inline-end: calc(var(--spacer) * 8);
  }
  .u-pr-sm-10 {
    padding-inline-end: calc(var(--spacer) * 10);
  }
  .u-pr-sm-11 {
    padding-inline-end: calc(var(--spacer) * 12);
  }
  .u-pr-sm-12 {
    padding-inline-end: calc(var(--spacer) * 14);
  }
  .u-pr-sm-13 {
    padding-inline-end: calc(var(--spacer) * 16);
  }
  .u-pr-sm-14 {
    padding-inline-end: calc(var(--spacer) * 18);
  }
  .u-pb-sm-0 {
    padding-block-end: calc(var(--spacer) * 0);
  }
  .u-pb-sm-1 {
    padding-block-end: calc(var(--spacer) * 0.5);
  }
  .u-pb-sm-2 {
    padding-block-end: calc(var(--spacer));
  }
  .u-pb-sm-3 {
    padding-block-end: calc(var(--spacer) * 1.5);
  }
  .u-pb-sm-4 {
    padding-block-end: calc(var(--spacer) * 2);
  }
  .u-pb-sm-5 {
    padding-block-end: calc(var(--spacer) * 3);
  }
  .u-pb-sm-6 {
    padding-block-end: calc(var(--spacer) * 4);
  }
  .u-pb-sm-7 {
    padding-block-end: calc(var(--spacer) * 5);
  }
  .u-pb-sm-8 {
    padding-block-end: calc(var(--spacer) * 6);
  }
  .u-pb-sm-9 {
    padding-block-end: calc(var(--spacer) * 8);
  }
  .u-pb-sm-10 {
    padding-block-end: calc(var(--spacer) * 10);
  }
  .u-pb-sm-11 {
    padding-block-end: calc(var(--spacer) * 12);
  }
  .u-pb-sm-12 {
    padding-block-end: calc(var(--spacer) * 14);
  }
  .u-pb-sm-13 {
    padding-block-end: calc(var(--spacer) * 16);
  }
  .u-pb-sm-14 {
    padding-block-end: calc(var(--spacer) * 18);
  }
  .u-px-sm-0 {
    padding-inline: calc(var(--spacer) * 0);
  }
  .u-px-sm-1 {
    padding-inline: calc(var(--spacer) * 0.5);
  }
  .u-px-sm-2 {
    padding-inline: calc(var(--spacer));
  }
  .u-px-sm-3 {
    padding-inline: calc(var(--spacer) * 1.5);
  }
  .u-px-sm-4 {
    padding-inline: calc(var(--spacer) * 2);
  }
  .u-px-sm-5 {
    padding-inline: calc(var(--spacer) * 3);
  }
  .u-px-sm-6 {
    padding-inline: calc(var(--spacer) * 4);
  }
  .u-px-sm-7 {
    padding-inline: calc(var(--spacer) * 5);
  }
  .u-px-sm-8 {
    padding-inline: calc(var(--spacer) * 6);
  }
  .u-px-sm-9 {
    padding-inline: calc(var(--spacer) * 8);
  }
  .u-px-sm-10 {
    padding-inline: calc(var(--spacer) * 10);
  }
  .u-px-sm-11 {
    padding-inline: calc(var(--spacer) * 12);
  }
  .u-px-sm-12 {
    padding-inline: calc(var(--spacer) * 14);
  }
  .u-px-sm-13 {
    padding-inline: calc(var(--spacer) * 16);
  }
  .u-px-sm-14 {
    padding-inline: calc(var(--spacer) * 18);
  }
  .u-py-sm-0 {
    padding-block: calc(var(--spacer) * 0);
  }
  .u-py-sm-1 {
    padding-block: calc(var(--spacer) * 0.5);
  }
  .u-py-sm-2 {
    padding-block: calc(var(--spacer));
  }
  .u-py-sm-3 {
    padding-block: calc(var(--spacer) * 1.5);
  }
  .u-py-sm-4 {
    padding-block: calc(var(--spacer) * 2);
  }
  .u-py-sm-5 {
    padding-block: calc(var(--spacer) * 3);
  }
  .u-py-sm-6 {
    padding-block: calc(var(--spacer) * 4);
  }
  .u-py-sm-7 {
    padding-block: calc(var(--spacer) * 5);
  }
  .u-py-sm-8 {
    padding-block: calc(var(--spacer) * 6);
  }
  .u-py-sm-9 {
    padding-block: calc(var(--spacer) * 8);
  }
  .u-py-sm-10 {
    padding-block: calc(var(--spacer) * 10);
  }
  .u-py-sm-11 {
    padding-block: calc(var(--spacer) * 12);
  }
  .u-py-sm-12 {
    padding-block: calc(var(--spacer) * 14);
  }
  .u-py-sm-13 {
    padding-block: calc(var(--spacer) * 16);
  }
  .u-py-sm-14 {
    padding-block: calc(var(--spacer) * 18);
  }
}
@media (min-width: 1024px) {
  .u-m-md-0 {
    margin: calc(var(--spacer) * 0);
  }
  .u-m-md-1 {
    margin: calc(var(--spacer) * 0.5);
  }
  .u-m-md-2 {
    margin: calc(var(--spacer));
  }
  .u-m-md-3 {
    margin: calc(var(--spacer) * 1.5);
  }
  .u-m-md-4 {
    margin: calc(var(--spacer) * 2);
  }
  .u-m-md-5 {
    margin: calc(var(--spacer) * 3);
  }
  .u-m-md-6 {
    margin: calc(var(--spacer) * 4);
  }
  .u-m-md-7 {
    margin: calc(var(--spacer) * 5);
  }
  .u-m-md-8 {
    margin: calc(var(--spacer) * 6);
  }
  .u-m-md-9 {
    margin: calc(var(--spacer) * 8);
  }
  .u-m-md-10 {
    margin: calc(var(--spacer) * 10);
  }
  .u-m-md-11 {
    margin: calc(var(--spacer) * 12);
  }
  .u-m-md-12 {
    margin: calc(var(--spacer) * 14);
  }
  .u-m-md-13 {
    margin: calc(var(--spacer) * 16);
  }
  .u-m-md-14 {
    margin: calc(var(--spacer) * 18);
  }
  .u-mt-md-0 {
    margin-block-start: calc(var(--spacer) * 0);
  }
  .u-mt-md-1 {
    margin-block-start: calc(var(--spacer) * 0.5);
  }
  .u-mt-md-2 {
    margin-block-start: calc(var(--spacer));
  }
  .u-mt-md-3 {
    margin-block-start: calc(var(--spacer) * 1.5);
  }
  .u-mt-md-4 {
    margin-block-start: calc(var(--spacer) * 2);
  }
  .u-mt-md-5 {
    margin-block-start: calc(var(--spacer) * 3);
  }
  .u-mt-md-6 {
    margin-block-start: calc(var(--spacer) * 4);
  }
  .u-mt-md-7 {
    margin-block-start: calc(var(--spacer) * 5);
  }
  .u-mt-md-8 {
    margin-block-start: calc(var(--spacer) * 6);
  }
  .u-mt-md-9 {
    margin-block-start: calc(var(--spacer) * 8);
  }
  .u-mt-md-10 {
    margin-block-start: calc(var(--spacer) * 10);
  }
  .u-mt-md-11 {
    margin-block-start: calc(var(--spacer) * 12);
  }
  .u-mt-md-12 {
    margin-block-start: calc(var(--spacer) * 14);
  }
  .u-mt-md-13 {
    margin-block-start: calc(var(--spacer) * 16);
  }
  .u-mt-md-14 {
    margin-block-start: calc(var(--spacer) * 18);
  }
  .u-ml-md-0 {
    margin-inline-start: calc(var(--spacer) * 0);
  }
  .u-ml-md-1 {
    margin-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-ml-md-2 {
    margin-inline-start: calc(var(--spacer));
  }
  .u-ml-md-3 {
    margin-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-ml-md-4 {
    margin-inline-start: calc(var(--spacer) * 2);
  }
  .u-ml-md-5 {
    margin-inline-start: calc(var(--spacer) * 3);
  }
  .u-ml-md-6 {
    margin-inline-start: calc(var(--spacer) * 4);
  }
  .u-ml-md-7 {
    margin-inline-start: calc(var(--spacer) * 5);
  }
  .u-ml-md-8 {
    margin-inline-start: calc(var(--spacer) * 6);
  }
  .u-ml-md-9 {
    margin-inline-start: calc(var(--spacer) * 8);
  }
  .u-ml-md-10 {
    margin-inline-start: calc(var(--spacer) * 10);
  }
  .u-ml-md-11 {
    margin-inline-start: calc(var(--spacer) * 12);
  }
  .u-ml-md-12 {
    margin-inline-start: calc(var(--spacer) * 14);
  }
  .u-ml-md-13 {
    margin-inline-start: calc(var(--spacer) * 16);
  }
  .u-ml-md-14 {
    margin-inline-start: calc(var(--spacer) * 18);
  }
  .u-mr-md-0 {
    margin-inline-end: calc(var(--spacer) * 0);
  }
  .u-mr-md-1 {
    margin-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-mr-md-2 {
    margin-inline-end: calc(var(--spacer));
  }
  .u-mr-md-3 {
    margin-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-mr-md-4 {
    margin-inline-end: calc(var(--spacer) * 2);
  }
  .u-mr-md-5 {
    margin-inline-end: calc(var(--spacer) * 3);
  }
  .u-mr-md-6 {
    margin-inline-end: calc(var(--spacer) * 4);
  }
  .u-mr-md-7 {
    margin-inline-end: calc(var(--spacer) * 5);
  }
  .u-mr-md-8 {
    margin-inline-end: calc(var(--spacer) * 6);
  }
  .u-mr-md-9 {
    margin-inline-end: calc(var(--spacer) * 8);
  }
  .u-mr-md-10 {
    margin-inline-end: calc(var(--spacer) * 10);
  }
  .u-mr-md-11 {
    margin-inline-end: calc(var(--spacer) * 12);
  }
  .u-mr-md-12 {
    margin-inline-end: calc(var(--spacer) * 14);
  }
  .u-mr-md-13 {
    margin-inline-end: calc(var(--spacer) * 16);
  }
  .u-mr-md-14 {
    margin-inline-end: calc(var(--spacer) * 18);
  }
  .u-mb-md-0 {
    margin-block-end: calc(var(--spacer) * 0);
  }
  .u-mb-md-1 {
    margin-block-end: calc(var(--spacer) * 0.5);
  }
  .u-mb-md-2 {
    margin-block-end: calc(var(--spacer));
  }
  .u-mb-md-3 {
    margin-block-end: calc(var(--spacer) * 1.5);
  }
  .u-mb-md-4 {
    margin-block-end: calc(var(--spacer) * 2);
  }
  .u-mb-md-5 {
    margin-block-end: calc(var(--spacer) * 3);
  }
  .u-mb-md-6 {
    margin-block-end: calc(var(--spacer) * 4);
  }
  .u-mb-md-7 {
    margin-block-end: calc(var(--spacer) * 5);
  }
  .u-mb-md-8 {
    margin-block-end: calc(var(--spacer) * 6);
  }
  .u-mb-md-9 {
    margin-block-end: calc(var(--spacer) * 8);
  }
  .u-mb-md-10 {
    margin-block-end: calc(var(--spacer) * 10);
  }
  .u-mb-md-11 {
    margin-block-end: calc(var(--spacer) * 12);
  }
  .u-mb-md-12 {
    margin-block-end: calc(var(--spacer) * 14);
  }
  .u-mb-md-13 {
    margin-block-end: calc(var(--spacer) * 16);
  }
  .u-mb-md-14 {
    margin-block-end: calc(var(--spacer) * 18);
  }
  .u-mx-md-0 {
    margin-inline: calc(var(--spacer) * 0);
  }
  .u-mx-md-1 {
    margin-inline: calc(var(--spacer) * 0.5);
  }
  .u-mx-md-2 {
    margin-inline: calc(var(--spacer));
  }
  .u-mx-md-3 {
    margin-inline: calc(var(--spacer) * 1.5);
  }
  .u-mx-md-4 {
    margin-inline: calc(var(--spacer) * 2);
  }
  .u-mx-md-5 {
    margin-inline: calc(var(--spacer) * 3);
  }
  .u-mx-md-6 {
    margin-inline: calc(var(--spacer) * 4);
  }
  .u-mx-md-7 {
    margin-inline: calc(var(--spacer) * 5);
  }
  .u-mx-md-8 {
    margin-inline: calc(var(--spacer) * 6);
  }
  .u-mx-md-9 {
    margin-inline: calc(var(--spacer) * 8);
  }
  .u-mx-md-10 {
    margin-inline: calc(var(--spacer) * 10);
  }
  .u-mx-md-11 {
    margin-inline: calc(var(--spacer) * 12);
  }
  .u-mx-md-12 {
    margin-inline: calc(var(--spacer) * 14);
  }
  .u-mx-md-13 {
    margin-inline: calc(var(--spacer) * 16);
  }
  .u-mx-md-14 {
    margin-inline: calc(var(--spacer) * 18);
  }
  .u-my-md-0 {
    margin-block: calc(var(--spacer) * 0);
  }
  .u-my-md-1 {
    margin-block: calc(var(--spacer) * 0.5);
  }
  .u-my-md-2 {
    margin-block: calc(var(--spacer));
  }
  .u-my-md-3 {
    margin-block: calc(var(--spacer) * 1.5);
  }
  .u-my-md-4 {
    margin-block: calc(var(--spacer) * 2);
  }
  .u-my-md-5 {
    margin-block: calc(var(--spacer) * 3);
  }
  .u-my-md-6 {
    margin-block: calc(var(--spacer) * 4);
  }
  .u-my-md-7 {
    margin-block: calc(var(--spacer) * 5);
  }
  .u-my-md-8 {
    margin-block: calc(var(--spacer) * 6);
  }
  .u-my-md-9 {
    margin-block: calc(var(--spacer) * 8);
  }
  .u-my-md-10 {
    margin-block: calc(var(--spacer) * 10);
  }
  .u-my-md-11 {
    margin-block: calc(var(--spacer) * 12);
  }
  .u-my-md-12 {
    margin-block: calc(var(--spacer) * 14);
  }
  .u-my-md-13 {
    margin-block: calc(var(--spacer) * 16);
  }
  .u-my-md-14 {
    margin-block: calc(var(--spacer) * 18);
  }
  .u-p-md-0 {
    padding: calc(var(--spacer) * 0);
  }
  .u-p-md-1 {
    padding: calc(var(--spacer) * 0.5);
  }
  .u-p-md-2 {
    padding: calc(var(--spacer));
  }
  .u-p-md-3 {
    padding: calc(var(--spacer) * 1.5);
  }
  .u-p-md-4 {
    padding: calc(var(--spacer) * 2);
  }
  .u-p-md-5 {
    padding: calc(var(--spacer) * 3);
  }
  .u-p-md-6 {
    padding: calc(var(--spacer) * 4);
  }
  .u-p-md-7 {
    padding: calc(var(--spacer) * 5);
  }
  .u-p-md-8 {
    padding: calc(var(--spacer) * 6);
  }
  .u-p-md-9 {
    padding: calc(var(--spacer) * 8);
  }
  .u-p-md-10 {
    padding: calc(var(--spacer) * 10);
  }
  .u-p-md-11 {
    padding: calc(var(--spacer) * 12);
  }
  .u-p-md-12 {
    padding: calc(var(--spacer) * 14);
  }
  .u-p-md-13 {
    padding: calc(var(--spacer) * 16);
  }
  .u-p-md-14 {
    padding: calc(var(--spacer) * 18);
  }
  .u-pt-md-0 {
    padding-block-start: calc(var(--spacer) * 0);
  }
  .u-pt-md-1 {
    padding-block-start: calc(var(--spacer) * 0.5);
  }
  .u-pt-md-2 {
    padding-block-start: calc(var(--spacer));
  }
  .u-pt-md-3 {
    padding-block-start: calc(var(--spacer) * 1.5);
  }
  .u-pt-md-4 {
    padding-block-start: calc(var(--spacer) * 2);
  }
  .u-pt-md-5 {
    padding-block-start: calc(var(--spacer) * 3);
  }
  .u-pt-md-6 {
    padding-block-start: calc(var(--spacer) * 4);
  }
  .u-pt-md-7 {
    padding-block-start: calc(var(--spacer) * 5);
  }
  .u-pt-md-8 {
    padding-block-start: calc(var(--spacer) * 6);
  }
  .u-pt-md-9 {
    padding-block-start: calc(var(--spacer) * 8);
  }
  .u-pt-md-10 {
    padding-block-start: calc(var(--spacer) * 10);
  }
  .u-pt-md-11 {
    padding-block-start: calc(var(--spacer) * 12);
  }
  .u-pt-md-12 {
    padding-block-start: calc(var(--spacer) * 14);
  }
  .u-pt-md-13 {
    padding-block-start: calc(var(--spacer) * 16);
  }
  .u-pt-md-14 {
    padding-block-start: calc(var(--spacer) * 18);
  }
  .u-pl-md-0 {
    padding-inline-start: calc(var(--spacer) * 0);
  }
  .u-pl-md-1 {
    padding-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-pl-md-2 {
    padding-inline-start: calc(var(--spacer));
  }
  .u-pl-md-3 {
    padding-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-pl-md-4 {
    padding-inline-start: calc(var(--spacer) * 2);
  }
  .u-pl-md-5 {
    padding-inline-start: calc(var(--spacer) * 3);
  }
  .u-pl-md-6 {
    padding-inline-start: calc(var(--spacer) * 4);
  }
  .u-pl-md-7 {
    padding-inline-start: calc(var(--spacer) * 5);
  }
  .u-pl-md-8 {
    padding-inline-start: calc(var(--spacer) * 6);
  }
  .u-pl-md-9 {
    padding-inline-start: calc(var(--spacer) * 8);
  }
  .u-pl-md-10 {
    padding-inline-start: calc(var(--spacer) * 10);
  }
  .u-pl-md-11 {
    padding-inline-start: calc(var(--spacer) * 12);
  }
  .u-pl-md-12 {
    padding-inline-start: calc(var(--spacer) * 14);
  }
  .u-pl-md-13 {
    padding-inline-start: calc(var(--spacer) * 16);
  }
  .u-pl-md-14 {
    padding-inline-start: calc(var(--spacer) * 18);
  }
  .u-pr-md-0 {
    padding-inline-end: calc(var(--spacer) * 0);
  }
  .u-pr-md-1 {
    padding-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-pr-md-2 {
    padding-inline-end: calc(var(--spacer));
  }
  .u-pr-md-3 {
    padding-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-pr-md-4 {
    padding-inline-end: calc(var(--spacer) * 2);
  }
  .u-pr-md-5 {
    padding-inline-end: calc(var(--spacer) * 3);
  }
  .u-pr-md-6 {
    padding-inline-end: calc(var(--spacer) * 4);
  }
  .u-pr-md-7 {
    padding-inline-end: calc(var(--spacer) * 5);
  }
  .u-pr-md-8 {
    padding-inline-end: calc(var(--spacer) * 6);
  }
  .u-pr-md-9 {
    padding-inline-end: calc(var(--spacer) * 8);
  }
  .u-pr-md-10 {
    padding-inline-end: calc(var(--spacer) * 10);
  }
  .u-pr-md-11 {
    padding-inline-end: calc(var(--spacer) * 12);
  }
  .u-pr-md-12 {
    padding-inline-end: calc(var(--spacer) * 14);
  }
  .u-pr-md-13 {
    padding-inline-end: calc(var(--spacer) * 16);
  }
  .u-pr-md-14 {
    padding-inline-end: calc(var(--spacer) * 18);
  }
  .u-pb-md-0 {
    padding-block-end: calc(var(--spacer) * 0);
  }
  .u-pb-md-1 {
    padding-block-end: calc(var(--spacer) * 0.5);
  }
  .u-pb-md-2 {
    padding-block-end: calc(var(--spacer));
  }
  .u-pb-md-3 {
    padding-block-end: calc(var(--spacer) * 1.5);
  }
  .u-pb-md-4 {
    padding-block-end: calc(var(--spacer) * 2);
  }
  .u-pb-md-5 {
    padding-block-end: calc(var(--spacer) * 3);
  }
  .u-pb-md-6 {
    padding-block-end: calc(var(--spacer) * 4);
  }
  .u-pb-md-7 {
    padding-block-end: calc(var(--spacer) * 5);
  }
  .u-pb-md-8 {
    padding-block-end: calc(var(--spacer) * 6);
  }
  .u-pb-md-9 {
    padding-block-end: calc(var(--spacer) * 8);
  }
  .u-pb-md-10 {
    padding-block-end: calc(var(--spacer) * 10);
  }
  .u-pb-md-11 {
    padding-block-end: calc(var(--spacer) * 12);
  }
  .u-pb-md-12 {
    padding-block-end: calc(var(--spacer) * 14);
  }
  .u-pb-md-13 {
    padding-block-end: calc(var(--spacer) * 16);
  }
  .u-pb-md-14 {
    padding-block-end: calc(var(--spacer) * 18);
  }
  .u-px-md-0 {
    padding-inline: calc(var(--spacer) * 0);
  }
  .u-px-md-1 {
    padding-inline: calc(var(--spacer) * 0.5);
  }
  .u-px-md-2 {
    padding-inline: calc(var(--spacer));
  }
  .u-px-md-3 {
    padding-inline: calc(var(--spacer) * 1.5);
  }
  .u-px-md-4 {
    padding-inline: calc(var(--spacer) * 2);
  }
  .u-px-md-5 {
    padding-inline: calc(var(--spacer) * 3);
  }
  .u-px-md-6 {
    padding-inline: calc(var(--spacer) * 4);
  }
  .u-px-md-7 {
    padding-inline: calc(var(--spacer) * 5);
  }
  .u-px-md-8 {
    padding-inline: calc(var(--spacer) * 6);
  }
  .u-px-md-9 {
    padding-inline: calc(var(--spacer) * 8);
  }
  .u-px-md-10 {
    padding-inline: calc(var(--spacer) * 10);
  }
  .u-px-md-11 {
    padding-inline: calc(var(--spacer) * 12);
  }
  .u-px-md-12 {
    padding-inline: calc(var(--spacer) * 14);
  }
  .u-px-md-13 {
    padding-inline: calc(var(--spacer) * 16);
  }
  .u-px-md-14 {
    padding-inline: calc(var(--spacer) * 18);
  }
  .u-py-md-0 {
    padding-block: calc(var(--spacer) * 0);
  }
  .u-py-md-1 {
    padding-block: calc(var(--spacer) * 0.5);
  }
  .u-py-md-2 {
    padding-block: calc(var(--spacer));
  }
  .u-py-md-3 {
    padding-block: calc(var(--spacer) * 1.5);
  }
  .u-py-md-4 {
    padding-block: calc(var(--spacer) * 2);
  }
  .u-py-md-5 {
    padding-block: calc(var(--spacer) * 3);
  }
  .u-py-md-6 {
    padding-block: calc(var(--spacer) * 4);
  }
  .u-py-md-7 {
    padding-block: calc(var(--spacer) * 5);
  }
  .u-py-md-8 {
    padding-block: calc(var(--spacer) * 6);
  }
  .u-py-md-9 {
    padding-block: calc(var(--spacer) * 8);
  }
  .u-py-md-10 {
    padding-block: calc(var(--spacer) * 10);
  }
  .u-py-md-11 {
    padding-block: calc(var(--spacer) * 12);
  }
  .u-py-md-12 {
    padding-block: calc(var(--spacer) * 14);
  }
  .u-py-md-13 {
    padding-block: calc(var(--spacer) * 16);
  }
  .u-py-md-14 {
    padding-block: calc(var(--spacer) * 18);
  }
}
@media (min-width: 1280px) {
  .u-m-lg-0 {
    margin: calc(var(--spacer) * 0);
  }
  .u-m-lg-1 {
    margin: calc(var(--spacer) * 0.5);
  }
  .u-m-lg-2 {
    margin: calc(var(--spacer));
  }
  .u-m-lg-3 {
    margin: calc(var(--spacer) * 1.5);
  }
  .u-m-lg-4 {
    margin: calc(var(--spacer) * 2);
  }
  .u-m-lg-5 {
    margin: calc(var(--spacer) * 3);
  }
  .u-m-lg-6 {
    margin: calc(var(--spacer) * 4);
  }
  .u-m-lg-7 {
    margin: calc(var(--spacer) * 5);
  }
  .u-m-lg-8 {
    margin: calc(var(--spacer) * 6);
  }
  .u-m-lg-9 {
    margin: calc(var(--spacer) * 8);
  }
  .u-m-lg-10 {
    margin: calc(var(--spacer) * 10);
  }
  .u-m-lg-11 {
    margin: calc(var(--spacer) * 12);
  }
  .u-m-lg-12 {
    margin: calc(var(--spacer) * 14);
  }
  .u-m-lg-13 {
    margin: calc(var(--spacer) * 16);
  }
  .u-m-lg-14 {
    margin: calc(var(--spacer) * 18);
  }
  .u-mt-lg-0 {
    margin-block-start: calc(var(--spacer) * 0);
  }
  .u-mt-lg-1 {
    margin-block-start: calc(var(--spacer) * 0.5);
  }
  .u-mt-lg-2 {
    margin-block-start: calc(var(--spacer));
  }
  .u-mt-lg-3 {
    margin-block-start: calc(var(--spacer) * 1.5);
  }
  .u-mt-lg-4 {
    margin-block-start: calc(var(--spacer) * 2);
  }
  .u-mt-lg-5 {
    margin-block-start: calc(var(--spacer) * 3);
  }
  .u-mt-lg-6 {
    margin-block-start: calc(var(--spacer) * 4);
  }
  .u-mt-lg-7 {
    margin-block-start: calc(var(--spacer) * 5);
  }
  .u-mt-lg-8 {
    margin-block-start: calc(var(--spacer) * 6);
  }
  .u-mt-lg-9 {
    margin-block-start: calc(var(--spacer) * 8);
  }
  .u-mt-lg-10 {
    margin-block-start: calc(var(--spacer) * 10);
  }
  .u-mt-lg-11 {
    margin-block-start: calc(var(--spacer) * 12);
  }
  .u-mt-lg-12 {
    margin-block-start: calc(var(--spacer) * 14);
  }
  .u-mt-lg-13 {
    margin-block-start: calc(var(--spacer) * 16);
  }
  .u-mt-lg-14 {
    margin-block-start: calc(var(--spacer) * 18);
  }
  .u-ml-lg-0 {
    margin-inline-start: calc(var(--spacer) * 0);
  }
  .u-ml-lg-1 {
    margin-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-ml-lg-2 {
    margin-inline-start: calc(var(--spacer));
  }
  .u-ml-lg-3 {
    margin-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-ml-lg-4 {
    margin-inline-start: calc(var(--spacer) * 2);
  }
  .u-ml-lg-5 {
    margin-inline-start: calc(var(--spacer) * 3);
  }
  .u-ml-lg-6 {
    margin-inline-start: calc(var(--spacer) * 4);
  }
  .u-ml-lg-7 {
    margin-inline-start: calc(var(--spacer) * 5);
  }
  .u-ml-lg-8 {
    margin-inline-start: calc(var(--spacer) * 6);
  }
  .u-ml-lg-9 {
    margin-inline-start: calc(var(--spacer) * 8);
  }
  .u-ml-lg-10 {
    margin-inline-start: calc(var(--spacer) * 10);
  }
  .u-ml-lg-11 {
    margin-inline-start: calc(var(--spacer) * 12);
  }
  .u-ml-lg-12 {
    margin-inline-start: calc(var(--spacer) * 14);
  }
  .u-ml-lg-13 {
    margin-inline-start: calc(var(--spacer) * 16);
  }
  .u-ml-lg-14 {
    margin-inline-start: calc(var(--spacer) * 18);
  }
  .u-mr-lg-0 {
    margin-inline-end: calc(var(--spacer) * 0);
  }
  .u-mr-lg-1 {
    margin-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-mr-lg-2 {
    margin-inline-end: calc(var(--spacer));
  }
  .u-mr-lg-3 {
    margin-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-mr-lg-4 {
    margin-inline-end: calc(var(--spacer) * 2);
  }
  .u-mr-lg-5 {
    margin-inline-end: calc(var(--spacer) * 3);
  }
  .u-mr-lg-6 {
    margin-inline-end: calc(var(--spacer) * 4);
  }
  .u-mr-lg-7 {
    margin-inline-end: calc(var(--spacer) * 5);
  }
  .u-mr-lg-8 {
    margin-inline-end: calc(var(--spacer) * 6);
  }
  .u-mr-lg-9 {
    margin-inline-end: calc(var(--spacer) * 8);
  }
  .u-mr-lg-10 {
    margin-inline-end: calc(var(--spacer) * 10);
  }
  .u-mr-lg-11 {
    margin-inline-end: calc(var(--spacer) * 12);
  }
  .u-mr-lg-12 {
    margin-inline-end: calc(var(--spacer) * 14);
  }
  .u-mr-lg-13 {
    margin-inline-end: calc(var(--spacer) * 16);
  }
  .u-mr-lg-14 {
    margin-inline-end: calc(var(--spacer) * 18);
  }
  .u-mb-lg-0 {
    margin-block-end: calc(var(--spacer) * 0);
  }
  .u-mb-lg-1 {
    margin-block-end: calc(var(--spacer) * 0.5);
  }
  .u-mb-lg-2 {
    margin-block-end: calc(var(--spacer));
  }
  .u-mb-lg-3 {
    margin-block-end: calc(var(--spacer) * 1.5);
  }
  .u-mb-lg-4 {
    margin-block-end: calc(var(--spacer) * 2);
  }
  .u-mb-lg-5 {
    margin-block-end: calc(var(--spacer) * 3);
  }
  .u-mb-lg-6 {
    margin-block-end: calc(var(--spacer) * 4);
  }
  .u-mb-lg-7 {
    margin-block-end: calc(var(--spacer) * 5);
  }
  .u-mb-lg-8 {
    margin-block-end: calc(var(--spacer) * 6);
  }
  .u-mb-lg-9 {
    margin-block-end: calc(var(--spacer) * 8);
  }
  .u-mb-lg-10 {
    margin-block-end: calc(var(--spacer) * 10);
  }
  .u-mb-lg-11 {
    margin-block-end: calc(var(--spacer) * 12);
  }
  .u-mb-lg-12 {
    margin-block-end: calc(var(--spacer) * 14);
  }
  .u-mb-lg-13 {
    margin-block-end: calc(var(--spacer) * 16);
  }
  .u-mb-lg-14 {
    margin-block-end: calc(var(--spacer) * 18);
  }
  .u-mx-lg-0 {
    margin-inline: calc(var(--spacer) * 0);
  }
  .u-mx-lg-1 {
    margin-inline: calc(var(--spacer) * 0.5);
  }
  .u-mx-lg-2 {
    margin-inline: calc(var(--spacer));
  }
  .u-mx-lg-3 {
    margin-inline: calc(var(--spacer) * 1.5);
  }
  .u-mx-lg-4 {
    margin-inline: calc(var(--spacer) * 2);
  }
  .u-mx-lg-5 {
    margin-inline: calc(var(--spacer) * 3);
  }
  .u-mx-lg-6 {
    margin-inline: calc(var(--spacer) * 4);
  }
  .u-mx-lg-7 {
    margin-inline: calc(var(--spacer) * 5);
  }
  .u-mx-lg-8 {
    margin-inline: calc(var(--spacer) * 6);
  }
  .u-mx-lg-9 {
    margin-inline: calc(var(--spacer) * 8);
  }
  .u-mx-lg-10 {
    margin-inline: calc(var(--spacer) * 10);
  }
  .u-mx-lg-11 {
    margin-inline: calc(var(--spacer) * 12);
  }
  .u-mx-lg-12 {
    margin-inline: calc(var(--spacer) * 14);
  }
  .u-mx-lg-13 {
    margin-inline: calc(var(--spacer) * 16);
  }
  .u-mx-lg-14 {
    margin-inline: calc(var(--spacer) * 18);
  }
  .u-my-lg-0 {
    margin-block: calc(var(--spacer) * 0);
  }
  .u-my-lg-1 {
    margin-block: calc(var(--spacer) * 0.5);
  }
  .u-my-lg-2 {
    margin-block: calc(var(--spacer));
  }
  .u-my-lg-3 {
    margin-block: calc(var(--spacer) * 1.5);
  }
  .u-my-lg-4 {
    margin-block: calc(var(--spacer) * 2);
  }
  .u-my-lg-5 {
    margin-block: calc(var(--spacer) * 3);
  }
  .u-my-lg-6 {
    margin-block: calc(var(--spacer) * 4);
  }
  .u-my-lg-7 {
    margin-block: calc(var(--spacer) * 5);
  }
  .u-my-lg-8 {
    margin-block: calc(var(--spacer) * 6);
  }
  .u-my-lg-9 {
    margin-block: calc(var(--spacer) * 8);
  }
  .u-my-lg-10 {
    margin-block: calc(var(--spacer) * 10);
  }
  .u-my-lg-11 {
    margin-block: calc(var(--spacer) * 12);
  }
  .u-my-lg-12 {
    margin-block: calc(var(--spacer) * 14);
  }
  .u-my-lg-13 {
    margin-block: calc(var(--spacer) * 16);
  }
  .u-my-lg-14 {
    margin-block: calc(var(--spacer) * 18);
  }
  .u-p-lg-0 {
    padding: calc(var(--spacer) * 0);
  }
  .u-p-lg-1 {
    padding: calc(var(--spacer) * 0.5);
  }
  .u-p-lg-2 {
    padding: calc(var(--spacer));
  }
  .u-p-lg-3 {
    padding: calc(var(--spacer) * 1.5);
  }
  .u-p-lg-4 {
    padding: calc(var(--spacer) * 2);
  }
  .u-p-lg-5 {
    padding: calc(var(--spacer) * 3);
  }
  .u-p-lg-6 {
    padding: calc(var(--spacer) * 4);
  }
  .u-p-lg-7 {
    padding: calc(var(--spacer) * 5);
  }
  .u-p-lg-8 {
    padding: calc(var(--spacer) * 6);
  }
  .u-p-lg-9 {
    padding: calc(var(--spacer) * 8);
  }
  .u-p-lg-10 {
    padding: calc(var(--spacer) * 10);
  }
  .u-p-lg-11 {
    padding: calc(var(--spacer) * 12);
  }
  .u-p-lg-12 {
    padding: calc(var(--spacer) * 14);
  }
  .u-p-lg-13 {
    padding: calc(var(--spacer) * 16);
  }
  .u-p-lg-14 {
    padding: calc(var(--spacer) * 18);
  }
  .u-pt-lg-0 {
    padding-block-start: calc(var(--spacer) * 0);
  }
  .u-pt-lg-1 {
    padding-block-start: calc(var(--spacer) * 0.5);
  }
  .u-pt-lg-2 {
    padding-block-start: calc(var(--spacer));
  }
  .u-pt-lg-3 {
    padding-block-start: calc(var(--spacer) * 1.5);
  }
  .u-pt-lg-4 {
    padding-block-start: calc(var(--spacer) * 2);
  }
  .u-pt-lg-5 {
    padding-block-start: calc(var(--spacer) * 3);
  }
  .u-pt-lg-6 {
    padding-block-start: calc(var(--spacer) * 4);
  }
  .u-pt-lg-7 {
    padding-block-start: calc(var(--spacer) * 5);
  }
  .u-pt-lg-8 {
    padding-block-start: calc(var(--spacer) * 6);
  }
  .u-pt-lg-9 {
    padding-block-start: calc(var(--spacer) * 8);
  }
  .u-pt-lg-10 {
    padding-block-start: calc(var(--spacer) * 10);
  }
  .u-pt-lg-11 {
    padding-block-start: calc(var(--spacer) * 12);
  }
  .u-pt-lg-12 {
    padding-block-start: calc(var(--spacer) * 14);
  }
  .u-pt-lg-13 {
    padding-block-start: calc(var(--spacer) * 16);
  }
  .u-pt-lg-14 {
    padding-block-start: calc(var(--spacer) * 18);
  }
  .u-pl-lg-0 {
    padding-inline-start: calc(var(--spacer) * 0);
  }
  .u-pl-lg-1 {
    padding-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-pl-lg-2 {
    padding-inline-start: calc(var(--spacer));
  }
  .u-pl-lg-3 {
    padding-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-pl-lg-4 {
    padding-inline-start: calc(var(--spacer) * 2);
  }
  .u-pl-lg-5 {
    padding-inline-start: calc(var(--spacer) * 3);
  }
  .u-pl-lg-6 {
    padding-inline-start: calc(var(--spacer) * 4);
  }
  .u-pl-lg-7 {
    padding-inline-start: calc(var(--spacer) * 5);
  }
  .u-pl-lg-8 {
    padding-inline-start: calc(var(--spacer) * 6);
  }
  .u-pl-lg-9 {
    padding-inline-start: calc(var(--spacer) * 8);
  }
  .u-pl-lg-10 {
    padding-inline-start: calc(var(--spacer) * 10);
  }
  .u-pl-lg-11 {
    padding-inline-start: calc(var(--spacer) * 12);
  }
  .u-pl-lg-12 {
    padding-inline-start: calc(var(--spacer) * 14);
  }
  .u-pl-lg-13 {
    padding-inline-start: calc(var(--spacer) * 16);
  }
  .u-pl-lg-14 {
    padding-inline-start: calc(var(--spacer) * 18);
  }
  .u-pr-lg-0 {
    padding-inline-end: calc(var(--spacer) * 0);
  }
  .u-pr-lg-1 {
    padding-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-pr-lg-2 {
    padding-inline-end: calc(var(--spacer));
  }
  .u-pr-lg-3 {
    padding-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-pr-lg-4 {
    padding-inline-end: calc(var(--spacer) * 2);
  }
  .u-pr-lg-5 {
    padding-inline-end: calc(var(--spacer) * 3);
  }
  .u-pr-lg-6 {
    padding-inline-end: calc(var(--spacer) * 4);
  }
  .u-pr-lg-7 {
    padding-inline-end: calc(var(--spacer) * 5);
  }
  .u-pr-lg-8 {
    padding-inline-end: calc(var(--spacer) * 6);
  }
  .u-pr-lg-9 {
    padding-inline-end: calc(var(--spacer) * 8);
  }
  .u-pr-lg-10 {
    padding-inline-end: calc(var(--spacer) * 10);
  }
  .u-pr-lg-11 {
    padding-inline-end: calc(var(--spacer) * 12);
  }
  .u-pr-lg-12 {
    padding-inline-end: calc(var(--spacer) * 14);
  }
  .u-pr-lg-13 {
    padding-inline-end: calc(var(--spacer) * 16);
  }
  .u-pr-lg-14 {
    padding-inline-end: calc(var(--spacer) * 18);
  }
  .u-pb-lg-0 {
    padding-block-end: calc(var(--spacer) * 0);
  }
  .u-pb-lg-1 {
    padding-block-end: calc(var(--spacer) * 0.5);
  }
  .u-pb-lg-2 {
    padding-block-end: calc(var(--spacer));
  }
  .u-pb-lg-3 {
    padding-block-end: calc(var(--spacer) * 1.5);
  }
  .u-pb-lg-4 {
    padding-block-end: calc(var(--spacer) * 2);
  }
  .u-pb-lg-5 {
    padding-block-end: calc(var(--spacer) * 3);
  }
  .u-pb-lg-6 {
    padding-block-end: calc(var(--spacer) * 4);
  }
  .u-pb-lg-7 {
    padding-block-end: calc(var(--spacer) * 5);
  }
  .u-pb-lg-8 {
    padding-block-end: calc(var(--spacer) * 6);
  }
  .u-pb-lg-9 {
    padding-block-end: calc(var(--spacer) * 8);
  }
  .u-pb-lg-10 {
    padding-block-end: calc(var(--spacer) * 10);
  }
  .u-pb-lg-11 {
    padding-block-end: calc(var(--spacer) * 12);
  }
  .u-pb-lg-12 {
    padding-block-end: calc(var(--spacer) * 14);
  }
  .u-pb-lg-13 {
    padding-block-end: calc(var(--spacer) * 16);
  }
  .u-pb-lg-14 {
    padding-block-end: calc(var(--spacer) * 18);
  }
  .u-px-lg-0 {
    padding-inline: calc(var(--spacer) * 0);
  }
  .u-px-lg-1 {
    padding-inline: calc(var(--spacer) * 0.5);
  }
  .u-px-lg-2 {
    padding-inline: calc(var(--spacer));
  }
  .u-px-lg-3 {
    padding-inline: calc(var(--spacer) * 1.5);
  }
  .u-px-lg-4 {
    padding-inline: calc(var(--spacer) * 2);
  }
  .u-px-lg-5 {
    padding-inline: calc(var(--spacer) * 3);
  }
  .u-px-lg-6 {
    padding-inline: calc(var(--spacer) * 4);
  }
  .u-px-lg-7 {
    padding-inline: calc(var(--spacer) * 5);
  }
  .u-px-lg-8 {
    padding-inline: calc(var(--spacer) * 6);
  }
  .u-px-lg-9 {
    padding-inline: calc(var(--spacer) * 8);
  }
  .u-px-lg-10 {
    padding-inline: calc(var(--spacer) * 10);
  }
  .u-px-lg-11 {
    padding-inline: calc(var(--spacer) * 12);
  }
  .u-px-lg-12 {
    padding-inline: calc(var(--spacer) * 14);
  }
  .u-px-lg-13 {
    padding-inline: calc(var(--spacer) * 16);
  }
  .u-px-lg-14 {
    padding-inline: calc(var(--spacer) * 18);
  }
  .u-py-lg-0 {
    padding-block: calc(var(--spacer) * 0);
  }
  .u-py-lg-1 {
    padding-block: calc(var(--spacer) * 0.5);
  }
  .u-py-lg-2 {
    padding-block: calc(var(--spacer));
  }
  .u-py-lg-3 {
    padding-block: calc(var(--spacer) * 1.5);
  }
  .u-py-lg-4 {
    padding-block: calc(var(--spacer) * 2);
  }
  .u-py-lg-5 {
    padding-block: calc(var(--spacer) * 3);
  }
  .u-py-lg-6 {
    padding-block: calc(var(--spacer) * 4);
  }
  .u-py-lg-7 {
    padding-block: calc(var(--spacer) * 5);
  }
  .u-py-lg-8 {
    padding-block: calc(var(--spacer) * 6);
  }
  .u-py-lg-9 {
    padding-block: calc(var(--spacer) * 8);
  }
  .u-py-lg-10 {
    padding-block: calc(var(--spacer) * 10);
  }
  .u-py-lg-11 {
    padding-block: calc(var(--spacer) * 12);
  }
  .u-py-lg-12 {
    padding-block: calc(var(--spacer) * 14);
  }
  .u-py-lg-13 {
    padding-block: calc(var(--spacer) * 16);
  }
  .u-py-lg-14 {
    padding-block: calc(var(--spacer) * 18);
  }
}
@media (min-width: 1450px) {
  .u-m-lg-x-0 {
    margin: calc(var(--spacer) * 0);
  }
  .u-m-lg-x-1 {
    margin: calc(var(--spacer) * 0.5);
  }
  .u-m-lg-x-2 {
    margin: calc(var(--spacer));
  }
  .u-m-lg-x-3 {
    margin: calc(var(--spacer) * 1.5);
  }
  .u-m-lg-x-4 {
    margin: calc(var(--spacer) * 2);
  }
  .u-m-lg-x-5 {
    margin: calc(var(--spacer) * 3);
  }
  .u-m-lg-x-6 {
    margin: calc(var(--spacer) * 4);
  }
  .u-m-lg-x-7 {
    margin: calc(var(--spacer) * 5);
  }
  .u-m-lg-x-8 {
    margin: calc(var(--spacer) * 6);
  }
  .u-m-lg-x-9 {
    margin: calc(var(--spacer) * 8);
  }
  .u-m-lg-x-10 {
    margin: calc(var(--spacer) * 10);
  }
  .u-m-lg-x-11 {
    margin: calc(var(--spacer) * 12);
  }
  .u-m-lg-x-12 {
    margin: calc(var(--spacer) * 14);
  }
  .u-m-lg-x-13 {
    margin: calc(var(--spacer) * 16);
  }
  .u-m-lg-x-14 {
    margin: calc(var(--spacer) * 18);
  }
  .u-mt-lg-x-0 {
    margin-block-start: calc(var(--spacer) * 0);
  }
  .u-mt-lg-x-1 {
    margin-block-start: calc(var(--spacer) * 0.5);
  }
  .u-mt-lg-x-2 {
    margin-block-start: calc(var(--spacer));
  }
  .u-mt-lg-x-3 {
    margin-block-start: calc(var(--spacer) * 1.5);
  }
  .u-mt-lg-x-4 {
    margin-block-start: calc(var(--spacer) * 2);
  }
  .u-mt-lg-x-5 {
    margin-block-start: calc(var(--spacer) * 3);
  }
  .u-mt-lg-x-6 {
    margin-block-start: calc(var(--spacer) * 4);
  }
  .u-mt-lg-x-7 {
    margin-block-start: calc(var(--spacer) * 5);
  }
  .u-mt-lg-x-8 {
    margin-block-start: calc(var(--spacer) * 6);
  }
  .u-mt-lg-x-9 {
    margin-block-start: calc(var(--spacer) * 8);
  }
  .u-mt-lg-x-10 {
    margin-block-start: calc(var(--spacer) * 10);
  }
  .u-mt-lg-x-11 {
    margin-block-start: calc(var(--spacer) * 12);
  }
  .u-mt-lg-x-12 {
    margin-block-start: calc(var(--spacer) * 14);
  }
  .u-mt-lg-x-13 {
    margin-block-start: calc(var(--spacer) * 16);
  }
  .u-mt-lg-x-14 {
    margin-block-start: calc(var(--spacer) * 18);
  }
  .u-ml-lg-x-0 {
    margin-inline-start: calc(var(--spacer) * 0);
  }
  .u-ml-lg-x-1 {
    margin-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-ml-lg-x-2 {
    margin-inline-start: calc(var(--spacer));
  }
  .u-ml-lg-x-3 {
    margin-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-ml-lg-x-4 {
    margin-inline-start: calc(var(--spacer) * 2);
  }
  .u-ml-lg-x-5 {
    margin-inline-start: calc(var(--spacer) * 3);
  }
  .u-ml-lg-x-6 {
    margin-inline-start: calc(var(--spacer) * 4);
  }
  .u-ml-lg-x-7 {
    margin-inline-start: calc(var(--spacer) * 5);
  }
  .u-ml-lg-x-8 {
    margin-inline-start: calc(var(--spacer) * 6);
  }
  .u-ml-lg-x-9 {
    margin-inline-start: calc(var(--spacer) * 8);
  }
  .u-ml-lg-x-10 {
    margin-inline-start: calc(var(--spacer) * 10);
  }
  .u-ml-lg-x-11 {
    margin-inline-start: calc(var(--spacer) * 12);
  }
  .u-ml-lg-x-12 {
    margin-inline-start: calc(var(--spacer) * 14);
  }
  .u-ml-lg-x-13 {
    margin-inline-start: calc(var(--spacer) * 16);
  }
  .u-ml-lg-x-14 {
    margin-inline-start: calc(var(--spacer) * 18);
  }
  .u-mr-lg-x-0 {
    margin-inline-end: calc(var(--spacer) * 0);
  }
  .u-mr-lg-x-1 {
    margin-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-mr-lg-x-2 {
    margin-inline-end: calc(var(--spacer));
  }
  .u-mr-lg-x-3 {
    margin-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-mr-lg-x-4 {
    margin-inline-end: calc(var(--spacer) * 2);
  }
  .u-mr-lg-x-5 {
    margin-inline-end: calc(var(--spacer) * 3);
  }
  .u-mr-lg-x-6 {
    margin-inline-end: calc(var(--spacer) * 4);
  }
  .u-mr-lg-x-7 {
    margin-inline-end: calc(var(--spacer) * 5);
  }
  .u-mr-lg-x-8 {
    margin-inline-end: calc(var(--spacer) * 6);
  }
  .u-mr-lg-x-9 {
    margin-inline-end: calc(var(--spacer) * 8);
  }
  .u-mr-lg-x-10 {
    margin-inline-end: calc(var(--spacer) * 10);
  }
  .u-mr-lg-x-11 {
    margin-inline-end: calc(var(--spacer) * 12);
  }
  .u-mr-lg-x-12 {
    margin-inline-end: calc(var(--spacer) * 14);
  }
  .u-mr-lg-x-13 {
    margin-inline-end: calc(var(--spacer) * 16);
  }
  .u-mr-lg-x-14 {
    margin-inline-end: calc(var(--spacer) * 18);
  }
  .u-mb-lg-x-0 {
    margin-block-end: calc(var(--spacer) * 0);
  }
  .u-mb-lg-x-1 {
    margin-block-end: calc(var(--spacer) * 0.5);
  }
  .u-mb-lg-x-2 {
    margin-block-end: calc(var(--spacer));
  }
  .u-mb-lg-x-3 {
    margin-block-end: calc(var(--spacer) * 1.5);
  }
  .u-mb-lg-x-4 {
    margin-block-end: calc(var(--spacer) * 2);
  }
  .u-mb-lg-x-5 {
    margin-block-end: calc(var(--spacer) * 3);
  }
  .u-mb-lg-x-6 {
    margin-block-end: calc(var(--spacer) * 4);
  }
  .u-mb-lg-x-7 {
    margin-block-end: calc(var(--spacer) * 5);
  }
  .u-mb-lg-x-8 {
    margin-block-end: calc(var(--spacer) * 6);
  }
  .u-mb-lg-x-9 {
    margin-block-end: calc(var(--spacer) * 8);
  }
  .u-mb-lg-x-10 {
    margin-block-end: calc(var(--spacer) * 10);
  }
  .u-mb-lg-x-11 {
    margin-block-end: calc(var(--spacer) * 12);
  }
  .u-mb-lg-x-12 {
    margin-block-end: calc(var(--spacer) * 14);
  }
  .u-mb-lg-x-13 {
    margin-block-end: calc(var(--spacer) * 16);
  }
  .u-mb-lg-x-14 {
    margin-block-end: calc(var(--spacer) * 18);
  }
  .u-mx-lg-x-0 {
    margin-inline: calc(var(--spacer) * 0);
  }
  .u-mx-lg-x-1 {
    margin-inline: calc(var(--spacer) * 0.5);
  }
  .u-mx-lg-x-2 {
    margin-inline: calc(var(--spacer));
  }
  .u-mx-lg-x-3 {
    margin-inline: calc(var(--spacer) * 1.5);
  }
  .u-mx-lg-x-4 {
    margin-inline: calc(var(--spacer) * 2);
  }
  .u-mx-lg-x-5 {
    margin-inline: calc(var(--spacer) * 3);
  }
  .u-mx-lg-x-6 {
    margin-inline: calc(var(--spacer) * 4);
  }
  .u-mx-lg-x-7 {
    margin-inline: calc(var(--spacer) * 5);
  }
  .u-mx-lg-x-8 {
    margin-inline: calc(var(--spacer) * 6);
  }
  .u-mx-lg-x-9 {
    margin-inline: calc(var(--spacer) * 8);
  }
  .u-mx-lg-x-10 {
    margin-inline: calc(var(--spacer) * 10);
  }
  .u-mx-lg-x-11 {
    margin-inline: calc(var(--spacer) * 12);
  }
  .u-mx-lg-x-12 {
    margin-inline: calc(var(--spacer) * 14);
  }
  .u-mx-lg-x-13 {
    margin-inline: calc(var(--spacer) * 16);
  }
  .u-mx-lg-x-14 {
    margin-inline: calc(var(--spacer) * 18);
  }
  .u-my-lg-x-0 {
    margin-block: calc(var(--spacer) * 0);
  }
  .u-my-lg-x-1 {
    margin-block: calc(var(--spacer) * 0.5);
  }
  .u-my-lg-x-2 {
    margin-block: calc(var(--spacer));
  }
  .u-my-lg-x-3 {
    margin-block: calc(var(--spacer) * 1.5);
  }
  .u-my-lg-x-4 {
    margin-block: calc(var(--spacer) * 2);
  }
  .u-my-lg-x-5 {
    margin-block: calc(var(--spacer) * 3);
  }
  .u-my-lg-x-6 {
    margin-block: calc(var(--spacer) * 4);
  }
  .u-my-lg-x-7 {
    margin-block: calc(var(--spacer) * 5);
  }
  .u-my-lg-x-8 {
    margin-block: calc(var(--spacer) * 6);
  }
  .u-my-lg-x-9 {
    margin-block: calc(var(--spacer) * 8);
  }
  .u-my-lg-x-10 {
    margin-block: calc(var(--spacer) * 10);
  }
  .u-my-lg-x-11 {
    margin-block: calc(var(--spacer) * 12);
  }
  .u-my-lg-x-12 {
    margin-block: calc(var(--spacer) * 14);
  }
  .u-my-lg-x-13 {
    margin-block: calc(var(--spacer) * 16);
  }
  .u-my-lg-x-14 {
    margin-block: calc(var(--spacer) * 18);
  }
  .u-p-lg-x-0 {
    padding: calc(var(--spacer) * 0);
  }
  .u-p-lg-x-1 {
    padding: calc(var(--spacer) * 0.5);
  }
  .u-p-lg-x-2 {
    padding: calc(var(--spacer));
  }
  .u-p-lg-x-3 {
    padding: calc(var(--spacer) * 1.5);
  }
  .u-p-lg-x-4 {
    padding: calc(var(--spacer) * 2);
  }
  .u-p-lg-x-5 {
    padding: calc(var(--spacer) * 3);
  }
  .u-p-lg-x-6 {
    padding: calc(var(--spacer) * 4);
  }
  .u-p-lg-x-7 {
    padding: calc(var(--spacer) * 5);
  }
  .u-p-lg-x-8 {
    padding: calc(var(--spacer) * 6);
  }
  .u-p-lg-x-9 {
    padding: calc(var(--spacer) * 8);
  }
  .u-p-lg-x-10 {
    padding: calc(var(--spacer) * 10);
  }
  .u-p-lg-x-11 {
    padding: calc(var(--spacer) * 12);
  }
  .u-p-lg-x-12 {
    padding: calc(var(--spacer) * 14);
  }
  .u-p-lg-x-13 {
    padding: calc(var(--spacer) * 16);
  }
  .u-p-lg-x-14 {
    padding: calc(var(--spacer) * 18);
  }
  .u-pt-lg-x-0 {
    padding-block-start: calc(var(--spacer) * 0);
  }
  .u-pt-lg-x-1 {
    padding-block-start: calc(var(--spacer) * 0.5);
  }
  .u-pt-lg-x-2 {
    padding-block-start: calc(var(--spacer));
  }
  .u-pt-lg-x-3 {
    padding-block-start: calc(var(--spacer) * 1.5);
  }
  .u-pt-lg-x-4 {
    padding-block-start: calc(var(--spacer) * 2);
  }
  .u-pt-lg-x-5 {
    padding-block-start: calc(var(--spacer) * 3);
  }
  .u-pt-lg-x-6 {
    padding-block-start: calc(var(--spacer) * 4);
  }
  .u-pt-lg-x-7 {
    padding-block-start: calc(var(--spacer) * 5);
  }
  .u-pt-lg-x-8 {
    padding-block-start: calc(var(--spacer) * 6);
  }
  .u-pt-lg-x-9 {
    padding-block-start: calc(var(--spacer) * 8);
  }
  .u-pt-lg-x-10 {
    padding-block-start: calc(var(--spacer) * 10);
  }
  .u-pt-lg-x-11 {
    padding-block-start: calc(var(--spacer) * 12);
  }
  .u-pt-lg-x-12 {
    padding-block-start: calc(var(--spacer) * 14);
  }
  .u-pt-lg-x-13 {
    padding-block-start: calc(var(--spacer) * 16);
  }
  .u-pt-lg-x-14 {
    padding-block-start: calc(var(--spacer) * 18);
  }
  .u-pl-lg-x-0 {
    padding-inline-start: calc(var(--spacer) * 0);
  }
  .u-pl-lg-x-1 {
    padding-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-pl-lg-x-2 {
    padding-inline-start: calc(var(--spacer));
  }
  .u-pl-lg-x-3 {
    padding-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-pl-lg-x-4 {
    padding-inline-start: calc(var(--spacer) * 2);
  }
  .u-pl-lg-x-5 {
    padding-inline-start: calc(var(--spacer) * 3);
  }
  .u-pl-lg-x-6 {
    padding-inline-start: calc(var(--spacer) * 4);
  }
  .u-pl-lg-x-7 {
    padding-inline-start: calc(var(--spacer) * 5);
  }
  .u-pl-lg-x-8 {
    padding-inline-start: calc(var(--spacer) * 6);
  }
  .u-pl-lg-x-9 {
    padding-inline-start: calc(var(--spacer) * 8);
  }
  .u-pl-lg-x-10 {
    padding-inline-start: calc(var(--spacer) * 10);
  }
  .u-pl-lg-x-11 {
    padding-inline-start: calc(var(--spacer) * 12);
  }
  .u-pl-lg-x-12 {
    padding-inline-start: calc(var(--spacer) * 14);
  }
  .u-pl-lg-x-13 {
    padding-inline-start: calc(var(--spacer) * 16);
  }
  .u-pl-lg-x-14 {
    padding-inline-start: calc(var(--spacer) * 18);
  }
  .u-pr-lg-x-0 {
    padding-inline-end: calc(var(--spacer) * 0);
  }
  .u-pr-lg-x-1 {
    padding-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-pr-lg-x-2 {
    padding-inline-end: calc(var(--spacer));
  }
  .u-pr-lg-x-3 {
    padding-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-pr-lg-x-4 {
    padding-inline-end: calc(var(--spacer) * 2);
  }
  .u-pr-lg-x-5 {
    padding-inline-end: calc(var(--spacer) * 3);
  }
  .u-pr-lg-x-6 {
    padding-inline-end: calc(var(--spacer) * 4);
  }
  .u-pr-lg-x-7 {
    padding-inline-end: calc(var(--spacer) * 5);
  }
  .u-pr-lg-x-8 {
    padding-inline-end: calc(var(--spacer) * 6);
  }
  .u-pr-lg-x-9 {
    padding-inline-end: calc(var(--spacer) * 8);
  }
  .u-pr-lg-x-10 {
    padding-inline-end: calc(var(--spacer) * 10);
  }
  .u-pr-lg-x-11 {
    padding-inline-end: calc(var(--spacer) * 12);
  }
  .u-pr-lg-x-12 {
    padding-inline-end: calc(var(--spacer) * 14);
  }
  .u-pr-lg-x-13 {
    padding-inline-end: calc(var(--spacer) * 16);
  }
  .u-pr-lg-x-14 {
    padding-inline-end: calc(var(--spacer) * 18);
  }
  .u-pb-lg-x-0 {
    padding-block-end: calc(var(--spacer) * 0);
  }
  .u-pb-lg-x-1 {
    padding-block-end: calc(var(--spacer) * 0.5);
  }
  .u-pb-lg-x-2 {
    padding-block-end: calc(var(--spacer));
  }
  .u-pb-lg-x-3 {
    padding-block-end: calc(var(--spacer) * 1.5);
  }
  .u-pb-lg-x-4 {
    padding-block-end: calc(var(--spacer) * 2);
  }
  .u-pb-lg-x-5 {
    padding-block-end: calc(var(--spacer) * 3);
  }
  .u-pb-lg-x-6 {
    padding-block-end: calc(var(--spacer) * 4);
  }
  .u-pb-lg-x-7 {
    padding-block-end: calc(var(--spacer) * 5);
  }
  .u-pb-lg-x-8 {
    padding-block-end: calc(var(--spacer) * 6);
  }
  .u-pb-lg-x-9 {
    padding-block-end: calc(var(--spacer) * 8);
  }
  .u-pb-lg-x-10 {
    padding-block-end: calc(var(--spacer) * 10);
  }
  .u-pb-lg-x-11 {
    padding-block-end: calc(var(--spacer) * 12);
  }
  .u-pb-lg-x-12 {
    padding-block-end: calc(var(--spacer) * 14);
  }
  .u-pb-lg-x-13 {
    padding-block-end: calc(var(--spacer) * 16);
  }
  .u-pb-lg-x-14 {
    padding-block-end: calc(var(--spacer) * 18);
  }
  .u-px-lg-x-0 {
    padding-inline: calc(var(--spacer) * 0);
  }
  .u-px-lg-x-1 {
    padding-inline: calc(var(--spacer) * 0.5);
  }
  .u-px-lg-x-2 {
    padding-inline: calc(var(--spacer));
  }
  .u-px-lg-x-3 {
    padding-inline: calc(var(--spacer) * 1.5);
  }
  .u-px-lg-x-4 {
    padding-inline: calc(var(--spacer) * 2);
  }
  .u-px-lg-x-5 {
    padding-inline: calc(var(--spacer) * 3);
  }
  .u-px-lg-x-6 {
    padding-inline: calc(var(--spacer) * 4);
  }
  .u-px-lg-x-7 {
    padding-inline: calc(var(--spacer) * 5);
  }
  .u-px-lg-x-8 {
    padding-inline: calc(var(--spacer) * 6);
  }
  .u-px-lg-x-9 {
    padding-inline: calc(var(--spacer) * 8);
  }
  .u-px-lg-x-10 {
    padding-inline: calc(var(--spacer) * 10);
  }
  .u-px-lg-x-11 {
    padding-inline: calc(var(--spacer) * 12);
  }
  .u-px-lg-x-12 {
    padding-inline: calc(var(--spacer) * 14);
  }
  .u-px-lg-x-13 {
    padding-inline: calc(var(--spacer) * 16);
  }
  .u-px-lg-x-14 {
    padding-inline: calc(var(--spacer) * 18);
  }
  .u-py-lg-x-0 {
    padding-block: calc(var(--spacer) * 0);
  }
  .u-py-lg-x-1 {
    padding-block: calc(var(--spacer) * 0.5);
  }
  .u-py-lg-x-2 {
    padding-block: calc(var(--spacer));
  }
  .u-py-lg-x-3 {
    padding-block: calc(var(--spacer) * 1.5);
  }
  .u-py-lg-x-4 {
    padding-block: calc(var(--spacer) * 2);
  }
  .u-py-lg-x-5 {
    padding-block: calc(var(--spacer) * 3);
  }
  .u-py-lg-x-6 {
    padding-block: calc(var(--spacer) * 4);
  }
  .u-py-lg-x-7 {
    padding-block: calc(var(--spacer) * 5);
  }
  .u-py-lg-x-8 {
    padding-block: calc(var(--spacer) * 6);
  }
  .u-py-lg-x-9 {
    padding-block: calc(var(--spacer) * 8);
  }
  .u-py-lg-x-10 {
    padding-block: calc(var(--spacer) * 10);
  }
  .u-py-lg-x-11 {
    padding-block: calc(var(--spacer) * 12);
  }
  .u-py-lg-x-12 {
    padding-block: calc(var(--spacer) * 14);
  }
  .u-py-lg-x-13 {
    padding-block: calc(var(--spacer) * 16);
  }
  .u-py-lg-x-14 {
    padding-block: calc(var(--spacer) * 18);
  }
}
@media (min-width: 1600px) {
  .u-m-xl-0 {
    margin: calc(var(--spacer) * 0);
  }
  .u-m-xl-1 {
    margin: calc(var(--spacer) * 0.5);
  }
  .u-m-xl-2 {
    margin: calc(var(--spacer));
  }
  .u-m-xl-3 {
    margin: calc(var(--spacer) * 1.5);
  }
  .u-m-xl-4 {
    margin: calc(var(--spacer) * 2);
  }
  .u-m-xl-5 {
    margin: calc(var(--spacer) * 3);
  }
  .u-m-xl-6 {
    margin: calc(var(--spacer) * 4);
  }
  .u-m-xl-7 {
    margin: calc(var(--spacer) * 5);
  }
  .u-m-xl-8 {
    margin: calc(var(--spacer) * 6);
  }
  .u-m-xl-9 {
    margin: calc(var(--spacer) * 8);
  }
  .u-m-xl-10 {
    margin: calc(var(--spacer) * 10);
  }
  .u-m-xl-11 {
    margin: calc(var(--spacer) * 12);
  }
  .u-m-xl-12 {
    margin: calc(var(--spacer) * 14);
  }
  .u-m-xl-13 {
    margin: calc(var(--spacer) * 16);
  }
  .u-m-xl-14 {
    margin: calc(var(--spacer) * 18);
  }
  .u-mt-xl-0 {
    margin-block-start: calc(var(--spacer) * 0);
  }
  .u-mt-xl-1 {
    margin-block-start: calc(var(--spacer) * 0.5);
  }
  .u-mt-xl-2 {
    margin-block-start: calc(var(--spacer));
  }
  .u-mt-xl-3 {
    margin-block-start: calc(var(--spacer) * 1.5);
  }
  .u-mt-xl-4 {
    margin-block-start: calc(var(--spacer) * 2);
  }
  .u-mt-xl-5 {
    margin-block-start: calc(var(--spacer) * 3);
  }
  .u-mt-xl-6 {
    margin-block-start: calc(var(--spacer) * 4);
  }
  .u-mt-xl-7 {
    margin-block-start: calc(var(--spacer) * 5);
  }
  .u-mt-xl-8 {
    margin-block-start: calc(var(--spacer) * 6);
  }
  .u-mt-xl-9 {
    margin-block-start: calc(var(--spacer) * 8);
  }
  .u-mt-xl-10 {
    margin-block-start: calc(var(--spacer) * 10);
  }
  .u-mt-xl-11 {
    margin-block-start: calc(var(--spacer) * 12);
  }
  .u-mt-xl-12 {
    margin-block-start: calc(var(--spacer) * 14);
  }
  .u-mt-xl-13 {
    margin-block-start: calc(var(--spacer) * 16);
  }
  .u-mt-xl-14 {
    margin-block-start: calc(var(--spacer) * 18);
  }
  .u-ml-xl-0 {
    margin-inline-start: calc(var(--spacer) * 0);
  }
  .u-ml-xl-1 {
    margin-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-ml-xl-2 {
    margin-inline-start: calc(var(--spacer));
  }
  .u-ml-xl-3 {
    margin-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-ml-xl-4 {
    margin-inline-start: calc(var(--spacer) * 2);
  }
  .u-ml-xl-5 {
    margin-inline-start: calc(var(--spacer) * 3);
  }
  .u-ml-xl-6 {
    margin-inline-start: calc(var(--spacer) * 4);
  }
  .u-ml-xl-7 {
    margin-inline-start: calc(var(--spacer) * 5);
  }
  .u-ml-xl-8 {
    margin-inline-start: calc(var(--spacer) * 6);
  }
  .u-ml-xl-9 {
    margin-inline-start: calc(var(--spacer) * 8);
  }
  .u-ml-xl-10 {
    margin-inline-start: calc(var(--spacer) * 10);
  }
  .u-ml-xl-11 {
    margin-inline-start: calc(var(--spacer) * 12);
  }
  .u-ml-xl-12 {
    margin-inline-start: calc(var(--spacer) * 14);
  }
  .u-ml-xl-13 {
    margin-inline-start: calc(var(--spacer) * 16);
  }
  .u-ml-xl-14 {
    margin-inline-start: calc(var(--spacer) * 18);
  }
  .u-mr-xl-0 {
    margin-inline-end: calc(var(--spacer) * 0);
  }
  .u-mr-xl-1 {
    margin-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-mr-xl-2 {
    margin-inline-end: calc(var(--spacer));
  }
  .u-mr-xl-3 {
    margin-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-mr-xl-4 {
    margin-inline-end: calc(var(--spacer) * 2);
  }
  .u-mr-xl-5 {
    margin-inline-end: calc(var(--spacer) * 3);
  }
  .u-mr-xl-6 {
    margin-inline-end: calc(var(--spacer) * 4);
  }
  .u-mr-xl-7 {
    margin-inline-end: calc(var(--spacer) * 5);
  }
  .u-mr-xl-8 {
    margin-inline-end: calc(var(--spacer) * 6);
  }
  .u-mr-xl-9 {
    margin-inline-end: calc(var(--spacer) * 8);
  }
  .u-mr-xl-10 {
    margin-inline-end: calc(var(--spacer) * 10);
  }
  .u-mr-xl-11 {
    margin-inline-end: calc(var(--spacer) * 12);
  }
  .u-mr-xl-12 {
    margin-inline-end: calc(var(--spacer) * 14);
  }
  .u-mr-xl-13 {
    margin-inline-end: calc(var(--spacer) * 16);
  }
  .u-mr-xl-14 {
    margin-inline-end: calc(var(--spacer) * 18);
  }
  .u-mb-xl-0 {
    margin-block-end: calc(var(--spacer) * 0);
  }
  .u-mb-xl-1 {
    margin-block-end: calc(var(--spacer) * 0.5);
  }
  .u-mb-xl-2 {
    margin-block-end: calc(var(--spacer));
  }
  .u-mb-xl-3 {
    margin-block-end: calc(var(--spacer) * 1.5);
  }
  .u-mb-xl-4 {
    margin-block-end: calc(var(--spacer) * 2);
  }
  .u-mb-xl-5 {
    margin-block-end: calc(var(--spacer) * 3);
  }
  .u-mb-xl-6 {
    margin-block-end: calc(var(--spacer) * 4);
  }
  .u-mb-xl-7 {
    margin-block-end: calc(var(--spacer) * 5);
  }
  .u-mb-xl-8 {
    margin-block-end: calc(var(--spacer) * 6);
  }
  .u-mb-xl-9 {
    margin-block-end: calc(var(--spacer) * 8);
  }
  .u-mb-xl-10 {
    margin-block-end: calc(var(--spacer) * 10);
  }
  .u-mb-xl-11 {
    margin-block-end: calc(var(--spacer) * 12);
  }
  .u-mb-xl-12 {
    margin-block-end: calc(var(--spacer) * 14);
  }
  .u-mb-xl-13 {
    margin-block-end: calc(var(--spacer) * 16);
  }
  .u-mb-xl-14 {
    margin-block-end: calc(var(--spacer) * 18);
  }
  .u-mx-xl-0 {
    margin-inline: calc(var(--spacer) * 0);
  }
  .u-mx-xl-1 {
    margin-inline: calc(var(--spacer) * 0.5);
  }
  .u-mx-xl-2 {
    margin-inline: calc(var(--spacer));
  }
  .u-mx-xl-3 {
    margin-inline: calc(var(--spacer) * 1.5);
  }
  .u-mx-xl-4 {
    margin-inline: calc(var(--spacer) * 2);
  }
  .u-mx-xl-5 {
    margin-inline: calc(var(--spacer) * 3);
  }
  .u-mx-xl-6 {
    margin-inline: calc(var(--spacer) * 4);
  }
  .u-mx-xl-7 {
    margin-inline: calc(var(--spacer) * 5);
  }
  .u-mx-xl-8 {
    margin-inline: calc(var(--spacer) * 6);
  }
  .u-mx-xl-9 {
    margin-inline: calc(var(--spacer) * 8);
  }
  .u-mx-xl-10 {
    margin-inline: calc(var(--spacer) * 10);
  }
  .u-mx-xl-11 {
    margin-inline: calc(var(--spacer) * 12);
  }
  .u-mx-xl-12 {
    margin-inline: calc(var(--spacer) * 14);
  }
  .u-mx-xl-13 {
    margin-inline: calc(var(--spacer) * 16);
  }
  .u-mx-xl-14 {
    margin-inline: calc(var(--spacer) * 18);
  }
  .u-my-xl-0 {
    margin-block: calc(var(--spacer) * 0);
  }
  .u-my-xl-1 {
    margin-block: calc(var(--spacer) * 0.5);
  }
  .u-my-xl-2 {
    margin-block: calc(var(--spacer));
  }
  .u-my-xl-3 {
    margin-block: calc(var(--spacer) * 1.5);
  }
  .u-my-xl-4 {
    margin-block: calc(var(--spacer) * 2);
  }
  .u-my-xl-5 {
    margin-block: calc(var(--spacer) * 3);
  }
  .u-my-xl-6 {
    margin-block: calc(var(--spacer) * 4);
  }
  .u-my-xl-7 {
    margin-block: calc(var(--spacer) * 5);
  }
  .u-my-xl-8 {
    margin-block: calc(var(--spacer) * 6);
  }
  .u-my-xl-9 {
    margin-block: calc(var(--spacer) * 8);
  }
  .u-my-xl-10 {
    margin-block: calc(var(--spacer) * 10);
  }
  .u-my-xl-11 {
    margin-block: calc(var(--spacer) * 12);
  }
  .u-my-xl-12 {
    margin-block: calc(var(--spacer) * 14);
  }
  .u-my-xl-13 {
    margin-block: calc(var(--spacer) * 16);
  }
  .u-my-xl-14 {
    margin-block: calc(var(--spacer) * 18);
  }
  .u-p-xl-0 {
    padding: calc(var(--spacer) * 0);
  }
  .u-p-xl-1 {
    padding: calc(var(--spacer) * 0.5);
  }
  .u-p-xl-2 {
    padding: calc(var(--spacer));
  }
  .u-p-xl-3 {
    padding: calc(var(--spacer) * 1.5);
  }
  .u-p-xl-4 {
    padding: calc(var(--spacer) * 2);
  }
  .u-p-xl-5 {
    padding: calc(var(--spacer) * 3);
  }
  .u-p-xl-6 {
    padding: calc(var(--spacer) * 4);
  }
  .u-p-xl-7 {
    padding: calc(var(--spacer) * 5);
  }
  .u-p-xl-8 {
    padding: calc(var(--spacer) * 6);
  }
  .u-p-xl-9 {
    padding: calc(var(--spacer) * 8);
  }
  .u-p-xl-10 {
    padding: calc(var(--spacer) * 10);
  }
  .u-p-xl-11 {
    padding: calc(var(--spacer) * 12);
  }
  .u-p-xl-12 {
    padding: calc(var(--spacer) * 14);
  }
  .u-p-xl-13 {
    padding: calc(var(--spacer) * 16);
  }
  .u-p-xl-14 {
    padding: calc(var(--spacer) * 18);
  }
  .u-pt-xl-0 {
    padding-block-start: calc(var(--spacer) * 0);
  }
  .u-pt-xl-1 {
    padding-block-start: calc(var(--spacer) * 0.5);
  }
  .u-pt-xl-2 {
    padding-block-start: calc(var(--spacer));
  }
  .u-pt-xl-3 {
    padding-block-start: calc(var(--spacer) * 1.5);
  }
  .u-pt-xl-4 {
    padding-block-start: calc(var(--spacer) * 2);
  }
  .u-pt-xl-5 {
    padding-block-start: calc(var(--spacer) * 3);
  }
  .u-pt-xl-6 {
    padding-block-start: calc(var(--spacer) * 4);
  }
  .u-pt-xl-7 {
    padding-block-start: calc(var(--spacer) * 5);
  }
  .u-pt-xl-8 {
    padding-block-start: calc(var(--spacer) * 6);
  }
  .u-pt-xl-9 {
    padding-block-start: calc(var(--spacer) * 8);
  }
  .u-pt-xl-10 {
    padding-block-start: calc(var(--spacer) * 10);
  }
  .u-pt-xl-11 {
    padding-block-start: calc(var(--spacer) * 12);
  }
  .u-pt-xl-12 {
    padding-block-start: calc(var(--spacer) * 14);
  }
  .u-pt-xl-13 {
    padding-block-start: calc(var(--spacer) * 16);
  }
  .u-pt-xl-14 {
    padding-block-start: calc(var(--spacer) * 18);
  }
  .u-pl-xl-0 {
    padding-inline-start: calc(var(--spacer) * 0);
  }
  .u-pl-xl-1 {
    padding-inline-start: calc(var(--spacer) * 0.5);
  }
  .u-pl-xl-2 {
    padding-inline-start: calc(var(--spacer));
  }
  .u-pl-xl-3 {
    padding-inline-start: calc(var(--spacer) * 1.5);
  }
  .u-pl-xl-4 {
    padding-inline-start: calc(var(--spacer) * 2);
  }
  .u-pl-xl-5 {
    padding-inline-start: calc(var(--spacer) * 3);
  }
  .u-pl-xl-6 {
    padding-inline-start: calc(var(--spacer) * 4);
  }
  .u-pl-xl-7 {
    padding-inline-start: calc(var(--spacer) * 5);
  }
  .u-pl-xl-8 {
    padding-inline-start: calc(var(--spacer) * 6);
  }
  .u-pl-xl-9 {
    padding-inline-start: calc(var(--spacer) * 8);
  }
  .u-pl-xl-10 {
    padding-inline-start: calc(var(--spacer) * 10);
  }
  .u-pl-xl-11 {
    padding-inline-start: calc(var(--spacer) * 12);
  }
  .u-pl-xl-12 {
    padding-inline-start: calc(var(--spacer) * 14);
  }
  .u-pl-xl-13 {
    padding-inline-start: calc(var(--spacer) * 16);
  }
  .u-pl-xl-14 {
    padding-inline-start: calc(var(--spacer) * 18);
  }
  .u-pr-xl-0 {
    padding-inline-end: calc(var(--spacer) * 0);
  }
  .u-pr-xl-1 {
    padding-inline-end: calc(var(--spacer) * 0.5);
  }
  .u-pr-xl-2 {
    padding-inline-end: calc(var(--spacer));
  }
  .u-pr-xl-3 {
    padding-inline-end: calc(var(--spacer) * 1.5);
  }
  .u-pr-xl-4 {
    padding-inline-end: calc(var(--spacer) * 2);
  }
  .u-pr-xl-5 {
    padding-inline-end: calc(var(--spacer) * 3);
  }
  .u-pr-xl-6 {
    padding-inline-end: calc(var(--spacer) * 4);
  }
  .u-pr-xl-7 {
    padding-inline-end: calc(var(--spacer) * 5);
  }
  .u-pr-xl-8 {
    padding-inline-end: calc(var(--spacer) * 6);
  }
  .u-pr-xl-9 {
    padding-inline-end: calc(var(--spacer) * 8);
  }
  .u-pr-xl-10 {
    padding-inline-end: calc(var(--spacer) * 10);
  }
  .u-pr-xl-11 {
    padding-inline-end: calc(var(--spacer) * 12);
  }
  .u-pr-xl-12 {
    padding-inline-end: calc(var(--spacer) * 14);
  }
  .u-pr-xl-13 {
    padding-inline-end: calc(var(--spacer) * 16);
  }
  .u-pr-xl-14 {
    padding-inline-end: calc(var(--spacer) * 18);
  }
  .u-pb-xl-0 {
    padding-block-end: calc(var(--spacer) * 0);
  }
  .u-pb-xl-1 {
    padding-block-end: calc(var(--spacer) * 0.5);
  }
  .u-pb-xl-2 {
    padding-block-end: calc(var(--spacer));
  }
  .u-pb-xl-3 {
    padding-block-end: calc(var(--spacer) * 1.5);
  }
  .u-pb-xl-4 {
    padding-block-end: calc(var(--spacer) * 2);
  }
  .u-pb-xl-5 {
    padding-block-end: calc(var(--spacer) * 3);
  }
  .u-pb-xl-6 {
    padding-block-end: calc(var(--spacer) * 4);
  }
  .u-pb-xl-7 {
    padding-block-end: calc(var(--spacer) * 5);
  }
  .u-pb-xl-8 {
    padding-block-end: calc(var(--spacer) * 6);
  }
  .u-pb-xl-9 {
    padding-block-end: calc(var(--spacer) * 8);
  }
  .u-pb-xl-10 {
    padding-block-end: calc(var(--spacer) * 10);
  }
  .u-pb-xl-11 {
    padding-block-end: calc(var(--spacer) * 12);
  }
  .u-pb-xl-12 {
    padding-block-end: calc(var(--spacer) * 14);
  }
  .u-pb-xl-13 {
    padding-block-end: calc(var(--spacer) * 16);
  }
  .u-pb-xl-14 {
    padding-block-end: calc(var(--spacer) * 18);
  }
  .u-px-xl-0 {
    padding-inline: calc(var(--spacer) * 0);
  }
  .u-px-xl-1 {
    padding-inline: calc(var(--spacer) * 0.5);
  }
  .u-px-xl-2 {
    padding-inline: calc(var(--spacer));
  }
  .u-px-xl-3 {
    padding-inline: calc(var(--spacer) * 1.5);
  }
  .u-px-xl-4 {
    padding-inline: calc(var(--spacer) * 2);
  }
  .u-px-xl-5 {
    padding-inline: calc(var(--spacer) * 3);
  }
  .u-px-xl-6 {
    padding-inline: calc(var(--spacer) * 4);
  }
  .u-px-xl-7 {
    padding-inline: calc(var(--spacer) * 5);
  }
  .u-px-xl-8 {
    padding-inline: calc(var(--spacer) * 6);
  }
  .u-px-xl-9 {
    padding-inline: calc(var(--spacer) * 8);
  }
  .u-px-xl-10 {
    padding-inline: calc(var(--spacer) * 10);
  }
  .u-px-xl-11 {
    padding-inline: calc(var(--spacer) * 12);
  }
  .u-px-xl-12 {
    padding-inline: calc(var(--spacer) * 14);
  }
  .u-px-xl-13 {
    padding-inline: calc(var(--spacer) * 16);
  }
  .u-px-xl-14 {
    padding-inline: calc(var(--spacer) * 18);
  }
  .u-py-xl-0 {
    padding-block: calc(var(--spacer) * 0);
  }
  .u-py-xl-1 {
    padding-block: calc(var(--spacer) * 0.5);
  }
  .u-py-xl-2 {
    padding-block: calc(var(--spacer));
  }
  .u-py-xl-3 {
    padding-block: calc(var(--spacer) * 1.5);
  }
  .u-py-xl-4 {
    padding-block: calc(var(--spacer) * 2);
  }
  .u-py-xl-5 {
    padding-block: calc(var(--spacer) * 3);
  }
  .u-py-xl-6 {
    padding-block: calc(var(--spacer) * 4);
  }
  .u-py-xl-7 {
    padding-block: calc(var(--spacer) * 5);
  }
  .u-py-xl-8 {
    padding-block: calc(var(--spacer) * 6);
  }
  .u-py-xl-9 {
    padding-block: calc(var(--spacer) * 8);
  }
  .u-py-xl-10 {
    padding-block: calc(var(--spacer) * 10);
  }
  .u-py-xl-11 {
    padding-block: calc(var(--spacer) * 12);
  }
  .u-py-xl-12 {
    padding-block: calc(var(--spacer) * 14);
  }
  .u-py-xl-13 {
    padding-block: calc(var(--spacer) * 16);
  }
  .u-py-xl-14 {
    padding-block: calc(var(--spacer) * 18);
  }
}
/*
Utilisation des suffixes responsive :
class="u-text-right@md"
*/
.u-text-right {
  text-align: right;
}
@media (min-width: 575px) {
  .u-text-right\@xs {
    text-align: right;
  }
}
@media (min-width: 792px) {
  .u-text-right\@sm {
    text-align: right;
  }
}
@media (min-width: 1024px) {
  .u-text-right\@md {
    text-align: right;
  }
}
@media (min-width: 1280px) {
  .u-text-right\@lg {
    text-align: right;
  }
}
@media (min-width: 1450px) {
  .u-text-right\@lg-x {
    text-align: right;
  }
}
@media (min-width: 1600px) {
  .u-text-right\@xl {
    text-align: right;
  }
}

.u-text-center {
  text-align: center;
}
@media (min-width: 575px) {
  .u-text-center\@xs {
    text-align: center;
  }
}
@media (min-width: 792px) {
  .u-text-center\@sm {
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .u-text-center\@md {
    text-align: center;
  }
}
@media (min-width: 1280px) {
  .u-text-center\@lg {
    text-align: center;
  }
}
@media (min-width: 1450px) {
  .u-text-center\@lg-x {
    text-align: center;
  }
}
@media (min-width: 1600px) {
  .u-text-center\@xl {
    text-align: center;
  }
}

/*
Fin de compilation
*/
.u-font-medium {
  font-weight: 500;
}

.u-font-black {
  font-weight: 900;
}

/*
 * Utilitaire permettant une troncature sur un nombre fixe de ligne (par défaut 3)
 * Dans l'HTML, utiliser l'attribut style pour affecter la variable --lines-to-show
 * Exemple, si besoin d'afficher uniquement les 5 premières lignes :
 * <p class="u-truncate" style="--lines-to-show: 5;">...</p>
 */
.u-truncate {
  display: -webkit-box;
  -webkit-line-clamp: var(--lines-to-show, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * Utilitaire pour appliquer les couleurs primaire, secondaire et tertiaire sur un texte
 * Exemple :
 * <p class="u-text-primary">...</p>
 */
.u-text-dark {
  color: var(--color-dark);
}

.u-text-gray-1 {
  color: var(--color-gray-1);
}

.u-text-gray-2 {
  color: var(--color-gray-2);
}

.u-text-gray-3 {
  color: var(--color-gray-3);
}

.u-text-gray-4 {
  color: var(--color-gray-4);
}

.u-text-gray-5 {
  color: var(--color-gray-5);
}

.u-text-gray-6 {
  color: var(--color-gray-6);
}

.u-text-gray-1-1 {
  color: var(--color-gray-1-1);
}

.u-text-gray-2-1 {
  color: var(--color-gray-2-1);
}

.u-text-gray-3-1 {
  color: var(--color-gray-3-1);
}

.u-text-gray-4-1 {
  color: var(--color-gray-4-1);
}

.u-text-gray-5-1 {
  color: var(--color-gray-5-1);
}

.u-text-light {
  color: var(--color-light);
}

.u-text-primary {
  color: var(--color-primary);
}

.u-text-primary-lighter {
  color: var(--color-primary-lighter);
}

.u-text-primary-light {
  color: var(--color-primary-light);
}

.u-text-primary-dark {
  color: var(--color-primary-dark);
}

.u-text-primary-darker {
  color: var(--color-primary-darker);
}

.u-text-secondary {
  color: var(--color-secondary);
}

.u-text-secondary-lighter {
  color: var(--color-secondary-lighter);
}

.u-text-secondary-light {
  color: var(--color-secondary-light);
}

.u-text-secondary-dark {
  color: var(--color-secondary-dark);
}

.u-text-secondary-darker {
  color: var(--color-secondary-darker);
}

.u-text-tertiary {
  color: var(--color-tertiary);
}

.u-text-tertiary-lighter {
  color: var(--color-tertiary-lighter);
}

.u-text-tertiary-light {
  color: var(--color-tertiary-light);
}

.u-text-tertiary-dark {
  color: var(--color-tertiary-dark);
}

.u-text-tertiary-darker {
  color: var(--color-tertiary-darker);
}

.u-cover::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
}

.u-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-img-fluid {
  max-width: 100%;
  height: auto;
}

.u-relative {
  position: relative;
}

.u-overflow-hidden {
  overflow: hidden;
}

.u-rounded {
  border-radius: 50%;
}

.u-sr-only {
  position: absolute;
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

.u-list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Utilitaire pour appliquer les fonds de couleur primaire, secondaire et tertiaire
 * Exemple :
 * <div class="u-bg-primary">...</div>
 */
.u-bg-dark {
  background-color: var(--color-dark);
}

.u-bg-gray-1 {
  background-color: var(--color-gray-1);
}

.u-bg-gray-2 {
  background-color: var(--color-gray-2);
}

.u-bg-gray-3 {
  background-color: var(--color-gray-3);
}

.u-bg-gray-4 {
  background-color: var(--color-gray-4);
}

.u-bg-gray-5 {
  background-color: var(--color-gray-5);
}

.u-bg-gray-6 {
  background-color: var(--color-gray-6);
}

.u-bg-gray-1-1 {
  background-color: var(--color-gray-1-1);
}

.u-bg-gray-2-1 {
  background-color: var(--color-gray-2-1);
}

.u-bg-gray-3-1 {
  background-color: var(--color-gray-3-1);
}

.u-bg-gray-4-1 {
  background-color: var(--color-gray-4-1);
}

.u-bg-gray-5-1 {
  background-color: var(--color-gray-5-1);
}

.u-bg-light {
  background-color: var(--color-light);
}

.u-bg-primary {
  background-color: var(--color-primary);
}

.u-bg-primary-lighter {
  background-color: var(--color-primary-lighter);
}

.u-bg-primary-light {
  background-color: var(--color-primary-light);
}

.u-bg-primary-dark {
  background-color: var(--color-primary-dark);
}

.u-bg-primary-darker {
  background-color: var(--color-primary-darker);
}

.u-bg-secondary {
  background-color: var(--color-secondary);
}

.u-bg-secondary-lighter {
  background-color: var(--color-secondary-lighter);
}

.u-bg-secondary-light {
  background-color: var(--color-secondary-light);
}

.u-bg-secondary-dark {
  background-color: var(--color-secondary-dark);
}

.u-bg-secondary-darker {
  background-color: var(--color-secondary-darker);
}

.u-bg-tertiary {
  background-color: var(--color-tertiary);
}

.u-bg-tertiary-lighter {
  background-color: var(--color-tertiary-lighter);
}

.u-bg-tertiary-light {
  background-color: var(--color-tertiary-light);
}

.u-bg-tertiary-dark {
  background-color: var(--color-tertiary-dark);
}

.u-bg-tertiary-darker {
  background-color: var(--color-tertiary-darker);
}

/*
 * Utilitaire pour appliquer une bordure de 1px avec les couleur primaire, secondaire et tertiaire
 * Exemple :
 * <div class="u-border-primary">...</div>
 */
.u-border-dark {
  border: 1px solid var(--color-dark);
}

.u-border-gray-1 {
  border: 1px solid var(--color-gray-1);
}

.u-border-gray-2 {
  border: 1px solid var(--color-gray-2);
}

.u-border-gray-3 {
  border: 1px solid var(--color-gray-3);
}

.u-border-gray-4 {
  border: 1px solid var(--color-gray-4);
}

.u-border-gray-5 {
  border: 1px solid var(--color-gray-5);
}

.u-border-gray-6 {
  border: 1px solid var(--color-gray-6);
}

.u-border-gray-1-1 {
  border: 1px solid var(--color-gray-1-1);
}

.u-border-gray-2-1 {
  border: 1px solid var(--color-gray-2-1);
}

.u-border-gray-3-1 {
  border: 1px solid var(--color-gray-3-1);
}

.u-border-gray-4-1 {
  border: 1px solid var(--color-gray-4-1);
}

.u-border-gray-5-1 {
  border: 1px solid var(--color-gray-5-1);
}

.u-border-light {
  border: 1px solid var(--color-light);
}

.u-border-primary {
  border: 1px solid var(--color-primary);
}

.u-border-primary-lighter {
  border: 1px solid var(--color-primary-lighter);
}

.u-border-primary-light {
  border: 1px solid var(--color-primary-light);
}

.u-border-primary-dark {
  border: 1px solid var(--color-primary-dark);
}

.u-border-primary-darker {
  border: 1px solid var(--color-primary-darker);
}

.u-border-secondary {
  border: 1px solid var(--color-secondary);
}

.u-border-secondary-lighter {
  border: 1px solid var(--color-secondary-lighter);
}

.u-border-secondary-light {
  border: 1px solid var(--color-secondary-light);
}

.u-border-secondary-dark {
  border: 1px solid var(--color-secondary-dark);
}

.u-border-secondary-darker {
  border: 1px solid var(--color-secondary-darker);
}

.u-border-tertiary {
  border: 1px solid var(--color-tertiary);
}

.u-border-tertiary-lighter {
  border: 1px solid var(--color-tertiary-lighter);
}

.u-border-tertiary-light {
  border: 1px solid var(--color-tertiary-light);
}

.u-border-tertiary-dark {
  border: 1px solid var(--color-tertiary-dark);
}

.u-border-tertiary-darker {
  border: 1px solid var(--color-tertiary-darker);
}

/*# sourceMappingURL=boilerplate.css.map */