/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1920,25,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,s-l&g=s,l,xl,12 */

:root {

	--step--2: clamp(0.7813rem, 0.7375rem + 0.2188vw, 1rem);
	--step--1: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.25rem);
	--step-0: clamp(1.125rem, 1.0375rem + 0.4375vw, 1.5625rem);
	--step-1: clamp(1.35rem, 1.2294rem + 0.6031vw, 1.9531rem);
	--step-2: clamp(1.62rem, 1.4557rem + 0.8214vw, 2.4414rem);
	--step-3: clamp(1.944rem, 1.7224rem + 1.1078vw, 3.0518rem);
	--step-4: clamp(2.3328rem, 2.0364rem + 1.4819vw, 3.8147rem);
	--step-5: clamp(2.7994rem, 2.4056rem + 1.969vw, 4.7684rem);
	
	--space-3xs: clamp(0.3125rem, 0.3rem + 0.0625vw, 0.375rem);
	--space-2xs: clamp(0.5625rem, 0.5125rem + 0.25vw, 0.8125rem);
	--space-xs: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.1875rem);
	--space-s: clamp(1.125rem, 1.0375rem + 0.4375vw, 1.5625rem);
	--space-m: clamp(1.6875rem, 1.55rem + 0.6875vw, 2.375rem);
	--space-l: clamp(2.25rem, 2.075rem + 0.875vw, 3.125rem);
	--space-xl: clamp(3.375rem, 3.1125rem + 1.3125vw, 4.6875rem);
	--space-2xl: clamp(4.5rem, 4.15rem + 1.75vw, 6.25rem);
	--space-3xl: clamp(6.75rem, 6.225rem + 2.625vw, 9.375rem);
	--space-4xl: clamp(9rem, 8.3rem + 3.5vw, 12.5rem);
	
	--space-3xs-2xs: clamp(0.3125rem, 0.2125rem + 0.5vw, 0.8125rem);
	--space-2xs-xs: clamp(0.5625rem, 0.4375rem + 0.625vw, 1.1875rem);
	--space-xs-s: clamp(0.875rem, 0.7375rem + 0.6875vw, 1.5625rem);
	--space-s-m: clamp(1.125rem, 0.875rem + 1.25vw, 2.375rem);
	--space-m-l: clamp(1.6875rem, 1.4rem + 1.4375vw, 3.125rem);
	--space-l-xl: clamp(2.25rem, 1.7625rem + 2.4375vw, 4.6875rem);
	--space-xl-2xl: clamp(3.375rem, 2.8rem + 2.875vw, 6.25rem);
	--space-2xl-3xl: clamp(4.5rem, 3.525rem + 4.875vw, 9.375rem);
	--space-3xl-4xl: clamp(6.75rem, 5.6rem + 5.75vw, 12.5rem);
	
	--space-m-xl: clamp(1.6875rem, 1.0875rem + 3vw, 4.6875rem);
	--space-s-xl: clamp(1.125rem, 0.4125rem + 3.5625vw, 4.6875rem);
	--space-l-2xl: clamp(2.25rem, 1.45rem + 4vw, 6.25rem);
	--space-l-3xl: clamp(2.25rem, 0.825rem + 7.125vw, 9.375rem);
	--space-xl-3xl: clamp(3.375rem, 2.175rem + 6vw, 9.375rem);

	--margin-mobile: var(--space-m-l);

}


@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Outfit-Light.woff2') format('woff2'),
       url('../fonts/Outfit-Light.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Outfit-Regular.woff2') format('woff2'), 
       url('../fonts/Outfit-Regular.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Outfit-Bold.woff2') format('woff2'),
       url('../fonts/Outfit-Bold.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/Outfit-ExtraBold.woff2') format('woff2'),
       url('../fonts/Outfit-ExtraBold.woff') format('woff');
}



body {position: relative; background-color: #f1f1f1; font-family: 'Outfit', helvetica, sans-serif;}


.container-fluid {max-width: 1920px; margin-inline: auto; padding: 0;}


.button-up {position: fixed; z-index: 20; right: var(--space-m); bottom: var(--space-m);}
.button-up a {display: flex; align-items: center; justify-content: center; width: var(--space-xl); aspect-ratio: 1; padding: 0; text-decoration: none; border: none; border-radius: 50%; background-color: #000; transition: all 0.4s;}
.button-up a:focus {outline: none;}
.button-up a div {width: 50%; height: 50%; margin-top: 10%; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);}
.button-up a svg {width: 100%; height: 100%; transform: rotate(-90deg); transition: all 0.4s;}
.button-up a svg polygon {fill: #fff; transition: all 0.4s;}

@media (min-width: 1200px) {
.button-up a:is(:hover) {background-color: #fff;}
.button-up a:is(:hover) svg polygon {fill: #000;}
}
@media (max-width: 1399.98px) {
.button-up button {width: var(--space-l);}
}



.navbar {
	--navbar-height: var(--space-2xl);
	z-index: 25;
	height: var(--navbar-height); padding: 0 var(--space-m-l); border-bottom: 1px solid #bfbfc0; background-color: #f1f1f1;}

.navbar-wrapper, .navbar-wrapper-2 {display: contents;}

.navbar-collapse {flex-wrap: wrap;}

.navbar-brand {padding: 0;}
.navbar-brand img {height: calc(var(--space-2xl) * 0.4); width: auto;}

.navbar-nav.menu {gap: calc(var(--space-l-xl) * 0.2);}

.nav-link {display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--step--1); color: #000; transition: background 0.4s;}
.nav-link:is(:hover, :active, :focus, .active) {background-color: #fff;}

.navbar-nav.menu .nav-item {height: calc(var(--space-2xl) - 2px); margin-inline: 0;}
.navbar-nav.menu .nav-link {padding: 0 calc(var(--space-l-xl) * 0.4); border-radius: var(--space-s);}

.navbar-nav.langs .nav-item {height: var(--space-l); aspect-ratio: 1; margin-inline: calc(var(--space-3xs) * 0.5);}
.navbar-nav.langs .nav-link {padding: 0; border-radius: calc(var(--space-s) * 0.4);}

.shop-item {height: var(--space-l); margin-left: var(--space-s-xl);}
.shop-link {display: flex; align-items: center; height: 100%; padding-inline: var(--space-s); font-size: var(--step--1); text-decoration: none; border: 1px solid #b4b4b4; border-radius: var(--space-l); color: #000; transition: background 0.4s;}
.shop-link:is(:hover, :active, :focus, .active) {background-color: #fff;}

.navbar-toggler {position: absolute; inset: calc((var(--navbar-height) - 27px) / 2) var(--space-m-l) auto auto; padding: 0; border-radius: 0; border: none;}
.navbar-toggler:focus {outline: none; box-shadow: none;}
.navbar-toggler .icon-bar {display: block; width: 38px; height: 1px; border-radius: 0px; background-color: #000; transition: all 0.2s;}
.navbar-toggler .icon-bar:nth-child(1) {transform: rotate(-45deg); transform-origin: top right; margin-bottom: 12px;}
.navbar-toggler .icon-bar:nth-child(2) {opacity: 0; margin-bottom: 12px;}
.navbar-toggler .icon-bar:nth-child(3) {transform: rotate(45deg); transform-origin: top right;}
.navbar-toggler.collapsed .icon-bar {width: 27px;}
.navbar-toggler.collapsed .icon-bar:nth-child(1) {transform: rotate(0);}
.navbar-toggler.collapsed .icon-bar:nth-child(2) {opacity: 1;}
.navbar-toggler.collapsed .icon-bar:nth-child(3) {transform: rotate(0);}

@media (min-width: 576px) and (max-width: 991.98px) {
.navbar-wrapper {display: flex; align-items: center; justify-content:end; flex-wrap: wrap;}
.navbar-collapse {flex-direction: row;}

.navbar-nav.menu {flex-grow: 0; flex-direction: row; align-items: center; height: var(--space-2xl); margin-right: var(--space-s);}
.navbar-nav.menu .nav-item {height: var(--space-l);}
.navbar-nav.menu .nav-link {padding: var(--space-2xs); border-radius: calc(var(--space-s) * 0.4);}

.shop-item {margin-left: var(--space-s);}
}

@media (max-width: 991.98px) {
.navbar-collapse {margin: var(--navbar-height) calc(var(--margin-mobile) * -1) 0 calc(var(--margin-mobile) * -1); padding-inline: var(--margin-mobile); border-bottom: 1px solid #bfbfc0; background-color: #f1f1f1;}

.navbar-brand {position: absolute; inset: calc(var(--navbar-height) * 0.25) auto auto var(--space-m-l);}

.navbar-nav.langs {flex-grow: 0; flex-direction: row;}
}

@media (max-width: 575.98px) {
.navbar {--navbar-height: 76px;}

.navbar-wrapper-2 {display: flex; justify-content: space-between; padding-bottom: var(--space-l);}

.navbar-nav.menu {align-items: start; gap: var(--space-xs); margin: var(--space-xl) 0 var(--space-l) 0;}
.navbar-nav.menu .nav-item {height: auto;}
.navbar-nav.menu .nav-link {padding-inline: calc(var(--space-l) - var(--space-m-l)); border-radius: 0; font-size: var(--step-2);}
}



/* main */

main {
	position: relative;
	overflow: clip;
}

.main-bg {
	position: absolute;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(164vw, 3150px);
	aspect-ratio: 1.125 /* 3150w / 2800h */;
	border-radius: calc(min(82vw, 1575px) / 0.5625 / 2);
	background-color: #dcdcdc;
}
.main-bg-1 {
	top: calc(min(19.375vw, 371px) + var(--space-l-3xl) + var(--space-s))/* 550px */;
	left: 18vw;
}
.main-bg-2 {
	bottom: calc(min(164vw, 3150px) / 1.125 * 0.3 * -1);
	right: 18vw;
}

.main-bg img {width: min(36vw, 693px);}
.main-bg-1 img {margin-right: min(14vw, 268px);}
.main-bg-2 img {margin-left: min(14vw, 268px);}

@media (max-width: 1199.98px) {
.main-bg-1 {top: calc(min(19.375vw, 371px) + var(--space-l-3xl) + var(--space-xl));}
}
@media (max-width: 767.98px) {
.main-bg {width: 3150px; border-radius: 1400px;}
.main-bg-1 {top: clamp(-20rem, -34.2857rem + 71.4286cqi, 0rem); left: 22.5vw;}
.main-bg-2 {bottom: 0; right: 22.5vw;}
}



section {max-width: clamp(65rem, 25.4167rem + 52.7778vw, 88.75rem); margin-inline: auto;}

section h1, section h2 {margin-bottom: calc(var(--space-l) * 1.25); font-size: var(--step-4); font-weight: 900;}

.section-suptitle {margin-bottom: var(--space-xs); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.25em;}

@media (max-width: 1199.98px) {

section {max-width: 100%; padding-inline: var(--space-xl);} 
var(--space-xl)
}

@media (max-width: 991.98px) {

section {padding-inline: var(--margin-mobile);} 

}

@media (max-width: 767.98px) {

section {max-width: 576px;}

}

@media (max-width: 575.98px) {

section h1, section h2 {font-size: var(--step-3); font-weight: 900;}
section h1 {margin-bottom: var(--space-xl);}

}


section p {margin-bottom: 0; font-size: var(--step-0);}
section p strong {font-weight: 700;}


/* hero */

.hero {gap: var(--space-l); margin-bottom: var(--space-3xl-4xl); padding-top: var(--space-l-3xl);}

.hero-text p {max-width: 90%;}

.hero-wheels {
	display: grid;
	grid-template-columns: 1fr min(8.333vw, 160px);
	grid-template-rows: min(10vw, 190px) 1fr;
	margin-top: calc(var(--space-2xs) * -1);
}
.hero-wheel-1 {
	grid-area: 2 / 1;
	z-index: 2;
	width: min(31.25vw, 600px); height: auto;
}
.hero-wheel-2 {
	grid-area: 1 / 2;
	justify-self: end;
	z-index: 1;
	width: min(19.375vw, 371px); height: auto;
	animation-delay: 0.5s;
}


@media (max-width: 1199.98px) {
.hero-wheels {margin-top: var(--space-l);}
}

@media (max-width: 767.98px) {
.hero {gap: var(--space-xl);}
.hero-text p {max-width: 100%;}
.hero-wheels-container {
	container: hero-wheels / inline-size;
}
.hero-wheels {
	grid-template-columns: 1fr 20cqw;
	grid-template-rows: 24.8cqw 1fr;
	margin-top: 0;
}
.hero-wheel-1 {width: 79cqw;}
.hero-wheel-2 {width: 49cqw;}
}



/* artists */

.artists {position: relative; z-index: 10; padding: 0 var(--space-l-2xl) var(--space-2xl-3xl) var(--space-l-2xl);}

.artists h2 {margin-bottom: var(--space-l); font-size: var(--step-3);}

.artists-arrows {position: absolute; top: 0; right: 25px; gap: 10px;}
.artists-arrows img {width: var(--space-m-l); height: auto;}

.artists-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-l-xl);
	width: 80%;
	margin-bottom: var(--space-l);
}

.artists-container .artist-wrapper {position: relative;}
.artists-container .artist-wrapper:nth-child(1) {z-index: 40;}
.artists-container .artist-wrapper:nth-child(2) {z-index: 30;}
.artists-container .artist-wrapper:nth-child(3) {z-index: 20;}
.artists-container .artist-wrapper:nth-child(4) {z-index: 10;}

.artists-container .artist-wrapper:nth-child(2) .artist {animation-delay: 0.25s;}
.artists-container .artist-wrapper:nth-child(3) .artist {animation-delay: 0s;}
.artists-container .artist-wrapper:nth-child(4) .artist {animation-delay: 0.25s;}

@media (min-width: 1200px) {
.artists h2, .artists .section-suptitle {margin-left: calc(var(--space-l-2xl) * -1);}
}

@media (min-width: 576px) and (max-width: 991.98px) {
.artists-overflow {
	width: 100vw;
	overflow: scroll;
	margin-inline: calc(var(--margin-mobile) * -1);
}
}

@media (max-width: 991.98px) {
.artists {padding-inline: var(--margin-mobile);}

.artists-container {
	grid-template-columns: repeat(4, 1fr);
	width: calc(max(260px, 32vw) * 4 + var(--space-l-xl) * 3 + var(--margin-mobile) * 2);
	padding-inline: var(--margin-mobile);
}
.artist {width: max(260px, 32vw); animation-delay: 0 !important;}

}

@media (max-width: 767.98px) {
.artists-overflow {
	margin-inline: calc((100vw - 576px) / -2 - var(--margin-mobile));
}
}

@media (max-width: 575.98px) {

.artists {padding-inline: var(--margin-mobile);}

.artists-overflow {display: contents;}

.artists-container {
	width: auto;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	margin-inline: calc(var(--margin-mobile) * -1);
	padding: 0 var(--margin-mobile) var(--margin-mobile) var(--margin-mobile);
}
.artist-wrapper {
	width: calc(100vw - var(--margin-mobile) * 2);
	scroll-snap-align: center;
}
.artist {
	width: 100%; max-width: 360px; margin-inline: auto;
}

}


.artist-wrapper {
	container: artist-item / inline-size; /* 260 - 450 px */
}


.artist-img {position: relative; margin-bottom: clamp(1.6875rem, -0.1086rem + 11.0526cqi, 3rem)/* clamp(1.6875rem, -0.1rem + 11cqi, 2.375rem) */;}
.artist-img img.img-fluid {border-radius: 50%;}

.artist button {
	--art-button-width: clamp(4.5rem, -0.05rem + 28cqi, 6.25rem);
	position: absolute; right: 0; bottom: 0; z-index: 2;
	display: grid;
	grid-template-areas: "stack";
	align-items: center;
	justify-content: center;
	width: var(--art-button-width);
	aspect-ratio: 1;
	padding: 0;
	/* text-align: center; */
  	text-decoration: none;
  	/* vertical-align: middle; */
  	border: none;
	border-radius: 50%;
	color: #000;
	background-color: #fff;
	transition: all 0.4s;
}
.artist button:is(:hover, :active, .show) {background-color: #f1f1f1;}
.artist button:focus {outline: none;}
.artist button:after {display: none;}

.artist button span {
	/* display: none; */
	grid-area: stack;
	visibility: visible;
	opacity: 1;
	font-size: clamp(1.3125rem, -0.475rem + 11cqi, 2rem); line-height: 1; font-weight: 900; text-transform: uppercase;
	transition: all 0.4s;
	transition-delay: 0.25s;
}
.artist button.show span {
	visibility: hidden;
	opacity: 0;
}

.artist button svg {
	/* display: none; */
	grid-area: stack;
	width: 100%; height: 100%;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.4);
	transition: all 0.4s;
	/* transition-delay: 1s; */
}
.artist button.show svg {
	visibility: visible;
	opacity: 1;
	transition-delay: 0.4s;
}

.artist button svg path, .pattern-item button svg polygon {fill: #000; transition: all 0.4s;}
.artist button:is(:hover, :active) svg path, .pattern-item button:is(:hover, :active) svg polygon {fill: #fff;}


.artist .dropdown-menu {
	z-index: 1;
	top: calc(clamp(4.5rem, -0.05rem + 28cqi, 6.25rem) * -0.5) !important;
	right: calc(clamp(2.25rem, -0.025rem + 14cqi, 3.125rem) * -1) !important;
	display: block; 
	width: calc(100% + clamp(2.25rem, -0.025rem + 14cqi, 3.125rem) * 2);
	max-height: 0; 
	overflow: hidden; 
	transform: translate3d(0, 0, 0) !important;
	opacity: 1;
	margin-top: 0 !important;
	padding: 0;
	border: none; border-radius: clamp(2.25rem, -0.025rem + 14cqi, 3.125rem);
	box-shadow: 0px 0px clamp(6.25rem, -2.6875rem + 55cqi, 9.6875rem) 0px rgba(0, 0, 0, 0.2);
	background-color: #fff;
}
.artist .dropdown-menu {transition: max-height 1s/* , opacity 0.5s visibility 0.2s */;}
.artist .dropdown-menu.show {max-height: 1000px; opacity: 1;}
.artist .dropdown-menu-inner {padding: clamp(4.5rem, -0.05rem + 28cqi, 6.25rem) clamp(2.25rem, -0.025rem + 14cqi, 3.125rem);}

.artist h3 {margin-bottom: 0; font-size: clamp(1.125rem, -0.0724rem + 7.3684cqi, 2rem) /* clamp(1.125rem, -0.0125rem + 7cqi, 1.5625rem) */; font-weight: 700; text-align: center;}
.artist p.artist-title {margin-bottom: 0; font-size: clamp(0.8125rem, 0.2138rem + 3.6842cqi, 1.25rem) /* clamp(0.7813rem, 0.2125rem + 3.5cqi, 1rem) */; line-height: 2; font-weight: 400; text-align: center;}

.artist .dropdown-menu h3 {margin-bottom: clamp(2.25rem, -0.025rem + 14cqi, 3.125rem); text-align: left;}
.artist .dropdown-menu p {margin-bottom: clamp(2.25rem, -0.025rem + 14cqi, 3.125rem); font-size: clamp(0.9375rem, 0.1678rem + 4.7368cqi, 1.5rem) /* clamp(0.9375rem, 0.125rem + 5cqi, 1.25rem) */; line-height: 1.85;}

.artist .dropdown-menu a {display: block; margin-bottom: clamp(1.125rem, -0.0125rem + 7cqi, 1.5625rem); font-size: clamp(0.9375rem, 0.1678rem + 4.7368cqi, 1.5rem) /* clamp(0.9375rem, 0.125rem + 5cqi, 1.25rem) */; font-weight: 700; text-decoration: none; color: #000;}
.artist .dropdown-menu a img {width: clamp(1.5625rem, -0.148rem + 10.5263cqi, 2.8125rem) /* clamp(1.5625rem, -0.225rem + 11cqi, 2.25rem) */; height: auto; margin-right: clamp(0.75rem, 0.1rem + 4cqi, 1rem);}

.artist .dropdown-menu-inner > *:last-child {margin-bottom: 0;}




/* about */

.about-container {width: 50%; margin: 0 0 var(--space-xl) auto;}

.about p {margin-bottom: var(--space-l); font-size: var(--step-0);}

.about a {/* display: flex;  */font-size: var(--step-0); font-weight: 700; text-decoration: none; color: #000;}
/* .about a span {width: calc(var(--space-2xl) * 0.6); overflow: hidden; margin-left: var(--space-s); transition: all 0.2s;} */
.about a img {width: var(--space-m-l) /* calc(var(--space-2xl) * 0.6) */; height: auto; margin-left: var(--space-s); transition: all 0.3s;}
.about a:hover img {transform: translateX(25%);}

@media (max-width: 1199.98px) {

.about-container {width: min(calc(768px - var(--margin-mobile) * 2), 100%); margin: 0 0 var(--space-3xl) 0;}

}

@media (max-width: 575.98px) {

.about-container {max-width: 100%;}

}


/* sizes */

.sizes {gap: var(--space-s-m); margin-bottom: var(--space-2xl-3xl);}

.sizes h2 {margin-bottom: 0; font-size: var(--step-3);}
.sizes h3 {margin-bottom: 0; font-size: var(--step-2); font-weight: 700;}
.sizes p {margin-bottom: 0; font-size: var(--step--1);}

.sizes-text {position: relative; padding-bottom: calc(var(--space-2xl) * 1.15 + var(--space-l));}

.sizes-arrows {position: absolute; top: 0; right: 0; gap: 10px;}
.sizes-arrows img {width: var(--space-m-l); height: auto;}

.sizes-container {
	--size-24-width: clamp(9.5625rem, 7.6625rem + 9.5vw, 19.0625rem) /* 153 - 305 */;
	--size-22-width: clamp(8.625rem, 6.9125rem + 8.5625vw, 17.1875rem) /* 138 - 275 */;
	--size-20-width: clamp(7.75rem, 6.2125rem + 7.6875vw, 15.4375rem) /* 124 - 247 */;
	gap: var(--space-s-m);
	margin-bottom: var(--space-l);
}

.size-item {text-align: center;}
.size-24 {width: var(--size-24-width);}
.size-22 {width: var(--size-22-width); animation-delay: 0.25s;}
.size-20 {width: var(--size-20-width); animation-delay: 0.5s;}

.size-item img {margin-bottom: var(--space-m);}

@media (max-width: 991.98px) {
.sizes {gap: 0;}
.sizes-text {width: 100%; padding-bottom: 0;}
.sizes h2 {margin-bottom: var(--space-l);}
}

@media (max-width: 575.98px) {
.sizes-overflow {
	max-width: calc(100% + var(--margin-mobile) * 2);
	overflow: auto;
	margin-inline: calc(var(--margin-mobile) * -1);
}
.sizes-container {
	width: calc(var(--margin-mobile) * 2 + var(--space-s-m) * 2 + var(--size-24-width) + var(--size-22-width) + var(--size-20-width));
	padding-inline: var(--margin-mobile);
}
}



/* templates */

.patterns {padding-bottom: var(--space-2xl);}

.patterns h3 {margin-bottom: 0; font-size: var(--step-2); line-height: 1.2; text-transform: uppercase; color: #000;}

.patterns hr {opacity: 1; margin-block: calc(var(--space-m) * 0.8) var(--space-m); border-top: 1px solid #bfbfc0;}

.patterns-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-xs);
	margin-bottom: var(--space-l-2xl);
}

.pattern-item-wrapper {
	container: template-item / inline-size;
	border-radius: 200px;
	background-color: #fff;
}

.pattern-item {padding: clamp(0.5625rem, 0.1875rem + 5cqi, 0.8125rem);}

.pattern-item-img {position: relative; margin-bottom: clamp(1.125rem, 0.4688rem + 8.75cqi, 1.5625rem);}
.pattern-item-img img {border-radius: 50%;}

.pattern-item button {
	position: absolute; right: 0; bottom: 0;
	display: flex; align-items: center; justify-content: center;
	width: clamp(2.25rem, 0.9375rem + 17.5cqi, 3.125rem);
	aspect-ratio: 1;
	transform: rotate(45deg);
	padding: 0;
	text-align: center;
  	text-decoration: none;
  	vertical-align: middle;
  	border: none;
	border-radius: 50%;
	background-color: #f1f1f1;
	transition: all 0.4s;
}
.pattern-item button:is(:hover, :active) {transform: rotate(180deg); background-color: #000;}
.pattern-item button svg {width: 30%; height: 30%; transition: all 0.4s;}
.pattern-item button svg path, .pattern-item button svg polygon {fill: #000; transition: all 0.4s;}
.pattern-item button:is(:hover, :active) svg path, .pattern-item button:is(:hover, :active) svg polygon {fill: #fff;}

.pattern-item h4 {margin-bottom: clamp(0.875rem, 0.4063rem + 6.25cqi, 1.1875rem); font-size: clamp(0.9375rem, 0.375rem + 7.5cqi, 1.3125rem); line-height: 1; font-weight: 900; text-align: center;}

.pattern-item a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content; height: clamp(2.25rem, 0.9375rem + 17.5cqi, 3.125rem);
	margin: 0 auto var(--space-3xs) auto; padding-inline: clamp(0.75rem, -0.4687rem + 16.25cqi, 1.5625rem);
	font-size: clamp(0.75rem, 0.375rem + 5cqi, 1rem); line-height: 1; font-weight: 900; text-decoration: none;
	border-radius: clamp(2.25rem, 0.9375rem + 17.5cqi, 3.125rem);
	color: #000; background-color: #f1f1f1;
	transition: all 0.4s;
}
.pattern-item a:is(:hover, :focus, :active) {color: #fff; background-color: #000;}
.pattern-item a:last-of-type {margin-bottom: 25px;}


@media (min-width: 992px) {
.patterns-grid .pattern-item-wrapper:nth-child(6n + 1) {animation-delay: 0s;}
.patterns-grid .pattern-item-wrapper:nth-child(6n + 2) {animation-delay: 0.25s;}
.patterns-grid .pattern-item-wrapper:nth-child(6n + 3) {animation-delay: 0.5s;}
.patterns-grid .pattern-item-wrapper:nth-child(6n + 4) {animation-delay: 0.75s;}
.patterns-grid .pattern-item-wrapper:nth-child(6n + 5) {animation-delay: 1s;}
.patterns-grid .pattern-item-wrapper:nth-child(6n) {animation-delay: 1.25s;}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.patterns-grid .pattern-item-wrapper:nth-child(4n + 1) {animation-delay: 0s;}
.patterns-grid .pattern-item-wrapper:nth-child(4n + 2) {animation-delay: 0.25s;}
.patterns-grid .pattern-item-wrapper:nth-child(4n + 3) {animation-delay: 0.5s;}
.patterns-grid .pattern-item-wrapper:nth-child(4n) {animation-delay: 0.75s;}
}
@media (max-width: 991.98px) {
.patterns-grid {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 767.98px) {
.patterns h3 {font-size: var(--step-1);}
.patterns-grid {grid-template-columns: repeat(3, 1fr);}
.patterns-grid .pattern-item-wrapper:nth-child(2n + 1) {animation-delay: 0s;}
.patterns-grid .pattern-item-wrapper:nth-child(2n) {animation-delay: 0.25s;}
}
@media (max-width: 439.98px) {
.patterns-grid {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}
}

/* footer */

.footer-container {
	position: relative;
	z-index: 25;
	/* margin-top: var(--space-3xl-4xl); */
	padding: var(--space-2xl) var(--space-l-3xl) var(--space-xl-2xl) var(--space-l-3xl);
	border-radius: var(--space-xl-3xl) var(--space-xl-3xl) 0 0;
	background: #fff;
}

.footer-wrapper {display: flex;}

.footer {margin-bottom: var(--space-xl-3xl);}

.footer h2 {margin-bottom: var(--space-l); font-size: var(--step-3); font-weight: 900;}

.footer-brand img {width: clamp(8.25rem, 7.3375rem + 4.5625vw, 12.8125rem); height: auto;}

.contact {align-self: end; margin-bottom: -0.2em; font-size: var(--step-2); line-height: 1.2; font-weight: 300;}
.contact a {text-decoration: none; font-weight: 700; color: #000;}


.footer .langs {align-self: end; list-style: none; padding: 0; margin: 0;}
.footer .langs li {height: var(--space-l); aspect-ratio: 1; margin-inline: calc(var(--space-3xs) * 0.5);}
.footer .langs a {padding: 0; border-radius: calc(var(--space-s) * 0.4);}
.footer .langs a:is(:hover, :active, :focus, .active) {background-color: #f1f1f1;}


.footer .shop-item {margin: var(--space-2xs) 0 0 min(5.2vw, 100px);}
.footer .shop-link:is(:hover, :active, :focus) {background-color: #f1f1f1;}

.bottom {font-size: var(--step--1); color: #000;}
 
.bottom > * {white-space: nowrap;}
 
.bottom-nav ul {margin-bottom: 0; font-size: var(--step--1); color: #000;}
.bottom-nav li {margin-right: calc(var(--space-xs) - 0.1em);}
.bottom-nav li:not(:last-of-type):after {content: '•'; margin-left: var(--space-xs);}

.bottom-nav li a, .bottom-privacy a, .bottom-copyright a {text-decoration: none; color: #000;}
.bottom-nav li a:is(:hover, :active, :focus), .bottom-privacy a:is(:hover, :active, :focus), .bottom-copyright a:is(:hover, :active, :focus) {text-decoration: underline; text-underline-offset: 0.15em;}


.newmanstudio {display: inline-block;}
.newmanstudio a {font-size: 0.8125rem; text-decoration: none; color: #000; transition: all 0.4s;}
.newmanstudio a:is(:hover, :focus, :active) {text-decoration: none; color: #000;}
.newmanstudio a svg {width: 1.6875rem; height: auto; margin-left: 0.8125rem;}
.newmanstudio a svg path {fill: #000; transition: fill 0.4s;}
.newmanstudio a:is(:hover, :focus, :active) svg path {fill: #000;}


@media (min-width: 768px) {
.footer-bg {background-image: linear-gradient(to right, #dcdcdc 0%, #dcdcdc 50%, #f1f1f1 50%, #f1f1f1 100%);} 
}

@media (min-width: 992px) {
.footer-brand, .bottom-copyright {width: min(25vw, 480px);}
}

@media (max-width: 1399.98px) {
.footer .shop-item {margin-top: 0;}
}

@media (max-width: 1199.98px) {

.footer-container {padding-inline: var(--space-xl);} 

}

@media (max-width: 991.98px) {

.footer-container {padding-inline: var(--margin-mobile);}

.contact {margin-left: auto; font-size: var(--step-1);}

.bottom-privacy {width: 100%; margin-bottom: var(--space-s);}
.bottom-nav {width: 100%;}


}

@media (max-width: 767.98px) {

.footer {margin-bottom: var(--space-m);}

.footer-wrapper {display: contents;}
.footer-wrapper-2 {width: 100%;}

.footer .langs {margin-bottom: var(--space-s);}

.contact {width: 100%; margin-bottom: var(--space-l);}
.contact > div:first-child {margin-bottom: var(--space-m);}

.bottom-nav {margin-bottom: var(--space-2xs);}
.bottom-privacy {margin-bottom: var(--space-xl);}

}

@media (max-width: 575.98px) {

.contact a {display: block;}

.bottom-copyright {font-size: var(--step--2);}

.newmanstudio a {font-size: var(--step--2);}
.newmanstudio a svg {width: 1.25rem; margin-left: 0.4rem;}

}


/* modal */

.modal-backdrop {background-color: #fff;}
.modal-backdrop.show {opacity: 0;}
.modal-dialog {max-width: min(45%, 864px); margin-block: var(--space-l-2xl) var(--space-m-xl);}
.modal-content {border: none; border-radius: var(--space-l); box-shadow: 0px 0px min(8vw, 155px) 0px rgba(0, 0, 0, 0.2);}

.modal-body button {position: absolute; top: calc(var(--space-l-2xl) * -0.5); right: var(--space-l); display: flex; align-items: center; justify-content: center; width: var(--space-l-2xl); height: var(--space-l-2xl); padding: 0; text-align: center; text-decoration: none; vertical-align: middle; border: none; border-radius: 50%; background-color: #f1f1f1; transition: all 0.4s;}
.modal-body button:is(:hover, :active) {background-color: #000;}
.modal-body button svg {width: 40%; height: 40%; /* width: 80%; height: 80%; */ transition: all 0.4s;}
.modal-body button svg path, .modal-body button svg polygon {fill: #000; transition: all 0.4s;}
.modal-body button:is(:hover, :active) svg path, .modal-body button:is(:hover, :active) svg polygon {fill: #fff;}

.pattern-modal .modal-body {padding: var(--space-xl-2xl) var(--space-xl-2xl) var(--space-m-l) var(--space-xl-2xl);}
.pattern-modal .modal-body h1 {margin: var(--space-m-l) 0 0 0; font-size: var(--step-2); line-height: 1.2; text-align: center;}
.pattern-modal .modal-body h1 strong {white-space: nowrap; font-weight: 900;}
.pattern-modal .modal-body h1 span {margin-inline: var(--space-2xs);}

.artist-modal .modal-body {padding: var(--space-2xl) var(--space-l);}
.artist-modal h1 {margin-bottom: var(--space-l); font-size: var(--step-0); font-weight: 700;}
.artist-modal p {margin-bottom: var(--space-l); font-size: var(--step--1); line-height: 1.85;}
.artist-modal a {margin-bottom: var(--space-s); display: block; font-size: var(--step--1); font-weight: 700; text-decoration: none; color: #000;}
.artist-modal a img {width: var(--space-m); height: auto; margin-right: var(--space-2xs);}
.artist-modal .modal-body > *:last-child {margin-bottom: 0;}

@media (max-width: 1199.98px) {
.pattern-modal .modal-dialog {max-width: 55%;}
.artist-modal .modal-dialog {max-width: 40%;}
}
@media (max-width: 991.98px) {
.pattern-modal .modal-dialog {max-width: 80%;}
.artist-modal .modal-dialog {max-width: 50%;}
}
@media (max-width: 767.98px) {
.artist-modal .modal-dialog {max-width: 60%;}
}
@media (max-width: 575.98px) {
.pattern-modal .modal-dialog {max-width: 100%; margin-inline: 0;}
.artist-modal .modal-dialog {max-width: 100%; margin-inline: 0;}
.modal-body {padding: var(--space-m) var(--space-m) var(--space-s) var(--space-m);}
.modal-body h1 {margin: var(--space-s) 0 0 0; font-size: var(--step--1);}
}








/* animations */
 
 
@media (prefers-reduced-motion: no-preference) {

.fade-in, .fade-in-right, .fade-in-up, .fade-in-rotate {opacity: 0;}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeInRight {
	0% {opacity: 0; transform: translateX(50%);}
	100% {opacity: 1; transform: translateX(0);}
}

@keyframes fadeInUp {
	0% {opacity: 0; transform: translateY(30%);}
	100% {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInRotate {
	0% {opacity: 0; transform: rotate(0);}
	100% {opacity: 1; transform: rotate(-90deg);}
}


.fadeInAnimation {-webkit-animation-name: fadeIn; animation-name: fadeIn; animation-duration: 1.5s; animation-fill-mode: both;}
.fadeInRightAnimation {animation-name: fadeInRight; animation-duration: 1.5s; animation-fill-mode: both;}
.fadeInUpAnimation {animation-name: fadeInUp; animation-duration: 0.5s; animation-fill-mode: both; animation-timing-function: ease-out; animation-delay: .1s;}
.fadeInRotateAnimation {animation-name: fadeInRotate; animation-duration: 1.5s; animation-fill-mode: both; animation-timing-function: ease-out; animation-delay: .1s;}

/* 
@media (max-width: 575.98px) {
.fadeInLeftAnimation {animation-name: fadeIn; animation-duration: 1.5s;}
.fadeInRightAnimation {animation-name: fadeIn; animation-duration: 1.5s;}
}
 */

}

/* prefers-reduce-motion */

@media (prefers-reduced-motion: reduce) {
*, ::after, ::before {transition: 0s !important;}
}