/**
 * Margin
 */

.m-a { margin:auto; }
.m-0 { margin:0; }
.m-1 { margin:1lh; }
.m-2 { margin:2lh; }
.m-3 { margin:3lh; }
.m-4 { margin:4lh; }

.mx-a { margin-left:auto; margin-right:auto; }
.mx-0 { margin-left:0; margin-right:0; }
.mx-1 { margin-left:1lh; margin-right:1lh; }
.mx-2 { margin-left:2lh; margin-right:2lh; }
.mx-3 { margin-left:3lh; margin-right:3lh; }
.mx-4 { margin-left:4lh; margin-right:4lh; }

.my-a { margin-top:auto; margin-bottom:auto; }
.my-0 { margin-top:0; margin-bottom:0; }
.my-1 { margin-top:1lh; margin-bottom:1lh; }
.my-2 { margin-top:2lh; margin-bottom:2lh; }
.my-3 { margin-top:3lh; margin-bottom:3lh; }
.my-4 { margin-top:4lh; margin-bottom:4lh; }

.ml-a { margin-left:auto; }
.ml-0 { margin-left:0; }
.ml-1 { margin-left:1lh; }
.ml-2 { margin-left:2lh; }
.ml-3 { margin-left:3lh; }
.ml-4 { margin-left:4lh; }

.mr-a { margin-right:auto; }
.mr-0 { margin-right:0; }
.mr-1 { margin-right:1lh; }
.mr-2 { margin-right:2lh; }
.mr-3 { margin-right:3lh; }
.mr-4 { margin-right:4lh; }

.mt-a { margin-top:auto; }
.mt-0 { margin-top:0; }
.mt-1 { margin-top:1lh; }
.mt-2 { margin-top:2lh; }
.mt-3 { margin-top:3lh; }
.mt-4 { margin-top:4lh; }

.mb-a { margin-bottom:auto; }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:1lh; }
.mb-2 { margin-bottom:2lh; }
.mb-3 { margin-bottom:3lh; }
.mb-4 { margin-bottom:4lh; }

/**
 * Padding
 */

.p-a { padding:auto; }
.p-0 { padding:0; }
.p-1 { padding:1lh; }
.p-2 { padding:2lh; }
.p-3 { padding:3lh; }
.p-4 { padding:4lh; }

.px-a { padding-left:auto; padding-right:auto; }
.px-0 { padding-left:0; padding-right:0; }
.px-1 { padding-left:1lh; padding-right:1lh; }
.px-2 { padding-left:2lh; padding-right:2lh; }
.px-3 { padding-left:3lh; padding-right:3lh; }
.px-4 { padding-left:4lh; padding-right:4lh; }

.py-a { padding-top:auto; padding-bottom:auto; }
.py-0 { padding-top:0; padding-bottom:0; }
.py-1 { padding-top:1lh; padding-bottom:1lh; }
.py-2 { padding-top:2lh; padding-bottom:2lh; }
.py-3 { padding-top:3lh; padding-bottom:3lh; }
.py-4 { padding-top:4lh; padding-bottom:4lh; }

.pl-a { padding-left:auto; }
.pl-0 { padding-left:0; }
.pl-1 { padding-left:1lh; }
.pl-2 { padding-left:2lh; }
.pl-3 { padding-left:3lh; }
.pl-4 { padding-left:4lh; }

.pr-a { padding-right:auto; }
.pr-0 { padding-right:0; }
.pr-1 { padding-right:1lh; }
.pr-2 { padding-right:2lh; }
.pr-3 { padding-right:3lh; }
.pr-4 { padding-right:4lh; }

.pt-a { padding-top:auto; }
.pt-0 { padding-top:0; }
.pt-1 { padding-top:1lh; }
.pt-2 { padding-top:2lh; }
.pt-3 { padding-top:3lh; }
.pt-4 { padding-top:4lh; }

.pb-a { padding-bottom:auto; }
.pb-0 { padding-bottom:0; }
.pb-1 { padding-bottom:1lh; }
.pb-2 { padding-bottom:2lh; }
.pb-3 { padding-bottom:3lh; }
.pb-4 { padding-bottom:4lh; }

/**
 * Border
 */

.b-0 { border:0; }
.b-1 { border:1px solid; }
.b-2 { border:3px solid; }
.b-3 { border:6px solid; }

.bl-0 { border-left:0; }
.bl-1 { border-left:1px solid; }
.bl-2 { border-left:3px solid; }
.bl-3 { border-left:6px solid; }

.br-0 { border-right:0; }
.br-1 { border-right:1px solid; }
.br-2 { border-right:3px solid; }
.br-3 { border-right:6px solid; }

.bt-0 { border-top:0; }
.bt-1 { border-top:1px solid; }
.bt-2 { border-top:3px solid; }
.bt-3 { border-top:6px solid; }

.bb-0 { border-bottom:0; }
.bb-1 { border-bottom:1px solid; }
.bb-2 { border-bottom:3px solid; }
.bb-3 { border-bottom:6px solid; }

/** 
 * Sizing
 */

.h-10 { height:10vh }
.h-20 { height:20vh }
.h-30 { height:30vh }
.h-40 { height:40vh }
.h-50 { height:50vh }
.h-60 { height:60vh }
.h-70 { height:70vh }
.h-80 { height:80vh }
.h-90 { height:90vh }
.h-100 { height:100vh }
.h-f { height:100%; }

.of-c { object-fit:cover; }

/**
 * Grid
 */

[class*="gs-"] > *,
[class*="ge-"] > *,
[class*="gc-"] > * {
    grid-column-start:1;
    grid-column-end:-1;
}

.gs-a { grid-column-start:auto; }
.gs-1 { grid-column-start:1; }
.gs-2 { grid-column-start:2; }
.gs-3 { grid-column-start:3; }
.gs-4 { grid-column-start:4; }
.gs-5 { grid-column-start:5; }
.gs-6 { grid-column-start:6; }
.gs-7 { grid-column-start:7; }
.gs-8 { grid-column-start:8; }
.gs-9 { grid-column-start:9; }
.gs-10 { grid-column-start:10; }
.gs-11 { grid-column-start:11; }

.ge-a { grid-column-end:auto; }
.ge-2 { grid-column-end:2; }
.ge-3 { grid-column-end:3; }
.ge-4 { grid-column-end:4; }
.ge-5 { grid-column-end:5; }
.ge-6 { grid-column-end:6; }
.ge-7 { grid-column-end:7; }
.ge-8 { grid-column-end:8; }
.ge-9 { grid-column-end:9; }
.ge-10 { grid-column-end:10; }
.ge-11 { grid-column-end:11; }
.ge-12 { grid-column-end:12; }

.gc-a { grid-column:1/-1; }
.gc-1 { grid-column-end:span 1; }
.gc-2 { grid-column-end:span 2; }
.gc-3 { grid-column-end:span 3; }
.gc-4 { grid-column-end:span 4; }
.gc-5 { grid-column-end:span 5; }
.gc-6 { grid-column-end:span 6; }
.gc-7 { grid-column-end:span 7; }
.gc-8 { grid-column-end:span 8; }
.gc-9 { grid-column-end:span 9; }
.gc-10 { grid-column-end:span 10; }
.gc-11 { grid-column-end:span 11; }
.gc-12 { grid-column-end:span 12; }


[class*="gs-"],
[class*="ge-"],
[class*="gc-"] {
    display:grid;
    grid-template-columns:subgrid;
    height:fit-content;
    align-items:start;
    align-content:start;
}

[class*="gt-"] { display:grid; height:fit-content; align-items:start; align-content:start; }
.gt-s { grid-template-columns:subgrid; }
.gt-1 { grid-template-columns:repeat(1, 1fr); }
.gt-2 { grid-template-columns:repeat(2, 1fr); }
.gt-3 { grid-template-columns:repeat(3, 1fr); }
.gt-4 { grid-template-columns:repeat(4, 1fr); }
.gt-5 { grid-template-columns:repeat(5, 1fr); }
.gt-6 { grid-template-columns:repeat(6, 1fr); }
.gt-7 { grid-template-columns:repeat(7, 1fr); }
.gt-8 { grid-template-columns:repeat(8, 1fr); }
.gt-9 { grid-template-columns:repeat(9, 1fr); }
.gt-10 { grid-template-columns:repeat(10, 1fr); }
.gt-11 { grid-template-columns:repeat(11, 1fr); }
.gt-12 { grid-template-columns:repeat(12, 1fr); }

.g-0 { gap:0; }
.g-05 { gap:0.5lh; }
.g-1 { gap:1lh; }
.g-2 { gap:2lh; }
.g-3 { gap:3lh; }

.cc-1 { column-count:1; }
.cc-2 { column-count:2; }
.cc-3 { column-count:3; }
.cc-4 { column-count:4; }

.cs-a { column-span:all; }

/**
 * Display
 */

.d-f { display:flex; }
.d-b { display:block; }
.d-i { display:inline; }


/**
 * Alignement
 */

.fg-1 { flex-grow:1; }

.fd-r { flex-direction:row; }
.fd-c { flex-direction:column; }

.jc-s { justify-content:start; }
.jc-e { justify-content:end; }
.jc-c { justify-content:center; }
.jc-sb { justify-content:space-between; }
.jc-sa { justify-content:space-around; }
.jc-se { justify-content:space-evenly; }

.ai-s { align-items:start; }
.ai-e { align-items:end; }

.ta-l { text-align:left; } 
.ta-r { text-align:right; }
.ta-c { text-align:center; }

/**
 * Text
 */

.fw-b { font-weight:bold; }
.fw-n { font-weight:normal; }

.tt-u { text-transform:uppercase; }
.tt-l { text-transform:lowercase; }
.tt-c { text-transform:capitalize; }


/**
 * breakpoint: xl
 */

@media screen and (max-width: 1400px) {

    /* Grid */

    .gs-xl-a { grid-column-start:auto; }
    .gs-xl-1 { grid-column-start:1; }
    .gs-xl-2 { grid-column-start:2; }
    .gs-xl-3 { grid-column-start:3; }
    .gs-xl-4 { grid-column-start:4; }
    .gs-xl-5 { grid-column-start:5; }
    .gs-xl-6 { grid-column-start:6; }
    .gs-xl-7 { grid-column-start:7; }
    .gs-xl-8 { grid-column-start:8; }
    .gs-xl-9 { grid-column-start:9; }
    .gs-xl-10 { grid-column-start:10; }
    .gs-xl-11 { grid-column-start:11; }

    .ge-xl-a { grid-column-end:auto; }
    .ge-xl-2 { grid-column-end:2; }
    .ge-xl-3 { grid-column-end:3; }
    .ge-xl-4 { grid-column-end:4; }
    .ge-xl-5 { grid-column-end:5; }
    .ge-xl-6 { grid-column-end:6; }
    .ge-xl-7 { grid-column-end:7; }
    .ge-xl-8 { grid-column-end:8; }
    .ge-xl-9 { grid-column-end:9; }
    .ge-xl-10 { grid-column-end:10; }
    .ge-xl-11 { grid-column-end:11; }
    .ge-xl-12 { grid-column-end:12; }

    .gc-xl-a { grid-column:1/-1; }
    .gc-xl-1 { grid-column-end:span 1; }
    .gc-xl-2 { grid-column-end:span 2; }
    .gc-xl-3 { grid-column-end:span 3; }
    .gc-xl-4 { grid-column-end:span 4; }
    .gc-xl-5 { grid-column-end:span 5; }
    .gc-xl-6 { grid-column-end:span 6; }
    .gc-xl-7 { grid-column-end:span 7; }
    .gc-xl-8 { grid-column-end:span 8; }
    .gc-xl-9 { grid-column-end:span 9; }
    .gc-xl-10 { grid-column-end:span 10; }
    .gc-xl-11 { grid-column-end:span 11; }
    .gc-xl-12 { grid-column-end:span 12; }

    .gt-xl-s { grid-template-columns:subgrid; }
    .gt-xl-1 { grid-template-columns:repeat(1, 1fr); }
    .gt-xl-2 { grid-template-columns:repeat(2, 1fr); }
    .gt-xl-3 { grid-template-columns:repeat(3, 1fr); }
    .gt-xl-4 { grid-template-columns:repeat(4, 1fr); }
    .gt-xl-5 { grid-template-columns:repeat(5, 1fr); }
    .gt-xl-6 { grid-template-columns:repeat(6, 1fr); }
    .gt-xl-7 { grid-template-columns:repeat(7, 1fr); }
    .gt-xl-8 { grid-template-columns:repeat(8, 1fr); }
    .gt-xl-9 { grid-template-columns:repeat(9, 1fr); }
    .gt-xl-10 { grid-template-columns:repeat(10, 1fr); }
    .gt-xl-11 { grid-template-columns:repeat(11, 1fr); }
    .gt-xl-12 { grid-template-columns:repeat(12, 1fr); }

    .g-xl-0 { gap:0; }
    .g-xl-05 { gap:0.5lh; }
    .g-xl-1 { gap:1lh; }
    .g-xl-2 { gap:2lh; }
    .g-xl-3 { gap:3lh; }

    .cc-xl-1 { column-count:1; }
    .cc-xl-2 { column-count:2; }
    .cc-xl-3 { column-count:3; }
    .cc-xl-4 { column-count:4; }

    /* Margin */

    .m-xl-a { margin:auto; }
    .m-xl-0 { margin:0; }
    .m-xl-1 { margin:1lh; }
    .m-xl-2 { margin:2lh; }
    .m-xl-3 { margin:3lh; }
    .m-xl-4 { margin:4lh; }

    .mx-xl-a { margin-left:auto; margin-right:auto; }
    .mx-xl-0 { margin-left:0; margin-right:0; }
    .mx-xl-1 { margin-left:1lh; margin-right:1lh; }
    .mx-xl-2 { margin-left:2lh; margin-right:2lh; }
    .mx-xl-3 { margin-left:3lh; margin-right:3lh; }
    .mx-xl-4 { margin-left:4lh; margin-right:4lh; }

    .my-xl-a { margin-top:auto; margin-bottom:auto; }
    .my-xl-0 { margin-top:0; margin-bottom:0; }
    .my-xl-1 { margin-top:1lh; margin-bottom:1lh; }
    .my-xl-2 { margin-top:2lh; margin-bottom:2lh; }
    .my-xl-3 { margin-top:3lh; margin-bottom:3lh; }
    .my-xl-4 { margin-top:4lh; margin-bottom:4lh; }

    .ml-xl-a { margin-left:auto; }
    .ml-xl-0 { margin-left:0; }
    .ml-xl-1 { margin-left:1lh; }
    .ml-xl-2 { margin-left:2lh; }
    .ml-xl-3 { margin-left:3lh; }
    .ml-xl-4 { margin-left:4lh; }

    .mr-xl-a { margin-right:auto; }
    .mr-xl-0 { margin-right:0; }
    .mr-xl-1 { margin-right:1lh; }
    .mr-xl-2 { margin-right:2lh; }
    .mr-xl-3 { margin-right:3lh; }
    .mr-xl-4 { margin-right:4lh; }

    .mt-xl-a { margin-top:auto; }
    .mt-xl-0 { margin-top:0; }
    .mt-xl-1 { margin-top:1lh; }
    .mt-xl-2 { margin-top:2lh; }
    .mt-xl-3 { margin-top:3lh; }
    .mt-xl-4 { margin-top:4lh; }

    .mb-xl-a { margin-bottom:auto; }
    .mb-xl-0 { margin-bottom:0; }
    .mb-xl-1 { margin-bottom:1lh; }
    .mb-xl-2 { margin-bottom:2lh; }
    .mb-xl-3 { margin-bottom:3lh; }
    .mb-xl-4 { margin-bottom:4lh; }

    /* Padding */

    .p-xl-a { padding:auto; }
    .p-xl-0 { padding:0; }
    .p-xl-1 { padding:1lh; }
    .p-xl-2 { padding:2lh; }
    .p-xl-3 { padding:3lh; }
    .p-xl-4 { padding:4lh; }

    .px-xl-a { padding-left:auto; padding-right:auto; }
    .px-xl-0 { padding-left:0; padding-right:0; }
    .px-xl-1 { padding-left:1lh; padding-right:1lh; }
    .px-xl-2 { padding-left:2lh; padding-right:2lh; }
    .px-xl-3 { padding-left:3lh; padding-right:3lh; }
    .px-xl-4 { padding-left:4lh; padding-right:4lh; }

    .py-xl-a { padding-top:auto; padding-bottom:auto; }
    .py-xl-0 { padding-top:0; padding-bottom:0; }
    .py-xl-1 { padding-top:1lh; padding-bottom:1lh; }
    .py-xl-2 { padding-top:2lh; padding-bottom:2lh; }
    .py-xl-3 { padding-top:3lh; padding-bottom:3lh; }
    .py-xl-4 { padding-top:4lh; padding-bottom:4lh; }

    .pl-xl-a { padding-left:auto; }
    .pl-xl-0 { padding-left:0; }
    .pl-xl-1 { padding-left:1lh; }
    .pl-xl-2 { padding-left:2lh; }
    .pl-xl-3 { padding-left:3lh; }
    .pl-xl-4 { padding-left:4lh; }

    .pr-xl-a { padding-right:auto; }
    .pr-xl-0 { padding-right:0; }
    .pr-xl-1 { padding-right:1lh; }
    .pr-xl-2 { padding-right:2lh; }
    .pr-xl-3 { padding-right:3lh; }
    .pr-xl-4 { padding-right:4lh; }

    .pt-xl-a { padding-top:auto; }
    .pt-xl-0 { padding-top:0; }
    .pt-xl-1 { padding-top:1lh; }
    .pt-xl-2 { padding-top:2lh; }
    .pt-xl-3 { padding-top:3lh; }
    .pt-xl-4 { padding-top:4lh; }

    .pb-xl-a { padding-bottom:auto; }
    .pb-xl-0 { padding-bottom:0; }
    .pb-xl-1 { padding-bottom:1lh; }
    .pb-xl-2 { padding-bottom:2lh; }
    .pb-xl-3 { padding-bottom:3lh; }
    .pb-xl-4 { padding-bottom:4lh; }

    /* Border */

    .b-xl-0 { border:0; }
    .b-xl-1 { border:1px solid; }
    .b-xl-2 { border:3px solid; }
    .b-xl-3 { border:6px solid; }

    .bl-xl-0 { border-left:0; }
    .bl-xl-1 { border-left:1px solid; }
    .bl-xl-2 { border-left:3px solid; }
    .bl-xl-3 { border-left:6px solid; }

    .br-xl-0 { border-right:0; }
    .br-xl-1 { border-right:1px solid; }
    .br-xl-2 { border-right:3px solid; }
    .br-xl-3 { border-right:6px solid; }

    .bt-xl-0 { border-top:0; }
    .bt-xl-1 { border-top:1px solid; }
    .bt-xl-2 { border-top:3px solid; }
    .bt-xl-3 { border-top:6px solid; }

    .bb-xl-0 { border-bottom:0; }
    .bb-xl-1 { border-bottom:1px solid; }
    .bb-xl-2 { border-bottom:3px solid; }
    .bb-xl-3 { border-bottom:6px solid; }

    /* Sizing */

    .h-xl-10 { height:10vh }
    .h-xl-20 { height:20vh }
    .h-xl-30 { height:30vh }
    .h-xl-40 { height:40vh }
    .h-xl-50 { height:50vh }
    .h-xl-60 { height:60vh }
    .h-xl-70 { height:70vh }
    .h-xl-80 { height:80vh }
    .h-xl-90 { height:90vh }
    .h-xl-100 { height:100vh }
    .h-xl-f { height:100%; }

    /* Display */

    .d-xl-f { display:flex; }
    .d-xl-b { display:block; }
    .d-xl-i { display:inline; }

    /* Alignement */

    .fg-xl-1 { flex-grow:1; }

    .fd-xl-r { flex-direction:row; }
    .fd-xl-c { flex-direction:column; }

    .jc-xl-s { justify-content:start; }
    .jc-xl-e { justify-content:end; }
    .jc-xl-c { justify-content:center; }
    .jc-xl-sb { justify-content:space-between; }
    .jc-xl-sa { justify-content:space-around; }
    .jc-xl-se { justify-content:space-evenly; }

    .ai-xl-s { align-items:start; }
    .ai-xl-e { align-items:end; }

    .ta-xl-l { text-align:left; } 
    .ta-xl-r { text-align:right; }
    .ta-xl-c { text-align:center; }

}

/**
 * breakpoint: lg
 */

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

    /* Grid */

    .gs-lg-a { grid-column-start:auto; }
    .gs-lg-1 { grid-column-start:1; }
    .gs-lg-2 { grid-column-start:2; }
    .gs-lg-3 { grid-column-start:3; }
    .gs-lg-4 { grid-column-start:4; }
    .gs-lg-5 { grid-column-start:5; }
    .gs-lg-6 { grid-column-start:6; }
    .gs-lg-7 { grid-column-start:7; }
    .gs-lg-8 { grid-column-start:8; }
    .gs-lg-9 { grid-column-start:9; }
    .gs-lg-10 { grid-column-start:10; }
    .gs-lg-11 { grid-column-start:11; }

    .ge-lg-a { grid-column-end:auto; }
    .ge-lg-2 { grid-column-end:2; }
    .ge-lg-3 { grid-column-end:3; }
    .ge-lg-4 { grid-column-end:4; }
    .ge-lg-5 { grid-column-end:5; }
    .ge-lg-6 { grid-column-end:6; }
    .ge-lg-7 { grid-column-end:7; }
    .ge-lg-8 { grid-column-end:8; }
    .ge-lg-9 { grid-column-end:9; }
    .ge-lg-10 { grid-column-end:10; }
    .ge-lg-11 { grid-column-end:11; }
    .ge-lg-12 { grid-column-end:12; }

    .gc-lg-a { grid-column:1/-1; }
    .gc-lg-1 { grid-column-end:span 1; }
    .gc-lg-2 { grid-column-end:span 2; }
    .gc-lg-3 { grid-column-end:span 3; }
    .gc-lg-4 { grid-column-end:span 4; }
    .gc-lg-5 { grid-column-end:span 5; }
    .gc-lg-6 { grid-column-end:span 6; }
    .gc-lg-7 { grid-column-end:span 7; }
    .gc-lg-8 { grid-column-end:span 8; }
    .gc-lg-9 { grid-column-end:span 9; }
    .gc-lg-10 { grid-column-end:span 10; }
    .gc-lg-11 { grid-column-end:span 11; }
    .gc-lg-12 { grid-column-end:span 12; }

    .gt-lg-s { grid-template-columns:subgrid; }
    .gt-lg-1 { grid-template-columns:repeat(1, 1fr); }
    .gt-lg-2 { grid-template-columns:repeat(2, 1fr); }
    .gt-lg-3 { grid-template-columns:repeat(3, 1fr); }
    .gt-lg-4 { grid-template-columns:repeat(4, 1fr); }
    .gt-lg-5 { grid-template-columns:repeat(5, 1fr); }
    .gt-lg-6 { grid-template-columns:repeat(6, 1fr); }
    .gt-lg-7 { grid-template-columns:repeat(7, 1fr); }
    .gt-lg-8 { grid-template-columns:repeat(8, 1fr); }
    .gt-lg-9 { grid-template-columns:repeat(9, 1fr); }
    .gt-lg-10 { grid-template-columns:repeat(10, 1fr); }
    .gt-lg-11 { grid-template-columns:repeat(11, 1fr); }
    .gt-lg-12 { grid-template-columns:repeat(12, 1fr); }

    .g-lg-0 { gap:0; }
    .g-lg-05 { gap:0.5lh; }
    .g-lg-1 { gap:1lh; }
    .g-lg-2 { gap:2lh; }
    .g-lg-3 { gap:3lh; }

    .cc-lg-1 { column-count:1; }
    .cc-lg-2 { column-count:2; }
    .cc-lg-3 { column-count:3; }
    .cc-lg-4 { column-count:4; }

    /* Margin */

    .m-lg-a { margin:auto; }
    .m-lg-0 { margin:0; }
    .m-lg-1 { margin:1lh; }
    .m-lg-2 { margin:2lh; }
    .m-lg-3 { margin:3lh; }
    .m-lg-4 { margin:4lh; }

    .mx-lg-a { margin-left:auto; margin-right:auto; }
    .mx-lg-0 { margin-left:0; margin-right:0; }
    .mx-lg-1 { margin-left:1lh; margin-right:1lh; }
    .mx-lg-2 { margin-left:2lh; margin-right:2lh; }
    .mx-lg-3 { margin-left:3lh; margin-right:3lh; }
    .mx-lg-4 { margin-left:4lh; margin-right:4lh; }

    .my-lg-a { margin-top:auto; margin-bottom:auto; }
    .my-lg-0 { margin-top:0; margin-bottom:0; }
    .my-lg-1 { margin-top:1lh; margin-bottom:1lh; }
    .my-lg-2 { margin-top:2lh; margin-bottom:2lh; }
    .my-lg-3 { margin-top:3lh; margin-bottom:3lh; }
    .my-lg-4 { margin-top:4lh; margin-bottom:4lh; }

    .ml-lg-a { margin-left:auto; }
    .ml-lg-0 { margin-left:0; }
    .ml-lg-1 { margin-left:1lh; }
    .ml-lg-2 { margin-left:2lh; }
    .ml-lg-3 { margin-left:3lh; }
    .ml-lg-4 { margin-left:4lh; }

    .mr-lg-a { margin-right:auto; }
    .mr-lg-0 { margin-right:0; }
    .mr-lg-1 { margin-right:1lh; }
    .mr-lg-2 { margin-right:2lh; }
    .mr-lg-3 { margin-right:3lh; }
    .mr-lg-4 { margin-right:4lh; }

    .mt-lg-a { margin-top:auto; }
    .mt-lg-0 { margin-top:0; }
    .mt-lg-1 { margin-top:1lh; }
    .mt-lg-2 { margin-top:2lh; }
    .mt-lg-3 { margin-top:3lh; }
    .mt-lg-4 { margin-top:4lh; }

    .mb-lg-a { margin-bottom:auto; }
    .mb-lg-0 { margin-bottom:0; }
    .mb-lg-1 { margin-bottom:1lh; }
    .mb-lg-2 { margin-bottom:2lh; }
    .mb-lg-3 { margin-bottom:3lh; }
    .mb-lg-4 { margin-bottom:4lh; }
    
    /* Padding */

    .p-lg-a { padding:auto; }
    .p-lg-0 { padding:0; }
    .p-lg-1 { padding:1lh; }
    .p-lg-2 { padding:2lh; }
    .p-lg-3 { padding:3lh; }
    .p-lg-4 { padding:4lh; }

    .px-lg-a { padding-left:auto; padding-right:auto; }
    .px-lg-0 { padding-left:0; padding-right:0; }
    .px-lg-1 { padding-left:1lh; padding-right:1lh; }
    .px-lg-2 { padding-left:2lh; padding-right:2lh; }
    .px-lg-3 { padding-left:3lh; padding-right:3lh; }
    .px-lg-4 { padding-left:4lh; padding-right:4lh; }

    .py-lg-a { padding-top:auto; padding-bottom:auto; }
    .py-lg-0 { padding-top:0; padding-bottom:0; }
    .py-lg-1 { padding-top:1lh; padding-bottom:1lh; }
    .py-lg-2 { padding-top:2lh; padding-bottom:2lh; }
    .py-lg-3 { padding-top:3lh; padding-bottom:3lh; }
    .py-lg-4 { padding-top:4lh; padding-bottom:4lh; }

    .pl-lg-a { padding-left:auto; }
    .pl-lg-0 { padding-left:0; }
    .pl-lg-1 { padding-left:1lh; }
    .pl-lg-2 { padding-left:2lh; }
    .pl-lg-3 { padding-left:3lh; }
    .pl-lg-4 { padding-left:4lh; }

    .pr-lg-a { padding-right:auto; }
    .pr-lg-0 { padding-right:0; }
    .pr-lg-1 { padding-right:1lh; }
    .pr-lg-2 { padding-right:2lh; }
    .pr-lg-3 { padding-right:3lh; }
    .pr-lg-4 { padding-right:4lh; }

    .pt-lg-a { padding-top:auto; }
    .pt-lg-0 { padding-top:0; }
    .pt-lg-1 { padding-top:1lh; }
    .pt-lg-2 { padding-top:2lh; }
    .pt-lg-3 { padding-top:3lh; }
    .pt-lg-4 { padding-top:4lh; }

    .pb-lg-a { padding-bottom:auto; }
    .pb-lg-0 { padding-bottom:0; }
    .pb-lg-1 { padding-bottom:1lh; }
    .pb-lg-2 { padding-bottom:2lh; }
    .pb-lg-3 { padding-bottom:3lh; }
    .pb-lg-4 { padding-bottom:4lh; }

    /* Border */

    .b-lg-0 { border:0; }
    .b-lg-1 { border:1px solid; }
    .b-lg-2 { border:3px solid; }
    .b-lg-3 { border:6px solid; }

    .bl-lg-0 { border-left:0; }
    .bl-lg-1 { border-left:1px solid; }
    .bl-lg-2 { border-left:3px solid; }
    .bl-lg-3 { border-left:6px solid; }

    .br-lg-0 { border-right:0; }
    .br-lg-1 { border-right:1px solid; }
    .br-lg-2 { border-right:3px solid; }
    .br-lg-3 { border-right:6px solid; }

    .bt-lg-0 { border-top:0; }
    .bt-lg-1 { border-top:1px solid; }
    .bt-lg-2 { border-top:3px solid; }
    .bt-lg-3 { border-top:6px solid; }

    .bb-lg-0 { border-bottom:0; }
    .bb-lg-1 { border-bottom:1px solid; }
    .bb-lg-2 { border-bottom:3px solid; }
    .bb-lg-3 { border-bottom:6px solid; }

    /* Sizing */

    .h-lg-10 { height:10vh }
    .h-lg-20 { height:20vh }
    .h-lg-30 { height:30vh }
    .h-lg-40 { height:40vh }
    .h-lg-50 { height:50vh }
    .h-lg-60 { height:60vh }
    .h-lg-70 { height:70vh }
    .h-lg-80 { height:80vh }
    .h-lg-90 { height:90vh }
    .h-lg-100 { height:100vh }
    .h-lg-f { height:100%; }

    /* Display */

    .d-lg-f { display:flex; }
    .d-lg-b { display:block; }
    .d-lg-i { display:inline; }

    /* Alignement */

    .fg-lg-1 { flex-grow:1; }

    .fd-lg-r { flex-direction:row; }
    .fd-lg-c { flex-direction:column; }

    .jc-lg-s { justify-content:start; }
    .jc-lg-e { justify-content:end; }
    .jc-lg-c { justify-content:center; }
    .jc-lg-sb { justify-content:space-between; }
    .jc-lg-sa { justify-content:space-around; }
    .jc-lg-se { justify-content:space-evenly; }

    .ai-lg-s { align-items:start; }
    .ai-lg-e { align-items:end; }

    .ta-lg-l { text-align:left; } 
    .ta-lg-r { text-align:right; }
    .ta-lg-c { text-align:center; }

}

/**
 * breakpoint: md
 */

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

    /* Grid */

    .gs-md-a { grid-column-start:auto; }
    .gs-md-1 { grid-column-start:1; }
    .gs-md-2 { grid-column-start:2; }
    .gs-md-3 { grid-column-start:3; }
    .gs-md-4 { grid-column-start:4; }
    .gs-md-5 { grid-column-start:5; }
    .gs-md-6 { grid-column-start:6; }
    .gs-md-7 { grid-column-start:7; }
    .gs-md-8 { grid-column-start:8; }
    .gs-md-9 { grid-column-start:9; }
    .gs-md-10 { grid-column-start:10; }
    .gs-md-11 { grid-column-start:11; }

    .ge-md-a { grid-column-end:auto; }
    .ge-md-2 { grid-column-end:2; }
    .ge-md-3 { grid-column-end:3; }
    .ge-md-4 { grid-column-end:4; }
    .ge-md-5 { grid-column-end:5; }
    .ge-md-6 { grid-column-end:6; }
    .ge-md-7 { grid-column-end:7; }
    .ge-md-8 { grid-column-end:8; }
    .ge-md-9 { grid-column-end:9; }
    .ge-md-10 { grid-column-end:10; }
    .ge-md-11 { grid-column-end:11; }
    .ge-md-12 { grid-column-end:12; }

    .gc-md-a { grid-column:1/-1; }
    .gc-md-1 { grid-column-end:span 1; }
    .gc-md-2 { grid-column-end:span 2; }
    .gc-md-3 { grid-column-end:span 3; }
    .gc-md-4 { grid-column-end:span 4; }
    .gc-md-5 { grid-column-end:span 5; }
    .gc-md-6 { grid-column-end:span 6; }
    .gc-md-7 { grid-column-end:span 7; }
    .gc-md-8 { grid-column-end:span 8; }
    .gc-md-9 { grid-column-end:span 9; }
    .gc-md-10 { grid-column-end:span 10; }
    .gc-md-11 { grid-column-end:span 11; }
    .gc-md-12 { grid-column-end:span 12; }

    .gt-md-s { grid-template-columns:subgrid; }
    .gt-md-1 { grid-template-columns:repeat(1, 1fr); }
    .gt-md-2 { grid-template-columns:repeat(2, 1fr); }
    .gt-md-3 { grid-template-columns:repeat(3, 1fr); }
    .gt-md-4 { grid-template-columns:repeat(4, 1fr); }
    .gt-md-5 { grid-template-columns:repeat(5, 1fr); }
    .gt-md-6 { grid-template-columns:repeat(6, 1fr); }
    .gt-md-7 { grid-template-columns:repeat(7, 1fr); }
    .gt-md-8 { grid-template-columns:repeat(8, 1fr); }
    .gt-md-9 { grid-template-columns:repeat(9, 1fr); }
    .gt-md-10 { grid-template-columns:repeat(10, 1fr); }
    .gt-md-11 { grid-template-columns:repeat(11, 1fr); }
    .gt-md-12 { grid-template-columns:repeat(12, 1fr); }

    .g-md-0 { gap:0; }
    .g-md-05 { gap:0.5lh; }
    .g-md-1 { gap:1lh; }
    .g-md-2 { gap:2lh; }
    .g-md-3 { gap:3lh; }

    .cc-md-1 { column-count:1; }
    .cc-md-2 { column-count:2; }
    .cc-md-3 { column-count:3; }
    .cc-md-4 { column-count:4; }

    /* Margin */

    .m-md-a { margin:auto; }
    .m-md-0 { margin:0; }
    .m-md-1 { margin:1lh; }
    .m-md-2 { margin:2lh; }
    .m-md-3 { margin:3lh; }
    .m-md-4 { margin:4lh; }

    .mx-md-a { margin-left:auto; margin-right:auto; }
    .mx-md-0 { margin-left:0; margin-right:0; }
    .mx-md-1 { margin-left:1lh; margin-right:1lh; }
    .mx-md-2 { margin-left:2lh; margin-right:2lh; }
    .mx-md-3 { margin-left:3lh; margin-right:3lh; }
    .mx-md-4 { margin-left:4lh; margin-right:4lh; }

    .my-md-a { margin-top:auto; margin-bottom:auto; }
    .my-md-0 { margin-top:0; margin-bottom:0; }
    .my-md-1 { margin-top:1lh; margin-bottom:1lh; }
    .my-md-2 { margin-top:2lh; margin-bottom:2lh; }
    .my-md-3 { margin-top:3lh; margin-bottom:3lh; }
    .my-md-4 { margin-top:4lh; margin-bottom:4lh; }

    .ml-md-a { margin-left:auto; }
    .ml-md-0 { margin-left:0; }
    .ml-md-1 { margin-left:1lh; }
    .ml-md-2 { margin-left:2lh; }
    .ml-md-3 { margin-left:3lh; }
    .ml-md-4 { margin-left:4lh; }

    .mr-md-a { margin-right:auto; }
    .mr-md-0 { margin-right:0; }
    .mr-md-1 { margin-right:1lh; }
    .mr-md-2 { margin-right:2lh; }
    .mr-md-3 { margin-right:3lh; }
    .mr-md-4 { margin-right:4lh; }

    .mt-md-a { margin-top:auto; }
    .mt-md-0 { margin-top:0; }
    .mt-md-1 { margin-top:1lh; }
    .mt-md-2 { margin-top:2lh; }
    .mt-md-3 { margin-top:3lh; }
    .mt-md-4 { margin-top:4lh; }

    .mb-md-a { margin-bottom:auto; }
    .mb-md-0 { margin-bottom:0; }
    .mb-md-1 { margin-bottom:1lh; }
    .mb-md-2 { margin-bottom:2lh; }
    .mb-md-3 { margin-bottom:3lh; }
    .mb-md-4 { margin-bottom:4lh; }

    /* Padding */

    .p-md-a { padding:auto; }
    .p-md-0 { padding:0; }
    .p-md-1 { padding:1lh; }
    .p-md-2 { padding:2lh; }
    .p-md-3 { padding:3lh; }
    .p-md-4 { padding:4lh; }

    .px-md-a { padding-left:auto; padding-right:auto; }
    .px-md-0 { padding-left:0; padding-right:0; }
    .px-md-1 { padding-left:1lh; padding-right:1lh; }
    .px-md-2 { padding-left:2lh; padding-right:2lh; }
    .px-md-3 { padding-left:3lh; padding-right:3lh; }
    .px-md-4 { padding-left:4lh; padding-right:4lh; }

    .py-md-a { padding-top:auto; padding-bottom:auto; }
    .py-md-0 { padding-top:0; padding-bottom:0; }
    .py-md-1 { padding-top:1lh; padding-bottom:1lh; }
    .py-md-2 { padding-top:2lh; padding-bottom:2lh; }
    .py-md-3 { padding-top:3lh; padding-bottom:3lh; }
    .py-md-4 { padding-top:4lh; padding-bottom:4lh; }

    .pl-md-a { padding-left:auto; }
    .pl-md-0 { padding-left:0; }
    .pl-md-1 { padding-left:1lh; }
    .pl-md-2 { padding-left:2lh; }
    .pl-md-3 { padding-left:3lh; }
    .pl-md-4 { padding-left:4lh; }

    .pr-md-a { padding-right:auto; }
    .pr-md-0 { padding-right:0; }
    .pr-md-1 { padding-right:1lh; }
    .pr-md-2 { padding-right:2lh; }
    .pr-md-3 { padding-right:3lh; }
    .pr-md-4 { padding-right:4lh; }

    .pt-md-a { padding-top:auto; }
    .pt-md-0 { padding-top:0; }
    .pt-md-1 { padding-top:1lh; }
    .pt-md-2 { padding-top:2lh; }
    .pt-md-3 { padding-top:3lh; }
    .pt-md-4 { padding-top:4lh; }

    .pb-md-a { padding-bottom:auto; }
    .pb-md-0 { padding-bottom:0; }
    .pb-md-1 { padding-bottom:1lh; }
    .pb-md-2 { padding-bottom:2lh; }
    .pb-md-3 { padding-bottom:3lh; }
    .pb-md-4 { padding-bottom:4lh; }

    /* Border */

    .b-md-0 { border:0; }
    .b-md-1 { border:1px solid; }
    .b-md-2 { border:3px solid; }
    .b-md-3 { border:6px solid; }

    .bl-md-0 { border-left:0; }
    .bl-md-1 { border-left:1px solid; }
    .bl-md-2 { border-left:3px solid; }
    .bl-md-3 { border-left:6px solid; }

    .br-md-0 { border-right:0; }
    .br-md-1 { border-right:1px solid; }
    .br-md-2 { border-right:3px solid; }
    .br-md-3 { border-right:6px solid; }

    .bt-md-0 { border-top:0; }
    .bt-md-1 { border-top:1px solid; }
    .bt-md-2 { border-top:3px solid; }
    .bt-md-3 { border-top:6px solid; }

    .bb-md-0 { border-bottom:0; }
    .bb-md-1 { border-bottom:1px solid; }
    .bb-md-2 { border-bottom:3px solid; }
    .bb-md-3 { border-bottom:6px solid; }

    /* Sizing */

    .h-md-10 { height:10vh }
    .h-md-20 { height:20vh }
    .h-md-30 { height:30vh }
    .h-md-40 { height:40vh }
    .h-md-50 { height:50vh }
    .h-md-60 { height:60vh }
    .h-md-70 { height:70vh }
    .h-md-80 { height:80vh }
    .h-md-90 { height:90vh }
    .h-md-100 { height:100vh }
    .h-md-f { height:100%; }

    /* Display */

    .d-md-f { display:flex; }
    .d-md-b { display:block; }
    .d-md-i { display:inline; }

    /* Alignement */

    .fg-md-1 { flex-grow:1; }

    .fd-md-r { flex-direction:row; }
    .fd-md-c { flex-direction:column; }

    .jc-md-s { justify-content:start; }
    .jc-md-e { justify-content:end; }
    .jc-md-c { justify-content:center; }
    .jc-md-sb { justify-content:space-between; }
    .jc-md-sa { justify-content:space-around; }
    .jc-md-se { justify-content:space-evenly; }

    .ai-md-s { align-items:start; }
    .ai-md-e { align-items:end; }

    .ta-md-l { text-align:left; } 
    .ta-md-r { text-align:right; }
    .ta-md-c { text-align:center; }

}

/**
 * breakpoint: sm
 */

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

    .gs-sm-a { grid-column-start:auto; }
    .gs-sm-1 { grid-column-start:1; }
    .gs-sm-2 { grid-column-start:2; }
    .gs-sm-3 { grid-column-start:3; }
    .gs-sm-4 { grid-column-start:4; }
    .gs-sm-5 { grid-column-start:5; }
    .gs-sm-6 { grid-column-start:6; }
    .gs-sm-7 { grid-column-start:7; }
    .gs-sm-8 { grid-column-start:8; }
    .gs-sm-9 { grid-column-start:9; }
    .gs-sm-10 { grid-column-start:10; }
    .gs-sm-11 { grid-column-start:11; }

    .ge-sm-a { grid-column-end:auto; }
    .ge-sm-2 { grid-column-end:2; }
    .ge-sm-3 { grid-column-end:3; }
    .ge-sm-4 { grid-column-end:4; }
    .ge-sm-5 { grid-column-end:5; }
    .ge-sm-6 { grid-column-end:6; }
    .ge-sm-7 { grid-column-end:7; }
    .ge-sm-8 { grid-column-end:8; }
    .ge-sm-9 { grid-column-end:9; }
    .ge-sm-10 { grid-column-end:10; }
    .ge-sm-11 { grid-column-end:11; }
    .ge-sm-12 { grid-column-end:12; }

    .gc-sm-a { grid-column:1/-1; }
    .gc-sm-1 { grid-column-end:span 1; }
    .gc-sm-2 { grid-column-end:span 2; }
    .gc-sm-3 { grid-column-end:span 3; }
    .gc-sm-4 { grid-column-end:span 4; }
    .gc-sm-5 { grid-column-end:span 5; }
    .gc-sm-6 { grid-column-end:span 6; }
    .gc-sm-7 { grid-column-end:span 7; }
    .gc-sm-8 { grid-column-end:span 8; }
    .gc-sm-9 { grid-column-end:span 9; }
    .gc-sm-10 { grid-column-end:span 10; }
    .gc-sm-11 { grid-column-end:span 11; }
    .gc-sm-12 { grid-column-end:span 12; }

    .gt-sm-s { grid-template-columns:subgrid; }
    .gt-sm-1 { grid-template-columns:repeat(1, 1fr); }
    .gt-sm-2 { grid-template-columns:repeat(2, 1fr); }
    .gt-sm-3 { grid-template-columns:repeat(3, 1fr); }
    .gt-sm-4 { grid-template-columns:repeat(4, 1fr); }
    .gt-sm-5 { grid-template-columns:repeat(5, 1fr); }
    .gt-sm-6 { grid-template-columns:repeat(6, 1fr); }
    .gt-sm-7 { grid-template-columns:repeat(7, 1fr); }
    .gt-sm-8 { grid-template-columns:repeat(8, 1fr); }
    .gt-sm-9 { grid-template-columns:repeat(9, 1fr); }
    .gt-sm-10 { grid-template-columns:repeat(10, 1fr); }
    .gt-sm-11 { grid-template-columns:repeat(11, 1fr); }
    .gt-sm-12 { grid-template-columns:repeat(12, 1fr); }

    .g-sm-0 { gap:0; }
    .g-sm-05 { gap:0.5lh; }
    .g-sm-1 { gap:1lh; }
    .g-sm-2 { gap:2lh; }
    .g-sm-3 { gap:3lh; }

    .cc-sm-1 { column-count:1; }
    .cc-sm-2 { column-count:2; }
    .cc-sm-3 { column-count:3; }
    .cc-sm-4 { column-count:4; }

    /* Margin */

    .m-sm-a { margin:auto; }
    .m-sm-0 { margin:0; }
    .m-sm-1 { margin:1lh; }
    .m-sm-2 { margin:2lh; }
    .m-sm-3 { margin:3lh; }
    .m-sm-4 { margin:4lh; }

    .mx-sm-a { margin-left:auto; margin-right:auto; }
    .mx-sm-0 { margin-left:0; margin-right:0; }
    .mx-sm-1 { margin-left:1lh; margin-right:1lh; }
    .mx-sm-2 { margin-left:2lh; margin-right:2lh; }
    .mx-sm-3 { margin-left:3lh; margin-right:3lh; }
    .mx-sm-4 { margin-left:4lh; margin-right:4lh; }

    .my-sm-a { margin-top:auto; margin-bottom:auto; }
    .my-sm-0 { margin-top:0; margin-bottom:0; }
    .my-sm-1 { margin-top:1lh; margin-bottom:1lh; }
    .my-sm-2 { margin-top:2lh; margin-bottom:2lh; }
    .my-sm-3 { margin-top:3lh; margin-bottom:3lh; }
    .my-sm-4 { margin-top:4lh; margin-bottom:4lh; }

    .ml-sm-a { margin-left:auto; }
    .ml-sm-0 { margin-left:0; }
    .ml-sm-1 { margin-left:1lh; }
    .ml-sm-2 { margin-left:2lh; }
    .ml-sm-3 { margin-left:3lh; }
    .ml-sm-4 { margin-left:4lh; }

    .mr-sm-a { margin-right:auto; }
    .mr-sm-0 { margin-right:0; }
    .mr-sm-1 { margin-right:1lh; }
    .mr-sm-2 { margin-right:2lh; }
    .mr-sm-3 { margin-right:3lh; }
    .mr-sm-4 { margin-right:4lh; }

    .mt-sm-a { margin-top:auto; }
    .mt-sm-0 { margin-top:0; }
    .mt-sm-1 { margin-top:1lh; }
    .mt-sm-2 { margin-top:2lh; }
    .mt-sm-3 { margin-top:3lh; }
    .mt-sm-4 { margin-top:4lh; }

    .mb-sm-a { margin-bottom:auto; }
    .mb-sm-0 { margin-bottom:0; }
    .mb-sm-1 { margin-bottom:1lh; }
    .mb-sm-2 { margin-bottom:2lh; }
    .mb-sm-3 { margin-bottom:3lh; }
    .mb-sm-4 { margin-bottom:4lh; }

    /* Padding */

    .p-sm-a { padding:auto; }
    .p-sm-0 { padding:0; }
    .p-sm-1 { padding:1lh; }
    .p-sm-2 { padding:2lh; }
    .p-sm-3 { padding:3lh; }
    .p-sm-4 { padding:4lh; }

    .px-sm-a { padding-left:auto; padding-right:auto; }
    .px-sm-0 { padding-left:0; padding-right:0; }
    .px-sm-1 { padding-left:1lh; padding-right:1lh; }
    .px-sm-2 { padding-left:2lh; padding-right:2lh; }
    .px-sm-3 { padding-left:3lh; padding-right:3lh; }
    .px-sm-4 { padding-left:4lh; padding-right:4lh; }

    .py-sm-a { padding-top:auto; padding-bottom:auto; }
    .py-sm-0 { padding-top:0; padding-bottom:0; }
    .py-sm-1 { padding-top:1lh; padding-bottom:1lh; }
    .py-sm-2 { padding-top:2lh; padding-bottom:2lh; }
    .py-sm-3 { padding-top:3lh; padding-bottom:3lh; }
    .py-sm-4 { padding-top:4lh; padding-bottom:4lh; }

    .pl-sm-a { padding-left:auto; }
    .pl-sm-0 { padding-left:0; }
    .pl-sm-1 { padding-left:1lh; }
    .pl-sm-2 { padding-left:2lh; }
    .pl-sm-3 { padding-left:3lh; }
    .pl-sm-4 { padding-left:4lh; }

    .pr-sm-a { padding-right:auto; }
    .pr-sm-0 { padding-right:0; }
    .pr-sm-1 { padding-right:1lh; }
    .pr-sm-2 { padding-right:2lh; }
    .pr-sm-3 { padding-right:3lh; }
    .pr-sm-4 { padding-right:4lh; }

    .pt-sm-a { padding-top:auto; }
    .pt-sm-0 { padding-top:0; }
    .pt-sm-1 { padding-top:1lh; }
    .pt-sm-2 { padding-top:2lh; }
    .pt-sm-3 { padding-top:3lh; }
    .pt-sm-4 { padding-top:4lh; }

    .pb-sm-a { padding-bottom:auto; }
    .pb-sm-0 { padding-bottom:0; }
    .pb-sm-1 { padding-bottom:1lh; }
    .pb-sm-2 { padding-bottom:2lh; }
    .pb-sm-3 { padding-bottom:3lh; }
    .pb-sm-4 { padding-bottom:4lh; }

    /* Border */

    .b-sm-0 { border:0; }
    .b-sm-1 { border:1px solid; }
    .b-sm-2 { border:3px solid; }
    .b-sm-3 { border:6px solid; }

    .bl-sm-0 { border-left:0; }
    .bl-sm-1 { border-left:1px solid; }
    .bl-sm-2 { border-left:3px solid; }
    .bl-sm-3 { border-left:6px solid; }

    .br-sm-0 { border-right:0; }
    .br-sm-1 { border-right:1px solid; }
    .br-sm-2 { border-right:3px solid; }
    .br-sm-3 { border-right:6px solid; }

    .bt-sm-0 { border-top:0; }
    .bt-sm-1 { border-top:1px solid; }
    .bt-sm-2 { border-top:3px solid; }
    .bt-sm-3 { border-top:6px solid; }

    .bb-sm-0 { border-bottom:0; }
    .bb-sm-1 { border-bottom:1px solid; }
    .bb-sm-2 { border-bottom:3px solid; }
    .bb-sm-3 { border-bottom:6px solid; }

    /* Sizing */

    .h-sm-10 { height:10vh }
    .h-sm-20 { height:20vh }
    .h-sm-30 { height:30vh }
    .h-sm-40 { height:40vh }
    .h-sm-50 { height:50vh }
    .h-sm-60 { height:60vh }
    .h-sm-70 { height:70vh }
    .h-sm-80 { height:80vh }
    .h-sm-90 { height:90vh }
    .h-sm-100 { height:100vh }
    .h-sm-f { height:100%; }

    /* Display */

    .d-sm-f { display:flex; }
    .d-sm-b { display:block; }
    .d-sm-i { display:inline; }

    /* Alignement */

    .fg-sm-1 { flex-grow:1; }

    .fd-sm-r { flex-direction:row; }
    .fd-sm-c { flex-direction:column; }

    .jc-sm-s { justify-content:start; }
    .jc-sm-e { justify-content:end; }
    .jc-sm-c { justify-content:center; }
    .jc-sm-sb { justify-content:space-between; }
    .jc-sm-sa { justify-content:space-around; }
    .jc-sm-se { justify-content:space-evenly; }

    .ai-sm-s { align-items:start; }
    .ai-sm-e { align-items:end; }

    .ta-sm-l { text-align:left; } 
    .ta-sm-r { text-align:right; }
    .ta-sm-c { text-align:center; }

}

/**
 * breakpoint: xs
 */

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

    /* Grid */

    .gs-xs-a { grid-column-start:auto; }
    .gs-xs-1 { grid-column-start:1; }
    .gs-xs-2 { grid-column-start:2; }
    .gs-xs-3 { grid-column-start:3; }
    .gs-xs-4 { grid-column-start:4; }
    .gs-xs-5 { grid-column-start:5; }
    .gs-xs-6 { grid-column-start:6; }
    .gs-xs-7 { grid-column-start:7; }
    .gs-xs-8 { grid-column-start:8; }
    .gs-xs-9 { grid-column-start:9; }
    .gs-xs-10 { grid-column-start:10; }
    .gs-xs-11 { grid-column-start:11; }

    .ge-xs-a { grid-column-end:auto; }
    .ge-xs-2 { grid-column-end:2; }
    .ge-xs-3 { grid-column-end:3; }
    .ge-xs-4 { grid-column-end:4; }
    .ge-xs-5 { grid-column-end:5; }
    .ge-xs-6 { grid-column-end:6; }
    .ge-xs-7 { grid-column-end:7; }
    .ge-xs-8 { grid-column-end:8; }
    .ge-xs-9 { grid-column-end:9; }
    .ge-xs-10 { grid-column-end:10; }
    .ge-xs-11 { grid-column-end:11; }
    .ge-xs-12 { grid-column-end:12; }

    .gc-xs-a { grid-column:1/-1; }
    .gc-xs-1 { grid-column-end:span 1; }
    .gc-xs-2 { grid-column-end:span 2; }
    .gc-xs-3 { grid-column-end:span 3; }
    .gc-xs-4 { grid-column-end:span 4; }
    .gc-xs-5 { grid-column-end:span 5; }
    .gc-xs-6 { grid-column-end:span 6; }
    .gc-xs-7 { grid-column-end:span 7; }
    .gc-xs-8 { grid-column-end:span 8; }
    .gc-xs-9 { grid-column-end:span 9; }
    .gc-xs-10 { grid-column-end:span 10; }
    .gc-xs-11 { grid-column-end:span 11; }
    .gc-xs-12 { grid-column-end:span 12; }

    .gt-xs-s { grid-template-columns:subgrid; }
    .gt-xs-1 { grid-template-columns:repeat(1, 1fr); }
    .gt-xs-2 { grid-template-columns:repeat(2, 1fr); }
    .gt-xs-3 { grid-template-columns:repeat(3, 1fr); }
    .gt-xs-4 { grid-template-columns:repeat(4, 1fr); }
    .gt-xs-5 { grid-template-columns:repeat(5, 1fr); }
    .gt-xs-6 { grid-template-columns:repeat(6, 1fr); }
    .gt-xs-7 { grid-template-columns:repeat(7, 1fr); }
    .gt-xs-8 { grid-template-columns:repeat(8, 1fr); }
    .gt-xs-9 { grid-template-columns:repeat(9, 1fr); }
    .gt-xs-10 { grid-template-columns:repeat(10, 1fr); }
    .gt-xs-11 { grid-template-columns:repeat(11, 1fr); }
    .gt-xs-12 { grid-template-columns:repeat(12, 1fr); }

    .g-xs-0 { gap:0; }
    .g-xs-05 { gap:0.5lh; }
    .g-xs-1 { gap:1lh; }
    .g-xs-2 { gap:2lh; }
    .g-xs-3 { gap:3lh; }

    .cc-xs-1 { column-count:1; }
    .cc-xs-2 { column-count:2; }
    .cc-xs-3 { column-count:3; }
    .cc-xs-4 { column-count:4; }

    /* Margin */

    .m-xs-a { margin:auto; }
    .m-xs-0 { margin:0; }
    .m-xs-1 { margin:1lh; }
    .m-xs-2 { margin:2lh; }
    .m-xs-3 { margin:3lh; }
    .m-xs-4 { margin:4lh; }

    .mx-xs-a { margin-left:auto; margin-right:auto; }
    .mx-xs-0 { margin-left:0; margin-right:0; }
    .mx-xs-1 { margin-left:1lh; margin-right:1lh; }
    .mx-xs-2 { margin-left:2lh; margin-right:2lh; }
    .mx-xs-3 { margin-left:3lh; margin-right:3lh; }
    .mx-xs-4 { margin-left:4lh; margin-right:4lh; }

    .my-xs-a { margin-top:auto; margin-bottom:auto; }
    .my-xs-0 { margin-top:0; margin-bottom:0; }
    .my-xs-1 { margin-top:1lh; margin-bottom:1lh; }
    .my-xs-2 { margin-top:2lh; margin-bottom:2lh; }
    .my-xs-3 { margin-top:3lh; margin-bottom:3lh; }
    .my-xs-4 { margin-top:4lh; margin-bottom:4lh; }

    .ml-xs-a { margin-left:auto; }
    .ml-xs-0 { margin-left:0; }
    .ml-xs-1 { margin-left:1lh; }
    .ml-xs-2 { margin-left:2lh; }
    .ml-xs-3 { margin-left:3lh; }
    .ml-xs-4 { margin-left:4lh; }

    .mr-xs-a { margin-right:auto; }
    .mr-xs-0 { margin-right:0; }
    .mr-xs-1 { margin-right:1lh; }
    .mr-xs-2 { margin-right:2lh; }
    .mr-xs-3 { margin-right:3lh; }
    .mr-xs-4 { margin-right:4lh; }

    .mt-xs-a { margin-top:auto; }
    .mt-xs-0 { margin-top:0; }
    .mt-xs-1 { margin-top:1lh; }
    .mt-xs-2 { margin-top:2lh; }
    .mt-xs-3 { margin-top:3lh; }
    .mt-xs-4 { margin-top:4lh; }

    .mb-xs-a { margin-bottom:auto; }
    .mb-xs-0 { margin-bottom:0; }
    .mb-xs-1 { margin-bottom:1lh; }
    .mb-xs-2 { margin-bottom:2lh; }
    .mb-xs-3 { margin-bottom:3lh; }
    .mb-xs-4 { margin-bottom:4lh; }

    /* Padding */

    .p-xs-a { padding:auto; }
    .p-xs-0 { padding:0; }
    .p-xs-1 { padding:1lh; }
    .p-xs-2 { padding:2lh; }
    .p-xs-3 { padding:3lh; }
    .p-xs-4 { padding:4lh; }

    .px-xs-a { padding-left:auto; padding-right:auto; }
    .px-xs-0 { padding-left:0; padding-right:0; }
    .px-xs-1 { padding-left:1lh; padding-right:1lh; }
    .px-xs-2 { padding-left:2lh; padding-right:2lh; }
    .px-xs-3 { padding-left:3lh; padding-right:3lh; }
    .px-xs-4 { padding-left:4lh; padding-right:4lh; }

    .py-xs-a { padding-top:auto; padding-bottom:auto; }
    .py-xs-0 { padding-top:0; padding-bottom:0; }
    .py-xs-1 { padding-top:1lh; padding-bottom:1lh; }
    .py-xs-2 { padding-top:2lh; padding-bottom:2lh; }
    .py-xs-3 { padding-top:3lh; padding-bottom:3lh; }
    .py-xs-4 { padding-top:4lh; padding-bottom:4lh; }

    .pl-xs-a { padding-left:auto; }
    .pl-xs-0 { padding-left:0; }
    .pl-xs-1 { padding-left:1lh; }
    .pl-xs-2 { padding-left:2lh; }
    .pl-xs-3 { padding-left:3lh; }
    .pl-xs-4 { padding-left:4lh; }

    .pr-xs-a { padding-right:auto; }
    .pr-xs-0 { padding-right:0; }
    .pr-xs-1 { padding-right:1lh; }
    .pr-xs-2 { padding-right:2lh; }
    .pr-xs-3 { padding-right:3lh; }
    .pr-xs-4 { padding-right:4lh; }

    .pt-xs-a { padding-top:auto; }
    .pt-xs-0 { padding-top:0; }
    .pt-xs-1 { padding-top:1lh; }
    .pt-xs-2 { padding-top:2lh; }
    .pt-xs-3 { padding-top:3lh; }
    .pt-xs-4 { padding-top:4lh; }

    .pb-xs-a { padding-bottom:auto; }
    .pb-xs-0 { padding-bottom:0; }
    .pb-xs-1 { padding-bottom:1lh; }
    .pb-xs-2 { padding-bottom:2lh; }
    .pb-xs-3 { padding-bottom:3lh; }
    .pb-xs-4 { padding-bottom:4lh; }

    /* Sizing */

    .h-xs-10 { height:10vh }
    .h-xs-20 { height:20vh }
    .h-xs-30 { height:30vh }
    .h-xs-40 { height:40vh }
    .h-xs-50 { height:50vh }
    .h-xs-60 { height:60vh }
    .h-xs-70 { height:70vh }
    .h-xs-80 { height:80vh }
    .h-xs-90 { height:90vh }
    .h-xs-100 { height:100vh }
    .h-xs-f { height:100%; }

    /* Display */

    .d-xs-f { display:flex; }
    .d-xs-b { display:block; }
    .d-xs-i { display:inline; }

    /* Alignement */

    .fg-xs-1 { flex-grow:1; }

    .fd-xs-r { flex-direction:row; }
    .fd-xs-c { flex-direction:column; }

    .jc-xs-s { justify-content:start; }
    .jc-xs-e { justify-content:end; }
    .jc-xs-c { justify-content:center; }
    .jc-xs-sb { justify-content:space-between; }
    .jc-xs-sa { justify-content:space-around; }
    .jc-xs-se { justify-content:space-evenly; }

    .ai-xs-s { align-items:start; }
    .ai-xs-e { align-items:end; }

    .ta-xs-l { text-align:left; } 
    .ta-xs-r { text-align:right; }
    .ta-xs-c { text-align:center; }

}