* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p { 
  margin-bottom: 0; 
  white-space: normal;
}

:root {

	/* colors */
	--black: {{ settings.brandid_color_black }};
    --white: {{ settings.brandid_color_white }};
    --background-1: {{ settings.brandid_color_background_1 }};
    --background-2: {{ settings.brandid_color_background_2 }};
	--primary: {{ settings.brandid_color_primary }};
	--secondary: {{ settings.brandid_color_secondary }};

	/* gutter */
	--gutter-desk: 2.5rem;
    --gutter-mob: 2.5rem;

	/* spacings */
	--spacing-5: 0.5rem;
    --spacing-10: 1rem;
    --spacing-15: 1.5rem;
    --spacing-20: 2rem;
    --spacing-30: 3rem;
    --spacing-40: 4rem;
    --spacing-50: 5rem;
    --spacing-60: 6rem;
    --spacing-70: 7rem;
    --spacing-80: 8rem;
    --spacing-90: 9rem;
    --spacing-100: 10rem;
    --spacing-120: 12rem;
    --spacing-200: 20rem;
    --spacing-240: 24rem;

	/* spacings from theme */
	--horizontal-spacing-four-products-per-row: 2.5rem;
}

html,
body {
	color: var(--black);
	letter-spacing: 0 !important;
}

.list-unstyled {
	list-style: none;
	line-height: 1;
}

.ls-0 { letter-spacing: 0 !important; }

/* —————————————————— LAYOUT —————————————————— */

/* CONTAINERS */
.container-full-desktop {
	width: calc(100% - calc((var(--spacing-60))*2));
	margin: auto;
}

.container-narrow-desktop {
	width: calc(100% - 57.5rem);
	margin: auto;
}

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

	.container-full-desktop,
	.container-narrow-desktop {
		width: calc(100% - calc((var(--spacing-20))*2));
		margin: auto;
	}
}

.w50 { width: 50%; }
.w75 { width: 75%; }
.w100 { width: 100%; }

.max-h-100 { max-height: 100vh; }
.h-100vh { height: 100vh; }

.AspectRatio img.ofit-cover { object-fit: cover !important; }

.lil-aspect-ratio img { object-fit: cover !important; }

.v-middle { vertical-align: middle; }

/* —————————————————— BACKGROUNDS —————————————————— */

.b-black { background-color: var(--black); }
.b-white { background-color: var(--white); }

.b-back-1 { background-color: var(--background-1); }
.b-back-2 { background-color: var(--background-2); }

.b-primary{ background-color: var(--primary); }
.b-secondary{ background-color: var(--secondary); }



/* —————————————————— COLORS —————————————————— */

.c-black { color: var(--black); }
.c-white { color: var(--white); }

.c-back-1 { color: var(--background-1); }
.c-back-2 { color: var(--background-2); }

.c-primary{ color: var(--primary); }
.c-secondary{ color: var(--secondary); }

/* —————————————————— FONTS —————————————————— */

.f-w-100{ font-weight:100; }
.f-w-200{ font-weight:200; }
.f-w-300{ font-weight:300; }
.f-w-400{ font-weight:400; }
.f-w-500{ font-weight:500; }
.f-w-600{ font-weight:600; }
.f-w-700{ font-weight:700; }
.f-w-800{ font-weight:800; }
.f-w-900{ font-weight:900; }

.t-lh-1 { line-height: 1 }
.t-lh-11 { line-height: 1.1 }
.t-lh-12 { line-height: 1.2 }
.t-lh-13 { line-height: 1.3 }
.t-lh-14 { line-height: 1.4 }
.t-lh-15 { line-height: 1.5 }
.t-lh-16 { line-height: 1.6 }

/* —————————————————— TEXT STYLES (DESK) —————————————————— */

body {
	font-size: 1.4rem;
	line-height: 1.5;
}

.fs-10{ font-size:1.0rem; }
.fs-11{ font-size:1.1rem; }
.fs-12{ font-size:1.2rem; }
.fs-13{ font-size:1.3rem; }
.fs-14{ font-size:1.4rem; }
.fs-16{ font-size:1.6rem; }
.fs-18{ font-size:1.8rem; }
.fs-20{ font-size:2rem; }
.fs-25{ font-size:2.5rem; }
.fs-30{ font-size:3rem; }
.fs-50{ font-size:5rem; }
.fs-70{ font-size:7rem; }
.fs-80{ font-size:7rem; }
.fs-100{ font-size:10rem; }
.fs-130{ font-size:13rem; }

/* —————————————————— TEXT STYLES (MOB) —————————————————— */
@media only screen and (max-width: 1023px) {

  body {
	font-size: 1.3rem;
  	line-height: 1.5;
  }

  .fs-m-10{ font-size:1.0rem; }
  .fs-m-11{ font-size:1.1rem; }
  .fs-m-12{ font-size:1.2rem; }
  .fs-m-13{ font-size:1.3rem; }
  .fs-m-14{ font-size:1.4rem; }
  .fs-m-16{ font-size:1.6rem; }
  .fs-m-18{ font-size:1.8rem; }
  .fs-m-20{ font-size:2rem; }
  .fs-m-25{ font-size:2.5rem; }
  .fs-m-30{ font-size:3rem; }
  .fs-m-40{ font-size:4rem; }
  .fs-m-50{ font-size:5rem; }
  .fs-m-70{ font-size:7rem; }
  .fs-m-80{ font-size:7rem; }
  .fs-m-100{ font-size:10rem; }
  .fs-m-130{ font-size:13rem; }

}

/* —————————————————— MARGINS / PADDINGS —————————————————— */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.py-15 { padding-top: var(--spacing-15); padding-bottom: var(--spacing-15); }
.py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.py-30 { padding-top: var(--spacing-30); padding-bottom: var(--spacing-30); }
.py-40 { padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }
.py-60 { padding-top: var(--spacing-60); padding-bottom: var(--spacing-60); }
.py-80 { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
.py-100 { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
.py-120 { padding-top: var(--spacing-120); padding-bottom: var(--spacing-120); }
.py-240 { padding-top: var(--spacing-240); padding-bottom: var(--spacing-240); }


.px-0 { padding-right: 0; padding-left: 0; }
.px-5 { padding-right: var(--spacing-5); padding-left: var(--spacing-5); }
.px-10 { padding-right: var(--spacing-10); padding-left: var(--spacing-10); }
.px-15 { padding-right: var(--spacing-15); padding-left: var(--spacing-15); }
.px-20 { padding-right: var(--spacing-20); padding-left: var(--spacing-20); }
.px-30 { padding-right: var(--spacing-30); padding-left: var(--spacing-30); }
.px-40 { padding-right: var(--spacing-40); padding-left: var(--spacing-40); }
.px-60 { padding-right: var(--spacing-60); padding-left: var(--spacing-60); }
.px-80 { padding-right: var(--spacing-80); padding-left: var(--spacing-80); }
.px-100 { padding-right: var(--spacing-100); padding-left: var(--spacing-100); }
.px-120 { padding-right: var(--spacing-120); padding-left: var(--spacing-120); }
.px-240 { padding-right: var(--spacing-240); padding-left: var(--spacing-240); }


.pb-0 { padding-bottom: 0; }
.pb-5 { padding-bottom: var(--spacing-5); }
.pb-10 { padding-bottom: var(--spacing-1); }
.pb-15 { padding-bottom: var(--spacing-15); }
.pb-20 { padding-bottom: var(--spacing-20); }
.pb-30 { padding-bottom: var(--spacing-30); }
.pb-40 { padding-bottom: var(--spacing-40); }
.pb-50 { padding-bottom: var(--spacing-50); }
.pb-60 { padding-bottom: var(--spacing-60); }
.pb-80 { padding-bottom: var(--spacing-80); }
.pb-90 { padding-bottom: var(--spacing-90); }
.pb-100 { padding-bottom: var(--spacing-100); }
.pb-120 { padding-bottom: var(--spacing-120); }
.pb-240 { padding-bottom: var(--spacing-240); }

.pt-0 { padding-top: 0; }
.pt-5 { padding-top: var(--spacing-5); }
.pt-10 { padding-top: var(--spacing-1); }
.pt-15 { padding-top: var(--spacing-15); }
.pt-20 { padding-top: var(--spacing-20); }
.pt-30 { padding-top: var(--spacing-30); }
.pt-40 { padding-top: var(--spacing-40); }
.pt-60 { padding-top: var(--spacing-60); }
.pt-80 { padding-top: var(--spacing-80); }
.pt-90 { padding-top: var(--spacing-90); }
.pt-100 { padding-top: var(--spacing-100); }
.pt-120 { padding-top: var(--spacing-120); }
.pt-200 { padding-top: var(--spacing-200); }
.pt-240 { padding-top: var(--spacing-240); }


.pl-0 { padding-left: 0; }
.pl-5 { padding-left: var(--spacing-5); }
.pl-10 { padding-left: var(--spacing-1); }
.pl-15 { padding-left: var(--spacing-15); }
.pl-20 { padding-left: var(--spacing-20); }
.pl-30 { padding-left: var(--spacing-30); }
.pl-40 { padding-left: var(--spacing-40); }
.pl-60 { padding-left: var(--spacing-60); }
.pl-80 { padding-left: var(--spacing-80); }
.pl-100 { padding-left: var(--spacing-100); }
.pl-120 { padding-left: var(--spacing-120); }
.pl-240 { padding-left: var(--spacing-240); }

.pr-0 { padding-right: 0; }
.pr-5 { padding-right: var(--spacing-5); }
.pr-10 { padding-right: var(--spacing-1); }
.pr-15 { padding-right: var(--spacing-15); }
.pr-20 { padding-right: var(--spacing-20); }
.pr-30 { padding-right: var(--spacing-30); }
.pr-40 { padding-right: var(--spacing-40); }
.pr-60 { padding-right: var(--spacing-60); }
.pr-80 { padding-right: var(--spacing-80); }
.pr-100 { padding-right: var(--spacing-100); }
.pr-120 { padding-right: var(--spacing-120); }
.pr-240 { padding-right: var(--spacing-240); }


.my-0 { margin-top: 0; margin-bottom: 0; }
.my-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.my-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.my-15 { margin-top: var(--spacing-15); margin-bottom: var(--spacing-15); }
.my-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
.my-30 { margin-top: var(--spacing-30); margin-bottom: var(--spacing-30); }
.my-40 { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }
.my-60 { margin-top: var(--spacing-60); margin-bottom: var(--spacing-60); }
.my-80 { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
.my-100 { margin-top: var(--spacing-100); margin-bottom: var(--spacing-100); }
.my-120 { margin-top: var(--spacing-120); margin-bottom: var(--spacing-120); }
.my-240 { margin-top: var(--spacing-240); margin-bottom: var(--spacing-240); }

.mx-0 { margin-right: 0; margin-left: 0; }
.mx-5 { margin-right: var(--spacing-5); margin-left: var(--spacing-5); }
.mx-10 { margin-right: var(--spacing-10); margin-left: var(--spacing-10); }
.mx-15 { margin-right: var(--spacing-15); margin-left: var(--spacing-15); }
.mx-20 { margin-right: var(--spacing-20); margin-left: var(--spacing-20); }
.mx-30 { margin-right: var(--spacing-30); margin-left: var(--spacing-30); }
.mx-40 { margin-right: var(--spacing-40); margin-left: var(--spacing-40); }
.mx-60 { margin-right: var(--spacing-60); margin-left: var(--spacing-60); }
.mx-80 { margin-right: var(--spacing-80); margin-left: var(--spacing-80); }
.mx-100 { margin-right: var(--spacing-100); margin-left: var(--spacing-100); }
.mx-120 { margin-right: var(--spacing-120); margin-left: var(--spacing-120); }
.mx-240 { margin-right: var(--spacing-240); margin-left: var(--spacing-240); }

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

.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-15 { margin-bottom: var(--spacing-15); }
.mb-20 { margin-bottom: var(--spacing-20); }
.mb-30 { margin-bottom: var(--spacing-30); }
.mb-40 { margin-bottom: var(--spacing-40); }
.mb-50 { margin-bottom: var(--spacing-50); }
.mb-60 { margin-bottom: var(--spacing-60); }
.mb-80 { margin-bottom: var(--spacing-80); }
.mb-100 { margin-bottom: var(--spacing-100); }
.mb-120 { margin-bottom: var(--spacing-120); }
.mb-240 { margin-bottom: var(--spacing-240); }


.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--spacing-5); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-15 { margin-top: var(--spacing-15); }
.mt-20 { margin-top: var(--spacing-20); }
.mt-30 { margin-top: var(--spacing-30); }
.mt-40 { margin-top: var(--spacing-40); }
.mt-60 { margin-top: var(--spacing-60); }
.mt-80 { margin-top: var(--spacing-80); }
.mt-100 { margin-top: var(--spacing-100); }
.mt-120 { margin-top: var(--spacing-120); }
.mt-240 { margin-top: var(--spacing-240); }

.ml-0 { margin-left: 0; }
.ml-5 { margin-left: var(--spacing-5); }
.ml-10 { margin-left: var(--spacing-10); }
.ml-15 { margin-left: var(--spacing-15); }
.ml-20 { margin-left: var(--spacing-20); }
.ml-30 { margin-left: var(--spacing-30); }
.ml-40 { margin-left: var(--spacing-40); }
.ml-60 { margin-left: var(--spacing-60); }
.ml-80 { margin-left: var(--spacing-80); }
.ml-100 { margin-left: var(--spacing-100); }
.ml-120 { margin-left: var(--spacing-120); }
.ml-240 { margin-left: var(--spacing-240); }

.mr-0 { margin-right: 0; }
.mr-5 { margin-right: var(--spacing-5); }
.mr-10 { margin-right: var(--spacing-10); }
.mr-15 { margin-right: var(--spacing-15); }
.mr-20 { margin-right: var(--spacing-20); }
.mr-30 { margin-right: var(--spacing-30); }
.mr-40 { margin-right: var(--spacing-40); }
.mr-60 { margin-right: var(--spacing-60); }
.mr-80 { margin-right: var(--spacing-80); }
.mr-100 { margin-right: var(--spacing-100); }
.mr-120 { margin-right: var(--spacing-120); }
.mr-240 { margin-right: var(--spacing-240); }


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


    .py-m-0 { padding-top: 0; padding-bottom: 0; }
    .py-m-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .py-m-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
    .py-m-15 { padding-top: var(--spacing-15); padding-bottom: var(--spacing-15); }
    .py-m-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
    .py-m-30 { padding-top: var(--spacing-30); padding-bottom: var(--spacing-30); }
    .py-m-40 { padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }
    .py-m-60 { padding-top: var(--spacing-60); padding-bottom: var(--spacing-60); }
    .py-m-80 { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
    .py-m-100 { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
    .py-m-120 { padding-top: var(--spacing-120); padding-bottom: var(--spacing-120); }
    .py-m-240 { padding-top: var(--spacing-240); padding-bottom: var(--spacing-240); }
    
    
    .px-m-0 { padding-right: 0; padding-left: 0; }
    .px-m-5 { padding-right: var(--spacing-5); padding-left: var(--spacing-5); }
    .px-m-10 { padding-right: var(--spacing-10); padding-left: var(--spacing-10); }
    .px-m-15 { padding-right: var(--spacing-15); padding-left: var(--spacing-15); }
    .px-m-20 { padding-right: var(--spacing-20); padding-left: var(--spacing-20); }
    .px-m-30 { padding-right: var(--spacing-30); padding-left: var(--spacing-30); }
    .px-m-40 { padding-right: var(--spacing-40); padding-left: var(--spacing-40); }
    .px-m-60 { padding-right: var(--spacing-60); padding-left: var(--spacing-60); }
    .px-m-80 { padding-right: var(--spacing-80); padding-left: var(--spacing-80); }
    .px-m-100 { padding-right: var(--spacing-100); padding-left: var(--spacing-100); }
    .px-m-120 { padding-right: var(--spacing-120); padding-left: var(--spacing-120); }
    .px-m-240 { padding-right: var(--spacing-240); padding-left: var(--spacing-240); }
    
    
    .pb-m-0 { padding-bottom: 0; }
    .pb-m-5 { padding-bottom: var(--spacing-5); }
    .pb-m-10 { padding-bottom: var(--spacing-10); }
    .pb-m-15 { padding-bottom: var(--spacing-15); }
    .pb-m-20 { padding-bottom: var(--spacing-20); }
    .pb-m-30 { padding-bottom: var(--spacing-30); }
    .pb-m-40 { padding-bottom: var(--spacing-40); }
    .pb-m-60 { padding-bottom: var(--spacing-60); }
    .pb-m-80 { padding-bottom: var(--spacing-80); }
    .pb-m-100 { padding-bottom: var(--spacing-100); }
    .pb-m-120 { padding-bottom: var(--spacing-120); }
    .pb-m-240 { padding-bottom: var(--spacing-240); }
    
    .pt-m-0 { padding-top: 0; }
    .pt-m-5 { padding-top: var(--spacing-5); }
    .pt-m-10 { padding-top: var(--spacing-10); }
    .pt-m-15 { padding-top: var(--spacing-15); }
    .pt-m-20 { padding-top: var(--spacing-20); }
    .pt-m-30 { padding-top: var(--spacing-30); }
    .pt-m-40 { padding-top: var(--spacing-40); }
    .pt-m-60 { padding-top: var(--spacing-60); }
    .pt-m-80 { padding-top: var(--spacing-80); }
    .pt-m-100 { padding-top: var(--spacing-100); }
    .pt-m-120 { padding-top: var(--spacing-120); }
    .pt-m-240 { padding-top: var(--spacing-240); }
    
    
    .pl-m-0 { padding-left: 0; }
    .pl-m-5 { padding-left: var(--spacing-5); }
    .pl-m-10 { padding-left: var(--spacing-10); }
    .pl-m-15 { padding-left: var(--spacing-15); }
    .pl-m-20 { padding-left: var(--spacing-20); }
    .pl-m-30 { padding-left: var(--spacing-30); }
    .pl-m-40 { padding-left: var(--spacing-40); }
    .pl-m-60 { padding-left: var(--spacing-60); }
    .pl-m-80 { padding-left: var(--spacing-80); }
    .pl-m-100 { padding-left: var(--spacing-100); }
    .pl-m-120 { padding-left: var(--spacing-120); }
    .pl-m-240 { padding-left: var(--spacing-240); }
    
    .pr-m-0 { padding-right: 0; }
    .pr-m-5 { padding-right: var(--spacing-5); }
    .pr-m-10 { padding-right: var(--spacing-1); }
    .pr-m-15 { padding-right: var(--spacing-15); }
    .pr-m-20 { padding-right: var(--spacing-20); }
    .pr-m-30 { padding-right: var(--spacing-30); }
    .pr-m-40 { padding-right: var(--spacing-40); }
    .pr-m-60 { padding-right: var(--spacing-60); }
    .pr-m-80 { padding-right: var(--spacing-80); }
    .pr-m-100 { padding-right: var(--spacing-100); }
    .pr-m-120 { padding-right: var(--spacing-120); }
    .pr-m-240 { padding-right: var(--spacing-240); }
    
    
    .my-m-0 { margin-top: 0; margin-bottom: 0; }
    .my-m-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .my-m-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
    .my-m-15 { margin-top: var(--spacing-15); margin-bottom: var(--spacing-15); }
    .my-m-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
    .my-m-30 { margin-top: var(--spacing-30); margin-bottom: var(--spacing-30); }
    .my-m-40 { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }
    .my-m-60 { margin-top: var(--spacing-60); margin-bottom: var(--spacing-60); }
    .my-m-80 { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
    .my-m-100 { margin-top: var(--spacing-100); margin-bottom: var(--spacing-100); }
    .my-m-120 { margin-top: var(--spacing-120); margin-bottom: var(--spacing-120); }
    .my-m-240 { margin-top: var(--spacing-240); margin-bottom: var(--spacing-240); }
    
    .mx-m-0 { margin-right: 0; margin-left: 0; }
    .mx-m-5 { margin-right: var(--spacing-5); margin-left: var(--spacing-5); }
    .mx-m-10 { margin-right: var(--spacing-10); margin-left: var(--spacing-10); }
    .mx-m-15 { margin-right: var(--spacing-15); margin-left: var(--spacing-15); }
    .mx-m-20 { margin-right: var(--spacing-20); margin-left: var(--spacing-20); }
    .mx-m-30 { margin-right: var(--spacing-30); margin-left: var(--spacing-30); }
    .mx-m-40 { margin-right: var(--spacing-40); margin-left: var(--spacing-40); }
    .mx-m-60 { margin-right: var(--spacing-60); margin-left: var(--spacing-60); }
    .mx-m-80 { margin-right: var(--spacing-80); margin-left: var(--spacing-80); }
    .mx-m-100 { margin-right: var(--spacing-100); margin-left: var(--spacing-100); }
    .mx-m-120 { margin-right: var(--spacing-120); margin-left: var(--spacing-120); }
    .mx-m-240 { margin-right: var(--spacing-240); margin-left: var(--spacing-240); }
    
    .mx-m-auto { margin-left: auto; margin-right: auto; }
    
    .mb-m-0 { margin-bottom: 0; }
    .mb-m-5 { margin-bottom: var(--spacing-5); }
    .mb-m-10 { margin-bottom: var(--spacing-10); }
    .mb-m-15 { margin-bottom: var(--spacing-15); }
    .mb-m-20 { margin-bottom: var(--spacing-20); }
    .mb-m-30 { margin-bottom: var(--spacing-30); }
    .mb-m-40 { margin-bottom: var(--spacing-40); }
    .mb-m-60 { margin-bottom: var(--spacing-60); }
    .mb-m-70 { margin-bottom: var(--spacing-70); }
    .mb-m-80 { margin-bottom: var(--spacing-80); }
    .mb-m-100 { margin-bottom: var(--spacing-100); }
    .mb-m-120 { margin-bottom: var(--spacing-120); }
    .mb-m-240 { margin-bottom: var(--spacing-240); }
    
    
    .mt-m-0 { margin-top: 0; }
    .mt-m-5 { margin-top: var(--spacing-5); }
    .mt-m-10 { margin-top: var(--spacing-10); }
    .mt-m-15 { margin-top: var(--spacing-15); }
    .mt-m-20 { margin-top: var(--spacing-20); }
    .mt-m-30 { margin-top: var(--spacing-30); }
    .mt-m-40 { margin-top: var(--spacing-40); }
    .mt-m-60 { margin-top: var(--spacing-60); }
    .mt-m-80 { margin-top: var(--spacing-80); }
    .mt-m-100 { margin-top: var(--spacing-100); }
    .mt-m-120 { margin-top: var(--spacing-120); }
    .mt-m-240 { margin-top: var(--spacing-240); }
    
    .ml-m-0 { margin-left: 0; }
    .ml-m-5 { margin-left: var(--spacing-5); }
    .ml-m-10 { margin-left: var(--spacing-10); }
    .ml-m-15 { margin-left: var(--spacing-15); }
    .ml-m-20 { margin-left: var(--spacing-20); }
    .ml-m-30 { margin-left: var(--spacing-30); }
    .ml-m-40 { margin-left: var(--spacing-40); }
    .ml-m-60 { margin-left: var(--spacing-60); }
    .ml-m-80 { margin-left: var(--spacing-80); }
    .ml-m-100 { margin-left: var(--spacing-100); }
    .ml-m-120 { margin-left: var(--spacing-120); }
    .ml-m-240 { margin-left: var(--spacing-240); }
    
    .mr-m-0 { margin-right: 0; }
    .mr-m-5 { margin-right: var(--spacing-5); }
    .mr-m-10 { margin-right: var(--spacing-10); }
    .mr-m-15 { margin-right: var(--spacing-15); }
    .mr-m-20 { margin-right: var(--spacing-20); }
    .mr-m-30 { margin-right: var(--spacing-30); }
    .mr-m-40 { margin-right: var(--spacing-40); }
    .mr-m-60 { margin-right: var(--spacing-60); }
    .mr-m-80 { margin-right: var(--spacing-80); }
    .mr-m-100 { margin-right: var(--spacing-100); }
    .mr-m-120 { margin-right: var(--spacing-120); }
    .mr-m-240 { margin-right: var(--spacing-240); }    

}


/**
 * ----------------------------------------------------------------------------
 * Aspect ratio
 * ----------------------------------------------------------------------------
 */

 .AspectRatio {
	position: relative;
	margin-left: auto;
	margin-right: auto;
  }
  
  .AspectRatio::before {
	content: "";
	display: block;
  }
  
  .AspectRatio>img {
	max-height: 100%;
	max-width: 100%;
  }
  
  .AspectRatio--withFallback>img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
  }
  
  .no-js .AspectRatio>img {
	display: none !important;
  }
  
  @supports (--css: variables) {
  
	/* For dynamic one, we use CSS variables, which makes it only compatible for newer browsers */
	.AspectRatio--withFallback {
	  padding-bottom: 0 !important;
	  /* For older browsers we use the padding-bottom trick, so make sure to remove it here */
	}
  
	.AspectRatio::before {
	  padding-bottom: calc(100% / (var(--aspect-ratio)));
	}
  
	.AspectRatio>img,
	.no-js .AspectRatio>noscript img {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	}
  }
  
  .AspectRatio--square::before {
	padding-bottom: 100%;
  }
  
  .AspectRatio--short::before {
	padding-bottom: 75%;
  }
  
  .AspectRatio--tall::before {
	padding-bottom: 130%;
  }
  .AspectRatio--taller::before {
   padding-bottom: 150%;
  }
  .AspectRatio--screen::before {
   padding-bottom: 180%;
  }
  
  .AspectRatio--square>img,
  .AspectRatio--short>img,
  .AspectRatio--tall>img,
  .AspectRatio--screen>img {
	position: absolute;
	width: auto;
	height: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  }
  
  @supports ((-o-object-fit: contain) or (object-fit: contain)) {
  
	.AspectRatio--square>img,
	.AspectRatio--short>img,
	.AspectRatio--tall>img,
	.AspectRatio--taller>img {
	  width: 100%;
	  height: 100%;
	  -o-object-fit: cover;
	  object-fit: cover;
	}
  }
  
  .Image--lazyLoad[data-sizes=auto] {
	width: 100%;
	/* this is needed to help LazySizes calculate the correct size */
  }

.stop {
	clear: both;
}

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

a:hover {
	text-decoration: none !important;
	/*color: inherit;*/
}

.trs-02 {
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}

.trs-05 {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.trs-1 {
	transition: all 1s;
	-webkit-transition: all 1s;
}

.trs-15 {
	transition: all 1.5s;
	-webkit-transition: all 1.5s;
}

.trs-2 {
	transition: all 2s;
	-webkit-transition: all 2s;
}

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

@media only screen and (max-width: 1023px) {
	.align-m-c { text-align: center; }
	.align-m-r { text-align: right; }
	.align-m-l { text-align: left; }
}


.t-u { text-transform: uppercase; }
.t-l { text-transform: lowercase; }
.t-cap { text-transform: capitalize; }
.t-underline { text-decoration: underline; }

.full-div { width: 100%; height: 100%; }

.back-cover {
	background-size: cover;
	background-position: center center;
}

.ofit-cover { object-fit: cover; }


.d-none { display: none !important; }
.d-ib { display: inline-block; }
.d-b { display: block; }
.d-f {
	display: flex;
	gap: var(--gutter);
}

.d-ig { display: inline-grid; }
.d-g { display: grid; }

.d-g.as{ align-items: start; }
.d-g.ac{ align-items: center; }
.d-g.ae{ align-items: end; }

.d-g.col-2{ grid-template-columns:repeat(2, 1fr); }
.d-g.col-3{ grid-template-columns:repeat(3, 1fr); }
.d-g.col-4{ grid-template-columns:repeat(4, 1fr); }
.d-g.col-5{ grid-template-columns:repeat(5, 1fr); }
.d-g.col-6{ grid-template-columns:repeat(6, 1fr); }
.d-g.col-7{ grid-template-columns:repeat(7, 1fr); }
.d-g.col-8{ grid-template-columns:repeat(8, 1fr); }

.d-g.gap-5{ grid-gap:0.5rem; }
.d-g.gap-10{ grid-gap:1rem; }
.d-g.gap-15{ grid-gap:1.5rem; }
.d-g.gap-20{ grid-gap:2rem; }
.d-g.gap-25{ grid-gap:2.5rem; }
.d-g.gap-30{ grid-gap:3rem; }
.d-g.gap-35{ grid-gap:3.5rem; }
.d-g.gap-40{ grid-gap:4rem; }
.d-g.gap-45{ grid-gap:4.5rem; }
.d-g.gap-50{ grid-gap:5rem; }
.d-g.gap-55{ grid-gap:5.5rem; }
.d-g.gap-60{ grid-gap:6rem; }

@media only screen and (max-width: 1023px) {
  .d-g.gap-m-5{ grid-gap:0.5rem; }
  .d-g.gap-m-10{ grid-gap:1rem; }
  .d-g.gap-m-15{ grid-gap:1.5rem; }
  .d-g.gap-m-20{ grid-gap:2rem; }
  .d-g.gap-m-25{ grid-gap:2.5rem; }
  .d-g.gap-m-30{ grid-gap:3rem; }
  .d-g.gap-m-35{ grid-gap:3.5rem; }
  .d-g.gap-m-40{ grid-gap:4rem; }
  .d-g.gap-m-45{ grid-gap:4.5rem; }
  .d-g.gap-m-50{ grid-gap:5rem; }
  .d-g.gap-m-55{ grid-gap:5.5rem; }
  .d-g.gap-m-60{ grid-gap:6rem; }
}


.w0 { width: 0%;}
.w10 { width: 10%;}
.w20 { width: 20%;}
.w30 { width: 30%;}
.w40 { width: 40%;}
.w45 { width: 45%;}
.w50 { width: 50%;}
.w55 { width: 55%;}
.w60 { width: 60%;}
.w65 { width: 65%;}
.w70 { width: 70%;}
.w75 { width: 75%;}
.w80 { width: 80%;}
.w85 { width: 85%;}
.w90 { width: 90%;}
.w95 { width: 95%;}
.w100 { width: 100%;}
.vw100 { width: 100vw; width: 100dwh; }

.h0 { height: 0%;}
.h100 { height: 100%;}
.vh100 { height: 100vh; height: 100dvh; }

@media only screen and (max-width: 1023px) {
  .m-h-fit-content { height: fit-content; }

}



/* CURSOR */
.c-pointer { cursor: pointer; }
.pe-none { pointer-events: none; }

/* POSITION */
.p-r { position: relative;}
.p-a { position: absolute; }
.p-f { position: fixed;}
.p-s { position: sticky;}

.p-0 { top: 0; left: 0; }
.p-t-0 { top: 0;}
.p-r-0 { right: 0;}
.p-b-0 { bottom: 0;}
.p-l-0 { left: 0;}


/* Z-INDEX */
.l-0 { z-index: 0; }
.l-1 { z-index: 1; }
.l-2 { z-index: 2; }
.l-3 { z-index: 3; }
.l-4 { z-index: 4; }
.l-5 { z-index: 5; }
.l-6 { z-index: 6; }
.l-7 { z-index: 7; }
.l-8 { z-index: 8; }
.l-9 { z-index: 9; }
.l-10 { z-index: 10; }
.l-11 { z-index: 11; }
.l-12 { z-index: 12; }
.l-13 { z-index: 13; }
.l-14 { z-index: 14; }
.l-15 { z-index: 15; }
.l-100 { z-index: 100; }
.l-101 { z-index: 101; }
.l-102 { z-index: 102; }
.l-103 { z-index: 103; }
.l-104 { z-index: 104; }
.l-105 { z-index: 105; }
.l-999 { z-index: 999; }
.l-1000 { z-index: 1000; }
.l-1001 { z-index: 1001; }
.l-1002 { z-index: 1002; }
.l-1003 { z-index: 1003; }
.l-1004 { z-index: 1004; }
.l-1005 { z-index: 1005; }

.d-ib { display: inline-block; }
.d-b { display: block; }
.d-none { display: none; }
.d-grid { display: grid; }
.grid-full-align { align-items: center; }
.grid-vert-align { align-items: center; }

.op-0 { opacity: 0; }
.op-1 { opacity: 1; }

.of-h { overflow: hidden; }
.of-s { overflow: scroll; }



/* BLOCK ALIGN */
.ver-align {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block;
}

.hor-align {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: block;
}

.full-align {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
}


.f-left { float: left }
.f-right { float: right; }
.stop { clear: both; }



.circle { border-radius: 50%; }

.br-5 { border-radius: 5px; }
.br-10 { border-radius: 10px; }
.br-15 { border-radius: 15px; }
.br-20 { border-radius: 20px; }
.br-25 { border-radius: 25px; }
.br-30 { border-radius: 30px; }
.br-35 { border-radius: 35px; }
.br-t-25 { border-radius: 25px 25px 0 0; }
.br-t-30 { border-radius: 30px 30px 0 0; }
.br-t-35 { border-radius: 35px 35px 0 0; }

.br-2b { border-radius: 2vw; }
.br-3b { border-radius: 3vw; }
.br-4b { border-radius: 4vw; }

.horizontal-scroll-father {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.horizontal-scroll-child {
	scroll-snap-align: center;
	flex-shrink: 0;
}






/* —————————————————— PROJECT —————————————————— */

.founder{ font-family: 'Founder'; }
.ugly{ font-family: 'UglyDave'; }