:root{
  --rebound-slow: .8s cubic-bezier(0.57, 0.43, 0.46, 1);
  --rebound-cool: .6s cubic-bezier(0.57, 0.43, 0.46, 1);
  --rebound-norm: .24s cubic-bezier(0.57, 0.43, 0.46, 1);
  --rebound-fast: .16s cubic-bezier(0.66, 0.33, 0.33, 1);
  --rebound-speed: .12s cubic-bezier(0.57, 0.43, 0.46, 1);
}

/* ----------- positionning ----------- */
.rel {position: relative}
.abs {position: absolute}
.sticky {position: sticky}
.fixed {position: fixed}

/* ----------- display ----------- */
.inline-block{display: inline-block}
.inline-flex{display: inline-flex}

/* ----------- flex ----------- */
.flex {display: flex}
.fd-col {flex-direction: column}
.fd-row {flex-direction: row}
.fd-rev, .fd-row-rev {flex-direction: row-reverse;}
.fd-col-rev{flex-direction: column-reverse;}
.fw-wrap {flex-wrap: wrap}
.fw-no {flex-wrap: nowrap}
.fj-cent {justify-content: center}
.fj-start {justify-content: flex-start}
.fj-end {justify-content: flex-end}
.fj-tween {justify-content: space-between}
.fj-round {justify-content: space-around}
.fa-cent {align-items: center}
.fa-start {align-items: flex-start}
.fa-end {align-items: flex-end}
.fa-tween {align-items: space-between}
.fa-round {align-items: space-around}

.col-gap-1{column-gap: calc(var(--space-unit)*1)}
.col-gap-2{column-gap: calc(var(--space-unit)*2)}
.col-gap-3{column-gap: calc(var(--space-unit)*3)}
.col-gap-4{column-gap: calc(var(--space-unit)*4)}
.col-gap-5{column-gap: calc(var(--space-unit)*5)}
.col-gap-6{column-gap: calc(var(--space-unit)*6)}
.col-gap-7{column-gap: calc(var(--space-unit)*7)}
.col-gap-8{column-gap: calc(var(--space-unit)*8)}
.col-gap-9{column-gap: calc(var(--space-unit)*9)}
.col-gap-10{column-gap: calc(var(--space-unit)*10)}
.col-gap-12{column-gap: calc(var(--space-unit)*12)}

.row-gap-1{row-gap: calc(var(--space-unit)*1)}
.row-gap-2{row-gap: calc(var(--space-unit)*2)}
.row-gap-3{row-gap: calc(var(--space-unit)*3)}
.row-gap-4{row-gap: calc(var(--space-unit)*4)}
.row-gap-5{row-gap: calc(var(--space-unit)*5)}
.row-gap-6{row-gap: calc(var(--space-unit)*6)}
.row-gap-7{row-gap: calc(var(--space-unit)*7)}
.row-gap-8{row-gap: calc(var(--space-unit)*8)}
.row-gap-9{row-gap: calc(var(--space-unit)*9)}
.row-gap-10{row-gap: calc(var(--space-unit)*10)}
.row-gap-12{row-gap: calc(var(--space-unit)*12)}

/* ----------- width ----------- */
.w-100 {width: 100%}
.w-80 {width: 80%}
.w-75 {width: 75%}
.w-70 {width: 70%}
.w-66 {width: calc(200% / 3)}
.w-50 {width: 50%}
.w-40 {width: 40%}
.w-33 {width: calc(100% / 3)}
.w-25 {width: 25%}
.w-20 {width: 20%}

.w-2{width: calc(100%/ 2);}
.w-3{width: calc(100%/ 3);}
.w-4{width: calc(100%/ 4);}
.w-6{width: calc(100%/ 6);}
.w-8{width: calc(100%/ 8);}

html{
  -webkit-tap-highlight-color: transparent;
}

/* ----------- cursor / pointer----------- */
.cursor-pointer{cursor: pointer}
.cursor-unset{cursor: unset}
.cursor-auto{cursor: auto}
.no-select{user-select: none}
.pointer-none{pointer-events: none}


/* ----------- width / height ----------- */

.w-fill-max {width: -webkit-fill-available}
.w-max-cont{max-width: max-content}

.h-100{height: 100%}
.h-fill-max {height: -webkit-fill-available}
.h-max-cont{height: max-content}

/* ----------- stroke / fill ----------- */
.no-stroke{stroke: none}
.no-fill{fill: none}

.txt-center, .txt-cent{text-align: center}

/* ----------- margins ----------- */

.mt-1{margin-top: calc(var(--space-unit)*1)}
.mt-2{margin-top: calc(var(--space-unit)*2)}
.mt-3{margin-top: calc(var(--space-unit)*3)}
.mt-4{margin-top: calc(var(--space-unit)*4)}
.mt-5{margin-top: calc(var(--space-unit)*5)}
.mt-6{margin-top: calc(var(--space-unit)*6)}
.mt-7{margin-top: calc(var(--space-unit)*7)}
.mt-8{margin-top: calc(var(--space-unit)*8)}
.mt-9{margin-top: calc(var(--space-unit)*9)}
.mt-10{margin-top: calc(var(--space-unit)*10)}
.mt-12{margin-top: calc(var(--space-unit)*12)}
.mt-16{margin-top: calc(var(--space-unit)*16)}
.mt-24{margin-top: calc(var(--space-unit)*24)}
.mt-32{margin-top: calc(var(--space-unit)*32)}
.mt-40{margin-top: calc(var(--space-unit)*40)}
.mt-64{margin-top: calc(var(--space-unit)*64)}
.mt-80{margin-top: calc(var(--space-unit)*80)}

.ml-1{margin-left: calc(var(--space-unit)*1)}
.ml-2{margin-left: calc(var(--space-unit)*2)}
.ml-3{margin-left: calc(var(--space-unit)*3)}
.ml-4{margin-left: calc(var(--space-unit)*4)}
.ml-5{margin-left: calc(var(--space-unit)*5)}
.ml-6{margin-left: calc(var(--space-unit)*6)}
.ml-7{margin-left: calc(var(--space-unit)*7)}
.ml-8{margin-left: calc(var(--space-unit)*8)}
.ml-9{margin-left: calc(var(--space-unit)*9)}
.ml-10{margin-left: calc(var(--space-unit)*10)}
.ml-12{margin-left: calc(var(--space-unit)*12)}
.ml-16{margin-left: calc(var(--space-unit)*16)}
.ml-24{margin-left: calc(var(--space-unit)*24)}
.ml-32{margin-left: calc(var(--space-unit)*32)}
.ml-40{margin-left: calc(var(--space-unit)*40)}

.mr-1{margin-right: calc(var(--space-unit)*1)}
.mr-2{margin-right: calc(var(--space-unit)*2)}
.mr-3{margin-right: calc(var(--space-unit)*3)}
.mr-4{margin-right: calc(var(--space-unit)*4)}
.mr-5{margin-right: calc(var(--space-unit)*5)}
.mr-6{margin-right: calc(var(--space-unit)*6)}
.mr-7{margin-right: calc(var(--space-unit)*7)}
.mr-8{margin-right: calc(var(--space-unit)*8)}
.mr-9{margin-right: calc(var(--space-unit)*9)}
.mr-10{margin-right: calc(var(--space-unit)*10)}
.mr-12{margin-right: calc(var(--space-unit)*12)}
.mr-16{margin-right: calc(var(--space-unit)*16)}
.mr-24{margin-right: calc(var(--space-unit)*24)}
.mr-32{margin-right: calc(var(--space-unit)*32)}
.mr-40{margin-right: calc(var(--space-unit)*40)}

.mb-1{margin-bottom: calc(var(--space-unit)*1)}
.mb-2{margin-bottom: calc(var(--space-unit)*2)}
.mb-3{margin-bottom: calc(var(--space-unit)*3)}
.mb-4{margin-bottom: calc(var(--space-unit)*4)}
.mb-5{margin-bottom: calc(var(--space-unit)*5)}
.mb-6{margin-bottom: calc(var(--space-unit)*6)}
.mb-7{margin-bottom: calc(var(--space-unit)*7)}
.mb-8{margin-bottom: calc(var(--space-unit)*8)}
.mb-9{margin-bottom: calc(var(--space-unit)*9)}
.mb-10{margin-bottom: calc(var(--space-unit)*10)}
.mb-12{margin-bottom: calc(var(--space-unit)*12)}
.mb-16{margin-bottom: calc(var(--space-unit)*16)}
.mb-24{margin-bottom: calc(var(--space-unit)*24)}
.mb-32{margin-bottom: calc(var(--space-unit)*32)}
.mb-40{margin-bottom: calc(var(--space-unit)*40)}

/* ----------- paddings ----------- */

.pt-1 {padding-top: calc(var(--space-unit)*1)}
.pt-2 {padding-top: calc(var(--space-unit)*2)}
.pt-3 {padding-top: calc(var(--space-unit)*3)}
.pt-4 {padding-top: calc(var(--space-unit)*4)}
.pt-5 {padding-top: calc(var(--space-unit)*5)}
.pt-6 {padding-top: calc(var(--space-unit)*6)}
.pt-7 {padding-top: calc(var(--space-unit)*7)}
.pt-8 {padding-top: calc(var(--space-unit)*8)}
.pt-9 {padding-top: calc(var(--space-unit)*9)}
.pt-10 {padding-top: calc(var(--space-unit)*10)}
.pt-12 {padding-top: calc(var(--space-unit)*12)}
.pt-16 {padding-top: calc(var(--space-unit)*16)}
.pt-20 {padding-top: calc(var(--space-unit)*20)}

.pb-1 {padding-bottom: calc(var(--space-unit)*1)}
.pb-2 {padding-bottom: calc(var(--space-unit)*2)}
.pb-3 {padding-bottom: calc(var(--space-unit)*3)}
.pb-4 {padding-bottom: calc(var(--space-unit)*4)}
.pb-5 {padding-bottom: calc(var(--space-unit)*5)}
.pb-6 {padding-bottom: calc(var(--space-unit)*6)}
.pb-7 {padding-bottom: calc(var(--space-unit)*7)}
.pb-8 {padding-bottom: calc(var(--space-unit)*8)}
.pb-9 {padding-bottom: calc(var(--space-unit)*9)}
.pb-10 {padding-bottom: calc(var(--space-unit)*10)}
.pb-12 {padding-bottom: calc(var(--space-unit)*12)}
.pb-16 {padding-bottom: calc(var(--space-unit)*16)}
.pb-20 {padding-bottom: calc(var(--space-unit)*20)}

.pl-1 {padding-left: calc(var(--space-unit)*1)}
.pl-2 {padding-left: calc(var(--space-unit)*2)}
.pl-3 {padding-left: calc(var(--space-unit)*3)}
.pl-4 {padding-left: calc(var(--space-unit)*4)}
.pl-5 {padding-left: calc(var(--space-unit)*5)}
.pl-6 {padding-left: calc(var(--space-unit)*6)}
.pl-7 {padding-left: calc(var(--space-unit)*7)}
.pl-8 {padding-left: calc(var(--space-unit)*8)}
.pl-9 {padding-left: calc(var(--space-unit)*9)}
.pl-10 {padding-left: calc(var(--space-unit)*10)}
.pl-12 {padding-left: calc(var(--space-unit)*12)}
.pl-16 {padding-left: calc(var(--space-unit)*16)}
.pl-20 {padding-left: calc(var(--space-unit)*20)}


.pr-1 {padding-right: calc(var(--space-unit)*1)}
.pr-2 {padding-right: calc(var(--space-unit)*2)}
.pr-3 {padding-right: calc(var(--space-unit)*3)}
.pr-4 {padding-right: calc(var(--space-unit)*4)}
.pr-5 {padding-right: calc(var(--space-unit)*5)}
.pr-6 {padding-right: calc(var(--space-unit)*6)}
.pr-7 {padding-right: calc(var(--space-unit)*7)}
.pr-8 {padding-right: calc(var(--space-unit)*8)}
.pr-9 {padding-right: calc(var(--space-unit)*9)}
.pr-10 {padding-right: calc(var(--space-unit)*10)}
.pr-12 {padding-right: calc(var(--space-unit)*12)}
.pr-16 {padding-right: calc(var(--space-unit)*16)}
.pr-20 {padding-right: calc(var(--space-unit)*20)}


.pad-1{padding: calc(var(--space-unit)*1)}
.pad-2{padding: calc(var(--space-unit)*2)}
.pad-3{padding: calc(var(--space-unit)*3)}
.pad-4{padding: calc(var(--space-unit)*4)}
.pad-5{padding: calc(var(--space-unit)*5)}
.pad-6{padding: calc(var(--space-unit)*6)}
.pad-7{padding: calc(var(--space-unit)*7)}
.pad-8{padding: calc(var(--space-unit)*8)}
.pad-9{padding: calc(var(--space-unit)*9)}
.pad-10{padding: calc(var(--space-unit)*10)}
.pad-12{padding: calc(var(--space-unit)*12)}
.pad-16{padding: calc(var(--space-unit)*16)}
.pad-20{padding: calc(var(--space-unit)*20)}

.padv-1{padding-top: calc(var(--space-unit)*1); padding-bottom: calc(var(--space-unit)*1);}
.padv-2{padding-top: calc(var(--space-unit)*2); padding-bottom: calc(var(--space-unit)*2);}
.padv-3{padding-top: calc(var(--space-unit)*3); padding-bottom: calc(var(--space-unit)*3); } 
.padv-4{padding-top: calc(var(--space-unit)*4); padding-bottom: calc(var(--space-unit)*4); }
.padv-5{padding-top: calc(var(--space-unit)*5); padding-bottom: calc(var(--space-unit)*5); }
.padv-6{padding-top: calc(var(--space-unit)*6); padding-bottom: calc(var(--space-unit)*6); } 
.padv-7{padding-top: calc(var(--space-unit)*7); padding-bottom: calc(var(--space-unit)*7); } 
.padv-8{padding-top: calc(var(--space-unit)*8); padding-bottom: calc(var(--space-unit)*8); } 
.padv-9{padding-top: calc(var(--space-unit)*9); padding-bottom: calc(var(--space-unit)*9); } 
.padv-10{padding-top: calc(var(--space-unit)*10); padding-bottom: calc(var(--space-unit)*10); } 
.padv-12{padding-top: calc(var(--space-unit)*12); padding-bottom: calc(var(--space-unit)*12); } 
.padv-16{padding-top: calc(var(--space-unit)*16); padding-bottom: calc(var(--space-unit)*16); } 
.padv-20{padding-top: calc(var(--space-unit)*20); padding-bottom: calc(var(--space-unit)*20); } 

.padh-1{padding-left: calc(var(--space-unit)*1); padding-right: calc(var(--space-unit)*1);}
.padh-2{padding-left: calc(var(--space-unit)*2); padding-right: calc(var(--space-unit)*2);}
.padh-3{padding-left: calc(var(--space-unit)*3); padding-right: calc(var(--space-unit)*3); } 
.padh-4{padding-left: calc(var(--space-unit)*4); padding-right: calc(var(--space-unit)*4); } 
.padh-5{padding-left: calc(var(--space-unit)*5); padding-right: calc(var(--space-unit)*5); } 
.padh-6{padding-left: calc(var(--space-unit)*6); padding-right: calc(var(--space-unit)*6); } 
.padh-7{padding-left: calc(var(--space-unit)*7); padding-right: calc(var(--space-unit)*7); } 
.padh-8{padding-left: calc(var(--space-unit)*8); padding-right: calc(var(--space-unit)*8); } 
.padh-9{padding-left: calc(var(--space-unit)*9); padding-right: calc(var(--space-unit)*9); } 
.padh-10{padding-left: calc(var(--space-unit)*10); padding-right: calc(var(--space-unit)*10); } 
.padh-12{padding-left: calc(var(--space-unit)*12); padding-right: calc(var(--space-unit)*12); } 
.padh-16{padding-left: calc(var(--space-unit)*16); padding-right: calc(var(--space-unit)*16); } 
.padh-20{padding-left: calc(var(--space-unit)*20); padding-right: calc(var(--space-unit)*20); } 


/* ----------- fonts ----------- */

.fw-300{font-weight: 300}
.fw-400{font-weight: 400}
.fw-500{font-weight: 500}
.fw-600{font-weight: 600}
.fw-700{font-weight: 700}
.fw-800{font-weight: 800}
.fw-900{font-weight: 900}

.fs-1{font-size: var(--f-size-1)}
.fs-2{font-size:var(--f-size-2)}
.fs-3{font-size:var(--f-size-3)}
.fs-4{font-size:var(--f-size-4)}
.fs-p{font-size: var(--f-size-p)}
.fs-s{font-size: var(--f-size-s)}
.fs-t{font-size: var(--f-size-t)}
.fs-l{font-size:var(--f-size-l)}
.fs-xl{font-size:var(--f-size-xl)}
.fs-2xl{font-size:var(--f-size-2xl)}
.fs-3xl{font-size:var(--f-size-3xl)}
.fs-4xl{font-size:var(--f-size-4xl)}
.fs-5xl{font-size:var(--f-size-5xl)}
.fs-6xl{font-size:var(--f-size-6xl)}
.fs-7xl{font-size:var(--f-size-7xl)}