@font-face {
  font-family: "SFProArabic";
  src: url("/assets/fonts/SFProAR_regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "SFProArabic";
  src: url("/assets/fonts/SFProAR_semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
body {
  font-family: "SFProArabic", sans-serif;
  font-weight: 400;
  font-size: var(--text-m);
  min-height: 100%;
}

/* 1. Use a better box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default padding & margin */
* {
  margin: 0;
  padding: 0;
}

/* 3. Improve typography & scaling */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%; /* 1rem = 10px */
  line-height: 1.5;
}

/* 4. Remove default list styles */
ul,
ol {
  list-style: none;
}

/* 5. Reset links */
a {
  text-decoration: none;
  color: inherit;
  text-wrap: nowrap;
}

/* 6. Reset form elements */
button,
input,
textarea,
select {
  font: inherit;
  border: none;
  background: none;
  color: inherit;
}

/* 7. Improve focus visibility */
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 8. Remove button default styles */
button {
  cursor: pointer;
  background-color: transparent;
}

/* 9. Reset images and media */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 10. Prevent text overflow issues */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 11. Make sure the root stacking context is reliable */
#root,
#__next {
  isolation: isolate;
}
html {
  font-size: 62.5%;
}
html.cf-theme-dark {
  color-scheme: dark;
}

:root,
:root.cf-theme-dark .theme-inverted,
:root.cf-theme-dark .theme-always-light,
:root.cf-theme-light .theme-inverted .theme-always-light {
  --min-screen-width: 320px;
  --max-screen-width: 1400px;
  --primary: hsla(50, 94%, 66%, 1);
  --primary-5: hsla(50, 94%, 66%, 0.05);
  --primary-10: hsla(50, 94%, 66%, 0.1);
  --primary-20: hsla(50, 94%, 66%, 0.2);
  --primary-30: hsla(50, 94%, 66%, 0.3);
  --primary-40: hsla(50, 94%, 66%, 0.4);
  --primary-50: hsla(50, 94%, 66%, 0.5);
  --primary-60: hsla(50, 94%, 66%, 0.6);
  --primary-70: hsla(50, 94%, 66%, 0.7);
  --primary-80: hsla(50, 94%, 66%, 0.8);
  --primary-90: hsla(50, 94%, 66%, 0.9);
  --primary-d-1: hsla(49, 70%, 60%, 1);
  --primary-d-2: hsla(49, 53%, 54%, 1);
  --primary-d-3: hsla(49, 45%, 47%, 1);
  --primary-d-4: hsla(49, 44%, 41%, 1);
  --primary-d-5: hsla(49, 43%, 35%, 1);
  --primary-d-6: hsla(49, 41%, 30%, 1);
  --primary-d-7: hsla(49, 39%, 24%, 1);
  --primary-d-8: hsla(49, 36%, 18%, 1);
  --primary-d-9: hsla(46, 31%, 13%, 1);
  --primary-d-10: hsla(47, 30%, 8%, 1);
  --primary-l-1: hsla(49, 96%, 70%, 1);
  --primary-l-2: hsla(48, 97%, 74%, 1);
  --primary-l-3: hsla(48, 98%, 77%, 1);
  --primary-l-4: hsla(48, 100%, 80%, 1);
  --primary-l-5: hsla(47, 100%, 83%, 1);
  --primary-l-6: hsla(47, 100%, 86%, 1);
  --primary-l-7: hsla(47, 100%, 89%, 1);
  --primary-l-8: hsla(47, 100%, 91%, 1);
  --primary-l-9: hsla(46, 100%, 94%, 1);
  --primary-l-10: hsla(48, 100%, 97%, 1);
  --templates: hsla(0, 50%, 63%, 1);
  --templates-5: hsla(0, 50%, 63%, 0.05);
  --templates-10: hsla(0, 50%, 63%, 0.1);
  --templates-20: hsla(0, 50%, 63%, 0.2);
  --templates-30: hsla(0, 50%, 63%, 0.3);
  --templates-40: hsla(0, 50%, 63%, 0.4);
  --templates-50: hsla(0, 50%, 63%, 0.5);
  --templates-60: hsla(0, 50%, 63%, 0.6);
  --templates-70: hsla(0, 50%, 63%, 0.7);
  --templates-80: hsla(0, 50%, 63%, 0.8);
  --templates-90: hsla(0, 50%, 63%, 0.9);
  --templates-d-1: hsla(0, 29%, 50%, 1);
  --templates-d-2: hsla(1, 28%, 37%, 1);
  --templates-d-3: hsla(1, 26%, 25%, 1);
  --templates-d-4: hsla(2, 23%, 13%, 1);
  --templates-l-1: hsla(1, 53%, 71%, 1);
  --templates-l-2: hsla(2, 57%, 78%, 1);
  --templates-l-3: hsla(3, 60%, 85%, 1);
  --templates-l-4: hsla(3, 64%, 93%, 1);
  --bricksforge: hsla(261, 50%, 53%, 1);
  --bricksforge-5: hsla(261, 50%, 53%, 0.05);
  --bricksforge-10: hsla(261, 50%, 53%, 0.1);
  --bricksforge-20: hsla(261, 50%, 53%, 0.2);
  --bricksforge-30: hsla(261, 50%, 53%, 0.3);
  --bricksforge-40: hsla(261, 50%, 53%, 0.4);
  --bricksforge-50: hsla(261, 50%, 53%, 0.5);
  --bricksforge-60: hsla(261, 50%, 53%, 0.6);
  --bricksforge-70: hsla(261, 50%, 53%, 0.7);
  --bricksforge-80: hsla(261, 50%, 53%, 0.8);
  --bricksforge-90: hsla(261, 50%, 53%, 0.9);
  --bricksforge-d-1: hsla(261, 43%, 42%, 1);
  --bricksforge-d-2: hsla(262, 41%, 31%, 1);
  --bricksforge-d-3: hsla(263, 38%, 21%, 1);
  --bricksforge-d-4: hsla(264, 31%, 12%, 1);
  --bricksforge-l-1: hsla(263, 51%, 62%, 1);
  --bricksforge-l-2: hsla(264, 52%, 72%, 1);
  --bricksforge-l-3: hsla(265, 53%, 81%, 1);
  --bricksforge-l-4: hsla(266, 54%, 90%, 1);
  --docs: hsla(165, 50%, 53%, 1);
  --docs-5: hsla(165, 50%, 53%, 0.05);
  --docs-10: hsla(165, 50%, 53%, 0.1);
  --docs-20: hsla(165, 50%, 53%, 0.2);
  --docs-30: hsla(165, 50%, 53%, 0.3);
  --docs-40: hsla(165, 50%, 53%, 0.4);
  --docs-50: hsla(165, 50%, 53%, 0.5);
  --docs-60: hsla(165, 50%, 53%, 0.6);
  --docs-70: hsla(165, 50%, 53%, 0.7);
  --docs-80: hsla(165, 50%, 53%, 0.8);
  --docs-90: hsla(165, 50%, 53%, 0.9);
  --docs-d-1: hsla(165, 42%, 42%, 1);
  --docs-d-2: hsla(164, 38%, 32%, 1);
  --docs-d-3: hsla(163, 33%, 22%, 1);
  --docs-d-4: hsla(162, 26%, 12%, 1);
  --docs-l-1: hsla(163, 48%, 64%, 1);
  --docs-l-2: hsla(162, 48%, 74%, 1);
  --docs-l-3: hsla(161, 48%, 83%, 1);
  --docs-l-4: hsla(160, 48%, 91%, 1);
  --secondary: hsla(198, 50%, 53%, 1);
  --secondary-5: hsla(198, 50%, 53%, 0.05);
  --secondary-10: hsla(198, 50%, 53%, 0.1);
  --secondary-20: hsla(198, 50%, 53%, 0.2);
  --secondary-30: hsla(198, 50%, 53%, 0.3);
  --secondary-40: hsla(198, 50%, 53%, 0.4);
  --secondary-50: hsla(198, 50%, 53%, 0.5);
  --secondary-60: hsla(198, 50%, 53%, 0.6);
  --secondary-70: hsla(198, 50%, 53%, 0.7);
  --secondary-80: hsla(198, 50%, 53%, 0.8);
  --secondary-90: hsla(198, 50%, 53%, 0.9);
  --secondary-d-1: hsla(198, 42%, 42%, 1);
  --secondary-d-2: hsla(199, 39%, 32%, 1);
  --secondary-d-3: hsla(199, 34%, 22%, 1);
  --secondary-d-4: hsla(200, 26%, 12%, 1);
  --secondary-l-1: hsla(200, 48%, 64%, 1);
  --secondary-l-2: hsla(200, 48%, 73%, 1);
  --secondary-l-3: hsla(201, 47%, 82%, 1);
  --secondary-l-4: hsla(201, 47%, 91%, 1);
  --bg-body: var(--primary-d-10);
  --bg-surface: hsla(64, 0%, 20%, 1);
  --text-body: var(--light-d-2);
  --text-title: var(--light);
  --border-primary: var(--primary-d-7);
  --shadow-primary: hsla(0, 0%, 0%, 0.15);
  --light: hsla(85, 0%, 100%, 1);
  --light-5: hsla(0, 0%, 100%, 0.05);
  --light-10: hsla(0, 0%, 100%, 0.1);
  --light-20: hsla(0, 0%, 100%, 0.2);
  --light-30: hsla(0, 0%, 100%, 0.3);
  --light-40: hsla(0, 0%, 100%, 0.4);
  --light-50: hsla(0, 0%, 100%, 0.5);
  --light-60: hsla(0, 0%, 100%, 0.6);
  --light-70: hsla(0, 0%, 100%, 0.7);
  --light-80: hsla(0, 0%, 100%, 0.8);
  --light-90: hsla(0, 0%, 100%, 0.9);
  --light-d-1: hsla(0, 0%, 90%, 1);
  --light-d-2: hsla(0, 0%, 80%, 1);
  --light-d-3: hsla(0, 0%, 70%, 1);
  --light-d-4: hsla(0, 0%, 60%, 1);
  --light-d-5: hsla(0, 0%, 51%, 1);
  --light-d-6: hsla(0, 0%, 42%, 1);
  --light-d-7: hsla(0, 0%, 34%, 1);
  --light-d-8: hsla(0, 0%, 25%, 1);
  --light-d-9: hsla(0, 0%, 17%, 1);
  --light-d-10: hsla(0, 0%, 10%, 1);
  --dark: hsla(0, 0%, 0%, 1);
  --dark-5: hsla(0, 0%, 0%, 0.05);
  --dark-10: hsla(0, 0%, 0%, 0.1);
  --dark-20: hsla(0, 0%, 0%, 0.2);
  --dark-30: hsla(0, 0%, 0%, 0.3);
  --dark-40: hsla(0, 0%, 0%, 0.4);
  --dark-50: hsla(0, 0%, 0%, 0.5);
  --dark-60: hsla(0, 0%, 0%, 0.6);
  --dark-70: hsla(0, 0%, 0%, 0.7);
  --dark-80: hsla(0, 0%, 0%, 0.8);
  --dark-90: hsla(0, 0%, 0%, 0.9);
  --white: hsla(0, 0%, 100%, 1);
  --white-5: hsla(0, 0%, 100%, 0.05);
  --white-10: hsla(0, 0%, 100%, 0.1);
  --white-20: hsla(0, 0%, 100%, 0.2);
  --white-30: hsla(0, 0%, 100%, 0.3);
  --white-40: hsla(0, 0%, 100%, 0.4);
  --white-50: hsla(0, 0%, 100%, 0.5);
  --white-60: hsla(0, 0%, 100%, 0.6);
  --white-70: hsla(0, 0%, 100%, 0.7);
  --white-80: hsla(0, 0%, 100%, 0.8);
  --white-90: hsla(0, 0%, 100%, 0.9);
  --black: hsla(0, 0%, 0%, 1);
  --black-5: hsla(0, 0%, 0%, 0.05);
  --black-10: hsla(0, 0%, 0%, 0.1);
  --black-20: hsla(0, 0%, 0%, 0.2);
  --black-30: hsla(0, 0%, 0%, 0.3);
  --black-40: hsla(0, 0%, 0%, 0.4);
  --black-50: hsla(0, 0%, 0%, 0.5);
  --black-60: hsla(0, 0%, 0%, 0.6);
  --black-70: hsla(0, 0%, 0%, 0.7);
  --black-80: hsla(0, 0%, 0%, 0.8);
  --black-90: hsla(0, 0%, 0%, 0.9);
  --success: hsla(136, 95%, 56%, 1);
  --success-5: hsla(136, 95%, 56%, 0.05);
  --success-10: hsla(136, 95%, 56%, 0.1);
  --success-20: hsla(136, 95%, 56%, 0.2);
  --success-30: hsla(136, 95%, 56%, 0.3);
  --success-40: hsla(136, 95%, 56%, 0.4);
  --success-50: hsla(136, 95%, 56%, 0.5);
  --success-60: hsla(136, 95%, 56%, 0.6);
  --success-70: hsla(136, 95%, 56%, 0.7);
  --success-80: hsla(136, 95%, 56%, 0.8);
  --success-90: hsla(136, 95%, 56%, 0.9);
  --error: hsla(351, 95%, 56%, 1);
  --error-5: hsla(351, 95%, 56%, 0.05);
  --error-10: hsla(351, 95%, 56%, 0.1);
  --error-20: hsla(351, 95%, 56%, 0.2);
  --error-30: hsla(351, 95%, 56%, 0.3);
  --error-40: hsla(351, 95%, 56%, 0.4);
  --error-50: hsla(351, 95%, 56%, 0.5);
  --error-60: hsla(351, 95%, 56%, 0.6);
  --error-70: hsla(351, 95%, 56%, 0.7);
  --error-80: hsla(351, 95%, 56%, 0.8);
  --error-90: hsla(351, 95%, 56%, 0.9);
  --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
  --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
  --space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
  --space-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
  --space-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
  --space-m: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);
  --space-l: clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem);
  --space-xl: clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem);
  --space-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);
  --space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
  --space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);
  --text-xs: clamp(1.26rem, calc(-0.23vw + 1.34rem), 1.01rem);
  --text-s: clamp(1.42rem, calc(-0.07vw + 1.44rem), 1.35rem);
  --text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
  --text-l: clamp(1.8rem, calc(0.55vw + 1.62rem), 2.4rem);
  --text-xl: clamp(2.02rem, calc(1.09vw + 1.68rem), 3.2rem);
  --text-2xl: clamp(2.28rem, calc(1.84vw + 1.69rem), 4.26rem);
  --text-3xl: clamp(2.56rem, calc(2.89vw + 1.64rem), 5.68rem);
  --text-4xl: clamp(2.88rem, calc(4.34vw + 1.49rem), 7.58rem);
  --hero-title-size: var(--text-4xl);
  --post-title-size: var(--text-2xl);
  --nav-link-size: var(--text-s);
  --header-space: var(--space-s);
  --btn-space: var(--space-xs) var(--space-s);
  --card-space: var(--space-s);
  --footer-space: var(--space-s) var(--space-m);
  --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
  --radius-s: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem);
  --radius-m: clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem);
  --radius-l: clamp(1.6rem, calc(-0.37vw + 2.12rem), 2rem);
  --radius-xl: clamp(2.6rem, calc(-0.56vw + 3.38rem), 3.2rem);
  --radius-full: 999rem;
}
:root.cf-theme-dark,
:root.cf-theme-light .theme-inverted,
:root.cf-theme-light .theme-always-dark,
:root.cf-theme-dark .theme-inverted .theme-always-dark {
  --primary: hsla(50, 94%, 66%, 1);
  --primary-5: hsla(50, 94%, 66%, 0.05);
  --primary-10: hsla(50, 94%, 66%, 0.1);
  --primary-20: hsla(50, 94%, 66%, 0.2);
  --primary-30: hsla(50, 94%, 66%, 0.3);
  --primary-40: hsla(50, 94%, 66%, 0.4);
  --primary-50: hsla(50, 94%, 66%, 0.5);
  --primary-60: hsla(50, 94%, 66%, 0.6);
  --primary-70: hsla(50, 94%, 66%, 0.7);
  --primary-80: hsla(50, 94%, 66%, 0.8);
  --primary-90: hsla(50, 94%, 66%, 0.9);
  --primary-d-1: hsla(50, 70%, 60%, 1);
  --primary-d-2: hsla(50, 54%, 53%, 1);
  --primary-d-3: hsla(50, 46%, 47%, 1);
  --primary-d-4: hsla(50, 45%, 41%, 1);
  --primary-d-5: hsla(49, 43%, 35%, 1);
  --primary-d-6: hsla(49, 42%, 29%, 1);
  --primary-d-7: hsla(49, 40%, 24%, 1);
  --primary-d-8: hsla(48, 37%, 18%, 1);
  --primary-d-9: hsla(48, 33%, 13%, 1);
  --primary-d-10: hsla(47, 30%, 8%, 1);
  --primary-l-1: hsla(49, 96%, 70%, 1);
  --primary-l-2: hsla(49, 97%, 73%, 1);
  --primary-l-3: hsla(48, 99%, 77%, 1);
  --primary-l-4: hsla(48, 100%, 80%, 1);
  --primary-l-5: hsla(48, 100%, 83%, 1);
  --primary-l-6: hsla(48, 100%, 86%, 1);
  --primary-l-7: hsla(48, 100%, 88%, 1);
  --primary-l-8: hsla(48, 100%, 91%, 1);
  --primary-l-9: hsla(48, 100%, 94%, 1);
  --primary-l-10: hsla(48, 100%, 97%, 1);
  --templates: hsla(0, 50%, 63%, 1);
  --templates-5: hsla(0, 50%, 63%, 0.05);
  --templates-10: hsla(0, 50%, 63%, 0.1);
  --templates-20: hsla(0, 50%, 63%, 0.2);
  --templates-30: hsla(0, 50%, 63%, 0.3);
  --templates-40: hsla(0, 50%, 63%, 0.4);
  --templates-50: hsla(0, 50%, 63%, 0.5);
  --templates-60: hsla(0, 50%, 63%, 0.6);
  --templates-70: hsla(0, 50%, 63%, 0.7);
  --templates-80: hsla(0, 50%, 63%, 0.8);
  --templates-90: hsla(0, 50%, 63%, 0.9);
  --templates-d-1: hsla(0, 29%, 50%, 1);
  --templates-d-2: hsla(1, 28%, 37%, 1);
  --templates-d-3: hsla(1, 26%, 25%, 1);
  --templates-d-4: hsla(2, 23%, 13%, 1);
  --templates-l-1: hsla(1, 53%, 71%, 1);
  --templates-l-2: hsla(2, 57%, 78%, 1);
  --templates-l-3: hsla(3, 60%, 85%, 1);
  --templates-l-4: hsla(3, 64%, 93%, 1);
  --bricksforge: hsla(261, 50%, 53%, 1);
  --bricksforge-5: hsla(261, 50%, 53%, 0.05);
  --bricksforge-10: hsla(261, 50%, 53%, 0.1);
  --bricksforge-20: hsla(261, 50%, 53%, 0.2);
  --bricksforge-30: hsla(261, 50%, 53%, 0.3);
  --bricksforge-40: hsla(261, 50%, 53%, 0.4);
  --bricksforge-50: hsla(261, 50%, 53%, 0.5);
  --bricksforge-60: hsla(261, 50%, 53%, 0.6);
  --bricksforge-70: hsla(261, 50%, 53%, 0.7);
  --bricksforge-80: hsla(261, 50%, 53%, 0.8);
  --bricksforge-90: hsla(261, 50%, 53%, 0.9);
  --bricksforge-d-1: hsla(261, 43%, 42%, 1);
  --bricksforge-d-2: hsla(262, 41%, 31%, 1);
  --bricksforge-d-3: hsla(263, 38%, 21%, 1);
  --bricksforge-d-4: hsla(264, 31%, 12%, 1);
  --bricksforge-l-1: hsla(263, 51%, 62%, 1);
  --bricksforge-l-2: hsla(264, 52%, 72%, 1);
  --bricksforge-l-3: hsla(265, 53%, 81%, 1);
  --bricksforge-l-4: hsla(266, 54%, 90%, 1);
  --docs: hsla(165, 50%, 53%, 1);
  --docs-5: hsla(165, 50%, 53%, 0.05);
  --docs-10: hsla(165, 50%, 53%, 0.1);
  --docs-20: hsla(165, 50%, 53%, 0.2);
  --docs-30: hsla(165, 50%, 53%, 0.3);
  --docs-40: hsla(165, 50%, 53%, 0.4);
  --docs-50: hsla(165, 50%, 53%, 0.5);
  --docs-60: hsla(165, 50%, 53%, 0.6);
  --docs-70: hsla(165, 50%, 53%, 0.7);
  --docs-80: hsla(165, 50%, 53%, 0.8);
  --docs-90: hsla(165, 50%, 53%, 0.9);
  --docs-d-1: hsla(165, 42%, 42%, 1);
  --docs-d-2: hsla(164, 38%, 32%, 1);
  --docs-d-3: hsla(163, 33%, 22%, 1);
  --docs-d-4: hsla(162, 26%, 12%, 1);
  --docs-l-1: hsla(163, 48%, 64%, 1);
  --docs-l-2: hsla(162, 48%, 74%, 1);
  --docs-l-3: hsla(161, 48%, 83%, 1);
  --docs-l-4: hsla(160, 48%, 91%, 1);
  --secondary: hsla(198, 50%, 53%, 1);
  --secondary-5: hsla(198, 50%, 53%, 0.05);
  --secondary-10: hsla(198, 50%, 53%, 0.1);
  --secondary-20: hsla(198, 50%, 53%, 0.2);
  --secondary-30: hsla(198, 50%, 53%, 0.3);
  --secondary-40: hsla(198, 50%, 53%, 0.4);
  --secondary-50: hsla(198, 50%, 53%, 0.5);
  --secondary-60: hsla(198, 50%, 53%, 0.6);
  --secondary-70: hsla(198, 50%, 53%, 0.7);
  --secondary-80: hsla(198, 50%, 53%, 0.8);
  --secondary-90: hsla(198, 50%, 53%, 0.9);
  --secondary-d-1: hsla(198, 42%, 42%, 1);
  --secondary-d-2: hsla(199, 39%, 32%, 1);
  --secondary-d-3: hsla(199, 34%, 22%, 1);
  --secondary-d-4: hsla(200, 26%, 12%, 1);
  --secondary-l-1: hsla(200, 48%, 64%, 1);
  --secondary-l-2: hsla(200, 48%, 73%, 1);
  --secondary-l-3: hsla(201, 47%, 82%, 1);
  --secondary-l-4: hsla(201, 47%, 91%, 1);
  --bg-body: var(--primary-d-10);
  --bg-surface: hsla(64, 0%, 20%, 1);
  --text-body: var(--light-d-2);
  --text-title: var(--light);
  --border-primary: var(--primary-d-7);
  --shadow-primary: hsla(0, 0%, 0%, 0.15);
  --light: hsla(85, 0%, 100%, 1);
  --light-5: hsla(0, 0%, 100%, 0.05);
  --light-10: hsla(0, 0%, 100%, 0.1);
  --light-20: hsla(0, 0%, 100%, 0.2);
  --light-30: hsla(0, 0%, 100%, 0.3);
  --light-40: hsla(0, 0%, 100%, 0.4);
  --light-50: hsla(0, 0%, 100%, 0.5);
  --light-60: hsla(0, 0%, 100%, 0.6);
  --light-70: hsla(0, 0%, 100%, 0.7);
  --light-80: hsla(0, 0%, 100%, 0.8);
  --light-90: hsla(0, 0%, 100%, 0.9);
  --light-d-1: hsla(0, 0%, 90%, 1);
  --light-d-2: hsla(0, 0%, 80%, 1);
  --light-d-3: hsla(0, 0%, 70%, 1);
  --light-d-4: hsla(0, 0%, 60%, 1);
  --light-d-5: hsla(0, 0%, 51%, 1);
  --light-d-6: hsla(0, 0%, 42%, 1);
  --light-d-7: hsla(0, 0%, 34%, 1);
  --light-d-8: hsla(0, 0%, 25%, 1);
  --light-d-9: hsla(0, 0%, 17%, 1);
  --light-d-10: hsla(0, 0%, 10%, 1);
  --dark: hsla(0, 0%, 0%, 1);
  --dark-5: hsla(0, 0%, 0%, 0.05);
  --dark-10: hsla(0, 0%, 0%, 0.1);
  --dark-20: hsla(0, 0%, 0%, 0.2);
  --dark-30: hsla(0, 0%, 0%, 0.3);
  --dark-40: hsla(0, 0%, 0%, 0.4);
  --dark-50: hsla(0, 0%, 0%, 0.5);
  --dark-60: hsla(0, 0%, 0%, 0.6);
  --dark-70: hsla(0, 0%, 0%, 0.7);
  --dark-80: hsla(0, 0%, 0%, 0.8);
  --dark-90: hsla(0, 0%, 0%, 0.9);
  --black: hsla(0, 0%, 0%, 1);
  --black-5: hsla(0, 0%, 0%, 0.05);
  --black-10: hsla(0, 0%, 0%, 0.1);
  --black-20: hsla(0, 0%, 0%, 0.2);
  --black-30: hsla(0, 0%, 0%, 0.3);
  --black-40: hsla(0, 0%, 0%, 0.4);
  --black-50: hsla(0, 0%, 0%, 0.5);
  --black-60: hsla(0, 0%, 0%, 0.6);
  --black-70: hsla(0, 0%, 0%, 0.7);
  --black-80: hsla(0, 0%, 0%, 0.8);
  --black-90: hsla(0, 0%, 0%, 0.9);
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding: 0.5em 1.5em;
  background: var(--primary);
  color: var(--black);
  font-size: var(--text-m);
  font-weight: 400;
  border-radius: var(--radius-xs);
  border: 1px solid var(--primary-d-1);
  box-shadow: var(--shadow-m);
  transition: all 0.25s ease-in-out;
  outline: 0;
  cursor: pointer;
}
.btn:hover {
  background: var(--primary-d-1);
  transform: translateY(-0.1rem);
}
.btn.small {
  font-size: var(--text-s);
  padding: var(--space-xs) var(--space-s);
}
.btn.large {
  font-size: var(--text-l);
  padding: 0.4em 1.2em;
}
.btn.tertiary {
  background: var(--tertiary);
  border-color: var(--tertiary-d-1);
}
.btn.ghost {
  color: var(--dark-80);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn.slight {
  color: var(--light);
  background: transparent;
  border-color: var(--primary);
  box-shadow: var(--shadow-s);
}
.btn.secondary {
  background: var(--secondary);
  border-color: var(--secondary-d-1);
}
.btn.ghost:hover {
  background: var(--dark-10);
}
.btn.slight:hover {
  background: var(--dark-5);
}
.btn.tertiary:hover {
  background: var(--tertiary-d-1);
}
.btn.secondary:hover {
  background: var(--secondary-d-1);
}
.btn:focus {
  outline: 4px solid var(--primary-l-3);
  outline-offset: 2px;
}
.btn.no-bg {
  color: var(--dark-80);
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.btn.no-bg:hover {
  color: var(--dark);
}
.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.5em;
  background: var(--primary-30);
  color: var(--text-title);
  border-radius: var(--radius-xs);
  border: 0;
  outline: 0;
}
.badge.secondary {
  color: var(--secondary);
}
.link {
  color: var(--primary-d-2);
  font-size: var(--text-m);
  font-weight: 600;
  letter-spacing: 0.05rem;
  box-shadow: 0 2px 0 var(--primary-20);
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}
.link:hover {
  box-shadow: 0 2px 0 var(--primary-40);
}
.link:focus {
  background: var(--primary-10);
}
.link.secondary {
  color: var(--secondary);
  border-color: var(--secondary-20);
}
.link.tertiary {
  color: var(--tertiary);
  border-color: var(--tertiary-20);
}
.input {
  padding: var(--space-xs) var(--space-s);
  background: var(--dark-5);
  color: var(--text-title);
  font-size: var(--text-m);
  font-weight: 500;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-xs);
  transition: all 0.25s ease-in-out;
  appearance: none;
  outline: 0;
}
.input:focus {
  background: var(--primary-20);
  border-color: var(--primary);
  box-shadow: var(--shadow-l);
}
.input:hover {
  border-color: var(--primary);
  background: transparent;
  box-shadow: var(--shadow-l);
}
.input::placeholder {
  color: var(--dark-40);
}
.input:invalid {
  border-color: var(--error);
  background: var(--error-10);
}
.input:disabled {
  cursor: not-allowed;
  opacity: 0.75;
  box-shadow: none;
  background: var(--dark-10);
}
.select {
  padding: var(--space-xs) var(--space-s);
  background: var(--dark-5);
  color: var(--text-body);
  font-size: var(--text-m);
  font-weight: 500;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-xs);
  transition: all 0.25s ease-in-out;
  outline: 0;
}
.select:focus {
  background: var(--primary-20);
  border-color: var(--primary);
}
.select:hover {
  border-color: var(--primary);
}
.select::placeholder {
  color: var(--dark-40);
}
.select:invalid {
  border-color: var(--error);
  background: var(--error-10);
}
.select:disabled {
  cursor: not-allowed;
  opacity: 0.75;
  box-shadow: none;
  background: var(--dark-10);
}
.icon {
  color: var(--primary-d-2);
  width: var(--space-2xl);
  height: auto;
  font-size: var(--space-2xl);
}
.icon.large {
  width: var(--space-3xl);
  font-size: var(--space-3xl);
}
.icon.secondary {
  color: var(--secondary);
}
.icon.tertiary {
  color: var(--tertiary);
}
.icon.outline {
  padding: 0.5em;
  border: 1px solid var(--border-primary);
  border-radius: 100%;
  box-sizing: content-box;
}
.icon.filled {
  padding: 0.5em;
  border-radius: 100%;
  box-sizing: content-box;
  background: var(--dark-10);
}
.icon.small {
  width: var(--space-l);
  font-size: var(--space-l);
}
.avatar {
  width: var(--space-2xl);
  height: var(--space-2xl);
  border-radius: 100%;
  box-shadow: var(--shadow-m);
  object-fit: cover;
}
.avatar.small {
  width: var(--space-l);
  height: var(--space-l);
}
.avatar.large {
  width: var(--space-4xl);
  height: var(--space-4xl);
}
.divider {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 1px;
  height: 1px;
  max-height: 1px;
  background: var(--border-primary);
  margin: var(--space-m) 0;
  border: 0;
}
.divider.vertical {
  min-width: 1px;
  width: 1px;
  max-width: 1px;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
}
.checkbox {
  appearance: none;
  display: grid;
  place-content: center;
  border: 2px solid var(--dark-40);
  border-radius: var(--radius-s);
  width: clamp(1.8rem, calc(-0.37vw + 2.32rem), 2.2rem);
  height: clamp(1.8rem, calc(-0.37vw + 2.32rem), 2.2rem);
}
.checkbox:checked:before {
  transform: scale(1);
}
.checkbox::before {
  content: "";
  width: 1em;
  height: 1em;
  box-shadow: inset 1em 1em #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 0.2s;
}
.checkbox:hover {
  border-color: var(--primary);
}
.checkbox:focus {
  outline: 3px solid var(--primary-l-3);
  outline-offset: 2px;
}
.checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.radio {
  appearance: none;
  display: grid;
  place-content: center;
  border: 2px solid var(--dark-40);
  border-radius: var(--radius-full);
  width: clamp(1.8rem, calc(-0.37vw + 2.32rem), 2.2rem);
  height: clamp(1.8rem, calc(-0.37vw + 2.32rem), 2.2rem);
}
.radio:checked:before {
  transform: scale(1);
}
.radio::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 100%;
  transform: scale(0);
  transition: transform 0.2s;
  background: var(--primary);
}
.radio:hover {
  border-color: var(--primary);
}
.radio:focus {
  outline: 3px solid var(--primary-l-3);
  outline-offset: 2px;
}
.radio:checked {
  border-color: var(--primary);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-5 {
  background-color: var(--primary-5);
}
.bg-primary-10 {
  background-color: var(--primary-10);
}
.bg-primary-20 {
  background-color: var(--primary-20);
}
.bg-primary-30 {
  background-color: var(--primary-30);
}
.bg-primary-40 {
  background-color: var(--primary-40);
}
.bg-primary-50 {
  background-color: var(--primary-50);
}
.bg-primary-60 {
  background-color: var(--primary-60);
}
.bg-primary-70 {
  background-color: var(--primary-70);
}
.bg-primary-80 {
  background-color: var(--primary-80);
}
.bg-primary-90 {
  background-color: var(--primary-90);
}
.bg-primary-d-1 {
  background-color: var(--primary-d-1);
}
.bg-primary-d-2 {
  background-color: var(--primary-d-2);
}
.bg-primary-d-3 {
  background-color: var(--primary-d-3);
}
.bg-primary-d-4 {
  background-color: var(--primary-d-4);
}
.bg-primary-d-5 {
  background-color: var(--primary-d-5);
}
.bg-primary-d-6 {
  background-color: var(--primary-d-6);
}
.bg-primary-d-7 {
  background-color: var(--primary-d-7);
}
.bg-primary-d-8 {
  background-color: var(--primary-d-8);
}
.bg-primary-d-9 {
  background-color: var(--primary-d-9);
}
.bg-primary-d-10 {
  background-color: var(--primary-d-10);
}
.bg-primary-l-1 {
  background-color: var(--primary-l-1);
}
.bg-primary-l-2 {
  background-color: var(--primary-l-2);
}
.bg-primary-l-3 {
  background-color: var(--primary-l-3);
}
.bg-primary-l-4 {
  background-color: var(--primary-l-4);
}
.bg-primary-l-5 {
  background-color: var(--primary-l-5);
}
.bg-primary-l-6 {
  background-color: var(--primary-l-6);
}
.bg-primary-l-7 {
  background-color: var(--primary-l-7);
}
.bg-primary-l-8 {
  background-color: var(--primary-l-8);
}
.bg-primary-l-9 {
  background-color: var(--primary-l-9);
}
.bg-primary-l-10 {
  background-color: var(--primary-l-10);
}
.text-primary {
  color: var(--primary);
}
.text-primary-5 {
  color: var(--primary-5);
}
.text-primary-10 {
  color: var(--primary-10);
}
.text-primary-20 {
  color: var(--primary-20);
}
.text-primary-30 {
  color: var(--primary-30);
}
.text-primary-40 {
  color: var(--primary-40);
}
.text-primary-50 {
  color: var(--primary-50);
}
.text-primary-60 {
  color: var(--primary-60);
}
.text-primary-70 {
  color: var(--primary-70);
}
.text-primary-80 {
  color: var(--primary-80);
}
.text-primary-90 {
  color: var(--primary-90);
}
.text-primary-d-1 {
  color: var(--primary-d-1);
}
.text-primary-d-2 {
  color: var(--primary-d-2);
}
.text-primary-d-3 {
  color: var(--primary-d-3);
}
.text-primary-d-4 {
  color: var(--primary-d-4);
}
.text-primary-d-5 {
  color: var(--primary-d-5);
}
.text-primary-d-6 {
  color: var(--primary-d-6);
}
.text-primary-d-7 {
  color: var(--primary-d-7);
}
.text-primary-d-8 {
  color: var(--primary-d-8);
}
.text-primary-d-9 {
  color: var(--primary-d-9);
}
.text-primary-d-10 {
  color: var(--primary-d-10);
}
.text-primary-l-1 {
  color: var(--primary-l-1);
}
.text-primary-l-2 {
  color: var(--primary-l-2);
}
.text-primary-l-3 {
  color: var(--primary-l-3);
}
.text-primary-l-4 {
  color: var(--primary-l-4);
}
.text-primary-l-5 {
  color: var(--primary-l-5);
}
.text-primary-l-6 {
  color: var(--primary-l-6);
}
.text-primary-l-7 {
  color: var(--primary-l-7);
}
.text-primary-l-8 {
  color: var(--primary-l-8);
}
.text-primary-l-9 {
  color: var(--primary-l-9);
}
.text-primary-l-10 {
  color: var(--primary-l-10);
}
.border-primary {
  border-color: var(--primary);
  border-color: var(--border-primary);
}
.border-primary-5 {
  border-color: var(--primary-5);
}
.border-primary-10 {
  border-color: var(--primary-10);
}
.border-primary-20 {
  border-color: var(--primary-20);
}
.border-primary-30 {
  border-color: var(--primary-30);
}
.border-primary-40 {
  border-color: var(--primary-40);
}
.border-primary-50 {
  border-color: var(--primary-50);
}
.border-primary-60 {
  border-color: var(--primary-60);
}
.border-primary-70 {
  border-color: var(--primary-70);
}
.border-primary-80 {
  border-color: var(--primary-80);
}
.border-primary-90 {
  border-color: var(--primary-90);
}
.border-primary-d-1 {
  border-color: var(--primary-d-1);
}
.border-primary-d-2 {
  border-color: var(--primary-d-2);
}
.border-primary-d-3 {
  border-color: var(--primary-d-3);
}
.border-primary-d-4 {
  border-color: var(--primary-d-4);
}
.border-primary-d-5 {
  border-color: var(--primary-d-5);
}
.border-primary-d-6 {
  border-color: var(--primary-d-6);
}
.border-primary-d-7 {
  border-color: var(--primary-d-7);
}
.border-primary-d-8 {
  border-color: var(--primary-d-8);
}
.border-primary-d-9 {
  border-color: var(--primary-d-9);
}
.border-primary-d-10 {
  border-color: var(--primary-d-10);
}
.border-primary-l-1 {
  border-color: var(--primary-l-1);
}
.border-primary-l-2 {
  border-color: var(--primary-l-2);
}
.border-primary-l-3 {
  border-color: var(--primary-l-3);
}
.border-primary-l-4 {
  border-color: var(--primary-l-4);
}
.border-primary-l-5 {
  border-color: var(--primary-l-5);
}
.border-primary-l-6 {
  border-color: var(--primary-l-6);
}
.border-primary-l-7 {
  border-color: var(--primary-l-7);
}
.border-primary-l-8 {
  border-color: var(--primary-l-8);
}
.border-primary-l-9 {
  border-color: var(--primary-l-9);
}
.border-primary-l-10 {
  border-color: var(--primary-l-10);
}
.fill-primary {
  fill: var(--primary);
}
.fill-primary-5 {
  fill: var(--primary-5);
}
.fill-primary-10 {
  fill: var(--primary-10);
}
.fill-primary-20 {
  fill: var(--primary-20);
}
.fill-primary-30 {
  fill: var(--primary-30);
}
.fill-primary-40 {
  fill: var(--primary-40);
}
.fill-primary-50 {
  fill: var(--primary-50);
}
.fill-primary-60 {
  fill: var(--primary-60);
}
.fill-primary-70 {
  fill: var(--primary-70);
}
.fill-primary-80 {
  fill: var(--primary-80);
}
.fill-primary-90 {
  fill: var(--primary-90);
}
.fill-primary-d-1 {
  fill: var(--primary-d-1);
}
.fill-primary-d-2 {
  fill: var(--primary-d-2);
}
.fill-primary-d-3 {
  fill: var(--primary-d-3);
}
.fill-primary-d-4 {
  fill: var(--primary-d-4);
}
.fill-primary-d-5 {
  fill: var(--primary-d-5);
}
.fill-primary-d-6 {
  fill: var(--primary-d-6);
}
.fill-primary-d-7 {
  fill: var(--primary-d-7);
}
.fill-primary-d-8 {
  fill: var(--primary-d-8);
}
.fill-primary-d-9 {
  fill: var(--primary-d-9);
}
.fill-primary-d-10 {
  fill: var(--primary-d-10);
}
.fill-primary-l-1 {
  fill: var(--primary-l-1);
}
.fill-primary-l-2 {
  fill: var(--primary-l-2);
}
.fill-primary-l-3 {
  fill: var(--primary-l-3);
}
.fill-primary-l-4 {
  fill: var(--primary-l-4);
}
.fill-primary-l-5 {
  fill: var(--primary-l-5);
}
.fill-primary-l-6 {
  fill: var(--primary-l-6);
}
.fill-primary-l-7 {
  fill: var(--primary-l-7);
}
.fill-primary-l-8 {
  fill: var(--primary-l-8);
}
.fill-primary-l-9 {
  fill: var(--primary-l-9);
}
.fill-primary-l-10 {
  fill: var(--primary-l-10);
}
.bg-templates {
  background-color: var(--templates);
}
.bg-templates-5 {
  background-color: var(--templates-5);
}
.bg-templates-10 {
  background-color: var(--templates-10);
}
.bg-templates-20 {
  background-color: var(--templates-20);
}
.bg-templates-30 {
  background-color: var(--templates-30);
}
.bg-templates-40 {
  background-color: var(--templates-40);
}
.bg-templates-50 {
  background-color: var(--templates-50);
}
.bg-templates-60 {
  background-color: var(--templates-60);
}
.bg-templates-70 {
  background-color: var(--templates-70);
}
.bg-templates-80 {
  background-color: var(--templates-80);
}
.bg-templates-90 {
  background-color: var(--templates-90);
}
.bg-templates-d-1 {
  background-color: var(--templates-d-1);
}
.bg-templates-d-2 {
  background-color: var(--templates-d-2);
}
.bg-templates-d-3 {
  background-color: var(--templates-d-3);
}
.bg-templates-d-4 {
  background-color: var(--templates-d-4);
}
.bg-templates-l-1 {
  background-color: var(--templates-l-1);
}
.bg-templates-l-2 {
  background-color: var(--templates-l-2);
}
.bg-templates-l-3 {
  background-color: var(--templates-l-3);
}
.bg-templates-l-4 {
  background-color: var(--templates-l-4);
}
.text-templates {
  color: var(--templates);
}
.text-templates-5 {
  color: var(--templates-5);
}
.text-templates-10 {
  color: var(--templates-10);
}
.text-templates-20 {
  color: var(--templates-20);
}
.text-templates-30 {
  color: var(--templates-30);
}
.text-templates-40 {
  color: var(--templates-40);
}
.text-templates-50 {
  color: var(--templates-50);
}
.text-templates-60 {
  color: var(--templates-60);
}
.text-templates-70 {
  color: var(--templates-70);
}
.text-templates-80 {
  color: var(--templates-80);
}
.text-templates-90 {
  color: var(--templates-90);
}
.text-templates-d-1 {
  color: var(--templates-d-1);
}
.text-templates-d-2 {
  color: var(--templates-d-2);
}
.text-templates-d-3 {
  color: var(--templates-d-3);
}
.text-templates-d-4 {
  color: var(--templates-d-4);
}
.text-templates-l-1 {
  color: var(--templates-l-1);
}
.text-templates-l-2 {
  color: var(--templates-l-2);
}
.text-templates-l-3 {
  color: var(--templates-l-3);
}
.text-templates-l-4 {
  color: var(--templates-l-4);
}
.border-templates {
  border-color: var(--templates);
}
.border-templates-5 {
  border-color: var(--templates-5);
}
.border-templates-10 {
  border-color: var(--templates-10);
}
.border-templates-20 {
  border-color: var(--templates-20);
}
.border-templates-30 {
  border-color: var(--templates-30);
}
.border-templates-40 {
  border-color: var(--templates-40);
}
.border-templates-50 {
  border-color: var(--templates-50);
}
.border-templates-60 {
  border-color: var(--templates-60);
}
.border-templates-70 {
  border-color: var(--templates-70);
}
.border-templates-80 {
  border-color: var(--templates-80);
}
.border-templates-90 {
  border-color: var(--templates-90);
}
.border-templates-d-1 {
  border-color: var(--templates-d-1);
}
.border-templates-d-2 {
  border-color: var(--templates-d-2);
}
.border-templates-d-3 {
  border-color: var(--templates-d-3);
}
.border-templates-d-4 {
  border-color: var(--templates-d-4);
}
.border-templates-l-1 {
  border-color: var(--templates-l-1);
}
.border-templates-l-2 {
  border-color: var(--templates-l-2);
}
.border-templates-l-3 {
  border-color: var(--templates-l-3);
}
.border-templates-l-4 {
  border-color: var(--templates-l-4);
}
.fill-templates {
  fill: var(--templates);
}
.fill-templates-5 {
  fill: var(--templates-5);
}
.fill-templates-10 {
  fill: var(--templates-10);
}
.fill-templates-20 {
  fill: var(--templates-20);
}
.fill-templates-30 {
  fill: var(--templates-30);
}
.fill-templates-40 {
  fill: var(--templates-40);
}
.fill-templates-50 {
  fill: var(--templates-50);
}
.fill-templates-60 {
  fill: var(--templates-60);
}
.fill-templates-70 {
  fill: var(--templates-70);
}
.fill-templates-80 {
  fill: var(--templates-80);
}
.fill-templates-90 {
  fill: var(--templates-90);
}
.fill-templates-d-1 {
  fill: var(--templates-d-1);
}
.fill-templates-d-2 {
  fill: var(--templates-d-2);
}
.fill-templates-d-3 {
  fill: var(--templates-d-3);
}
.fill-templates-d-4 {
  fill: var(--templates-d-4);
}
.fill-templates-l-1 {
  fill: var(--templates-l-1);
}
.fill-templates-l-2 {
  fill: var(--templates-l-2);
}
.fill-templates-l-3 {
  fill: var(--templates-l-3);
}
.fill-templates-l-4 {
  fill: var(--templates-l-4);
}
.bg-bricksforge {
  background-color: var(--bricksforge);
}
.bg-bricksforge-5 {
  background-color: var(--bricksforge-5);
}
.bg-bricksforge-10 {
  background-color: var(--bricksforge-10);
}
.bg-bricksforge-20 {
  background-color: var(--bricksforge-20);
}
.bg-bricksforge-30 {
  background-color: var(--bricksforge-30);
}
.bg-bricksforge-40 {
  background-color: var(--bricksforge-40);
}
.bg-bricksforge-50 {
  background-color: var(--bricksforge-50);
}
.bg-bricksforge-60 {
  background-color: var(--bricksforge-60);
}
.bg-bricksforge-70 {
  background-color: var(--bricksforge-70);
}
.bg-bricksforge-80 {
  background-color: var(--bricksforge-80);
}
.bg-bricksforge-90 {
  background-color: var(--bricksforge-90);
}
.bg-bricksforge-d-1 {
  background-color: var(--bricksforge-d-1);
}
.bg-bricksforge-d-2 {
  background-color: var(--bricksforge-d-2);
}
.bg-bricksforge-d-3 {
  background-color: var(--bricksforge-d-3);
}
.bg-bricksforge-d-4 {
  background-color: var(--bricksforge-d-4);
}
.bg-bricksforge-l-1 {
  background-color: var(--bricksforge-l-1);
}
.bg-bricksforge-l-2 {
  background-color: var(--bricksforge-l-2);
}
.bg-bricksforge-l-3 {
  background-color: var(--bricksforge-l-3);
}
.bg-bricksforge-l-4 {
  background-color: var(--bricksforge-l-4);
}
.text-bricksforge {
  color: var(--bricksforge);
}
.text-bricksforge-5 {
  color: var(--bricksforge-5);
}
.text-bricksforge-10 {
  color: var(--bricksforge-10);
}
.text-bricksforge-20 {
  color: var(--bricksforge-20);
}
.text-bricksforge-30 {
  color: var(--bricksforge-30);
}
.text-bricksforge-40 {
  color: var(--bricksforge-40);
}
.text-bricksforge-50 {
  color: var(--bricksforge-50);
}
.text-bricksforge-60 {
  color: var(--bricksforge-60);
}
.text-bricksforge-70 {
  color: var(--bricksforge-70);
}
.text-bricksforge-80 {
  color: var(--bricksforge-80);
}
.text-bricksforge-90 {
  color: var(--bricksforge-90);
}
.text-bricksforge-d-1 {
  color: var(--bricksforge-d-1);
}
.text-bricksforge-d-2 {
  color: var(--bricksforge-d-2);
}
.text-bricksforge-d-3 {
  color: var(--bricksforge-d-3);
}
.text-bricksforge-d-4 {
  color: var(--bricksforge-d-4);
}
.text-bricksforge-l-1 {
  color: var(--bricksforge-l-1);
}
.text-bricksforge-l-2 {
  color: var(--bricksforge-l-2);
}
.text-bricksforge-l-3 {
  color: var(--bricksforge-l-3);
}
.text-bricksforge-l-4 {
  color: var(--bricksforge-l-4);
}
.border-bricksforge {
  border-color: var(--bricksforge);
}
.border-bricksforge-5 {
  border-color: var(--bricksforge-5);
}
.border-bricksforge-10 {
  border-color: var(--bricksforge-10);
}
.border-bricksforge-20 {
  border-color: var(--bricksforge-20);
}
.border-bricksforge-30 {
  border-color: var(--bricksforge-30);
}
.border-bricksforge-40 {
  border-color: var(--bricksforge-40);
}
.border-bricksforge-50 {
  border-color: var(--bricksforge-50);
}
.border-bricksforge-60 {
  border-color: var(--bricksforge-60);
}
.border-bricksforge-70 {
  border-color: var(--bricksforge-70);
}
.border-bricksforge-80 {
  border-color: var(--bricksforge-80);
}
.border-bricksforge-90 {
  border-color: var(--bricksforge-90);
}
.border-bricksforge-d-1 {
  border-color: var(--bricksforge-d-1);
}
.border-bricksforge-d-2 {
  border-color: var(--bricksforge-d-2);
}
.border-bricksforge-d-3 {
  border-color: var(--bricksforge-d-3);
}
.border-bricksforge-d-4 {
  border-color: var(--bricksforge-d-4);
}
.border-bricksforge-l-1 {
  border-color: var(--bricksforge-l-1);
}
.border-bricksforge-l-2 {
  border-color: var(--bricksforge-l-2);
}
.border-bricksforge-l-3 {
  border-color: var(--bricksforge-l-3);
}
.border-bricksforge-l-4 {
  border-color: var(--bricksforge-l-4);
}
.fill-bricksforge {
  fill: var(--bricksforge);
}
.fill-bricksforge-5 {
  fill: var(--bricksforge-5);
}
.fill-bricksforge-10 {
  fill: var(--bricksforge-10);
}
.fill-bricksforge-20 {
  fill: var(--bricksforge-20);
}
.fill-bricksforge-30 {
  fill: var(--bricksforge-30);
}
.fill-bricksforge-40 {
  fill: var(--bricksforge-40);
}
.fill-bricksforge-50 {
  fill: var(--bricksforge-50);
}
.fill-bricksforge-60 {
  fill: var(--bricksforge-60);
}
.fill-bricksforge-70 {
  fill: var(--bricksforge-70);
}
.fill-bricksforge-80 {
  fill: var(--bricksforge-80);
}
.fill-bricksforge-90 {
  fill: var(--bricksforge-90);
}
.fill-bricksforge-d-1 {
  fill: var(--bricksforge-d-1);
}
.fill-bricksforge-d-2 {
  fill: var(--bricksforge-d-2);
}
.fill-bricksforge-d-3 {
  fill: var(--bricksforge-d-3);
}
.fill-bricksforge-d-4 {
  fill: var(--bricksforge-d-4);
}
.fill-bricksforge-l-1 {
  fill: var(--bricksforge-l-1);
}
.fill-bricksforge-l-2 {
  fill: var(--bricksforge-l-2);
}
.fill-bricksforge-l-3 {
  fill: var(--bricksforge-l-3);
}
.fill-bricksforge-l-4 {
  fill: var(--bricksforge-l-4);
}
.bg-docs {
  background-color: var(--docs);
}
.bg-docs-5 {
  background-color: var(--docs-5);
}
.bg-docs-10 {
  background-color: var(--docs-10);
}
.bg-docs-20 {
  background-color: var(--docs-20);
}
.bg-docs-30 {
  background-color: var(--docs-30);
}
.bg-docs-40 {
  background-color: var(--docs-40);
}
.bg-docs-50 {
  background-color: var(--docs-50);
}
.bg-docs-60 {
  background-color: var(--docs-60);
}
.bg-docs-70 {
  background-color: var(--docs-70);
}
.bg-docs-80 {
  background-color: var(--docs-80);
}
.bg-docs-90 {
  background-color: var(--docs-90);
}
.bg-docs-d-1 {
  background-color: var(--docs-d-1);
}
.bg-docs-d-2 {
  background-color: var(--docs-d-2);
}
.bg-docs-d-3 {
  background-color: var(--docs-d-3);
}
.bg-docs-d-4 {
  background-color: var(--docs-d-4);
}
.bg-docs-l-1 {
  background-color: var(--docs-l-1);
}
.bg-docs-l-2 {
  background-color: var(--docs-l-2);
}
.bg-docs-l-3 {
  background-color: var(--docs-l-3);
}
.bg-docs-l-4 {
  background-color: var(--docs-l-4);
}
.text-docs {
  color: var(--docs);
}
.text-docs-5 {
  color: var(--docs-5);
}
.text-docs-10 {
  color: var(--docs-10);
}
.text-docs-20 {
  color: var(--docs-20);
}
.text-docs-30 {
  color: var(--docs-30);
}
.text-docs-40 {
  color: var(--docs-40);
}
.text-docs-50 {
  color: var(--docs-50);
}
.text-docs-60 {
  color: var(--docs-60);
}
.text-docs-70 {
  color: var(--docs-70);
}
.text-docs-80 {
  color: var(--docs-80);
}
.text-docs-90 {
  color: var(--docs-90);
}
.text-docs-d-1 {
  color: var(--docs-d-1);
}
.text-docs-d-2 {
  color: var(--docs-d-2);
}
.text-docs-d-3 {
  color: var(--docs-d-3);
}
.text-docs-d-4 {
  color: var(--docs-d-4);
}
.text-docs-l-1 {
  color: var(--docs-l-1);
}
.text-docs-l-2 {
  color: var(--docs-l-2);
}
.text-docs-l-3 {
  color: var(--docs-l-3);
}
.text-docs-l-4 {
  color: var(--docs-l-4);
}
.border-docs {
  border-color: var(--docs);
}
.border-docs-5 {
  border-color: var(--docs-5);
}
.border-docs-10 {
  border-color: var(--docs-10);
}
.border-docs-20 {
  border-color: var(--docs-20);
}
.border-docs-30 {
  border-color: var(--docs-30);
}
.border-docs-40 {
  border-color: var(--docs-40);
}
.border-docs-50 {
  border-color: var(--docs-50);
}
.border-docs-60 {
  border-color: var(--docs-60);
}
.border-docs-70 {
  border-color: var(--docs-70);
}
.border-docs-80 {
  border-color: var(--docs-80);
}
.border-docs-90 {
  border-color: var(--docs-90);
}
.border-docs-d-1 {
  border-color: var(--docs-d-1);
}
.border-docs-d-2 {
  border-color: var(--docs-d-2);
}
.border-docs-d-3 {
  border-color: var(--docs-d-3);
}
.border-docs-d-4 {
  border-color: var(--docs-d-4);
}
.border-docs-l-1 {
  border-color: var(--docs-l-1);
}
.border-docs-l-2 {
  border-color: var(--docs-l-2);
}
.border-docs-l-3 {
  border-color: var(--docs-l-3);
}
.border-docs-l-4 {
  border-color: var(--docs-l-4);
}
.fill-docs {
  fill: var(--docs);
}
.fill-docs-5 {
  fill: var(--docs-5);
}
.fill-docs-10 {
  fill: var(--docs-10);
}
.fill-docs-20 {
  fill: var(--docs-20);
}
.fill-docs-30 {
  fill: var(--docs-30);
}
.fill-docs-40 {
  fill: var(--docs-40);
}
.fill-docs-50 {
  fill: var(--docs-50);
}
.fill-docs-60 {
  fill: var(--docs-60);
}
.fill-docs-70 {
  fill: var(--docs-70);
}
.fill-docs-80 {
  fill: var(--docs-80);
}
.fill-docs-90 {
  fill: var(--docs-90);
}
.fill-docs-d-1 {
  fill: var(--docs-d-1);
}
.fill-docs-d-2 {
  fill: var(--docs-d-2);
}
.fill-docs-d-3 {
  fill: var(--docs-d-3);
}
.fill-docs-d-4 {
  fill: var(--docs-d-4);
}
.fill-docs-l-1 {
  fill: var(--docs-l-1);
}
.fill-docs-l-2 {
  fill: var(--docs-l-2);
}
.fill-docs-l-3 {
  fill: var(--docs-l-3);
}
.fill-docs-l-4 {
  fill: var(--docs-l-4);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-secondary-5 {
  background-color: var(--secondary-5);
}
.bg-secondary-10 {
  background-color: var(--secondary-10);
}
.bg-secondary-20 {
  background-color: var(--secondary-20);
}
.bg-secondary-30 {
  background-color: var(--secondary-30);
}
.bg-secondary-40 {
  background-color: var(--secondary-40);
}
.bg-secondary-50 {
  background-color: var(--secondary-50);
}
.bg-secondary-60 {
  background-color: var(--secondary-60);
}
.bg-secondary-70 {
  background-color: var(--secondary-70);
}
.bg-secondary-80 {
  background-color: var(--secondary-80);
}
.bg-secondary-90 {
  background-color: var(--secondary-90);
}
.bg-secondary-d-1 {
  background-color: var(--secondary-d-1);
}
.bg-secondary-d-2 {
  background-color: var(--secondary-d-2);
}
.bg-secondary-d-3 {
  background-color: var(--secondary-d-3);
}
.bg-secondary-d-4 {
  background-color: var(--secondary-d-4);
}
.bg-secondary-l-1 {
  background-color: var(--secondary-l-1);
}
.bg-secondary-l-2 {
  background-color: var(--secondary-l-2);
}
.bg-secondary-l-3 {
  background-color: var(--secondary-l-3);
}
.bg-secondary-l-4 {
  background-color: var(--secondary-l-4);
}
.text-secondary {
  color: var(--secondary);
}
.text-secondary-5 {
  color: var(--secondary-5);
}
.text-secondary-10 {
  color: var(--secondary-10);
}
.text-secondary-20 {
  color: var(--secondary-20);
}
.text-secondary-30 {
  color: var(--secondary-30);
}
.text-secondary-40 {
  color: var(--secondary-40);
}
.text-secondary-50 {
  color: var(--secondary-50);
}
.text-secondary-60 {
  color: var(--secondary-60);
}
.text-secondary-70 {
  color: var(--secondary-70);
}
.text-secondary-80 {
  color: var(--secondary-80);
}
.text-secondary-90 {
  color: var(--secondary-90);
}
.text-secondary-d-1 {
  color: var(--secondary-d-1);
}
.text-secondary-d-2 {
  color: var(--secondary-d-2);
}
.text-secondary-d-3 {
  color: var(--secondary-d-3);
}
.text-secondary-d-4 {
  color: var(--secondary-d-4);
}
.text-secondary-l-1 {
  color: var(--secondary-l-1);
}
.text-secondary-l-2 {
  color: var(--secondary-l-2);
}
.text-secondary-l-3 {
  color: var(--secondary-l-3);
}
.text-secondary-l-4 {
  color: var(--secondary-l-4);
}
.border-secondary {
  border-color: var(--secondary);
}
.border-secondary-5 {
  border-color: var(--secondary-5);
}
.border-secondary-10 {
  border-color: var(--secondary-10);
}
.border-secondary-20 {
  border-color: var(--secondary-20);
}
.border-secondary-30 {
  border-color: var(--secondary-30);
}
.border-secondary-40 {
  border-color: var(--secondary-40);
}
.border-secondary-50 {
  border-color: var(--secondary-50);
}
.border-secondary-60 {
  border-color: var(--secondary-60);
}
.border-secondary-70 {
  border-color: var(--secondary-70);
}
.border-secondary-80 {
  border-color: var(--secondary-80);
}
.border-secondary-90 {
  border-color: var(--secondary-90);
}
.border-secondary-d-1 {
  border-color: var(--secondary-d-1);
}
.border-secondary-d-2 {
  border-color: var(--secondary-d-2);
}
.border-secondary-d-3 {
  border-color: var(--secondary-d-3);
}
.border-secondary-d-4 {
  border-color: var(--secondary-d-4);
}
.border-secondary-l-1 {
  border-color: var(--secondary-l-1);
}
.border-secondary-l-2 {
  border-color: var(--secondary-l-2);
}
.border-secondary-l-3 {
  border-color: var(--secondary-l-3);
}
.border-secondary-l-4 {
  border-color: var(--secondary-l-4);
}
.fill-secondary {
  fill: var(--secondary);
}
.fill-secondary-5 {
  fill: var(--secondary-5);
}
.fill-secondary-10 {
  fill: var(--secondary-10);
}
.fill-secondary-20 {
  fill: var(--secondary-20);
}
.fill-secondary-30 {
  fill: var(--secondary-30);
}
.fill-secondary-40 {
  fill: var(--secondary-40);
}
.fill-secondary-50 {
  fill: var(--secondary-50);
}
.fill-secondary-60 {
  fill: var(--secondary-60);
}
.fill-secondary-70 {
  fill: var(--secondary-70);
}
.fill-secondary-80 {
  fill: var(--secondary-80);
}
.fill-secondary-90 {
  fill: var(--secondary-90);
}
.fill-secondary-d-1 {
  fill: var(--secondary-d-1);
}
.fill-secondary-d-2 {
  fill: var(--secondary-d-2);
}
.fill-secondary-d-3 {
  fill: var(--secondary-d-3);
}
.fill-secondary-d-4 {
  fill: var(--secondary-d-4);
}
.fill-secondary-l-1 {
  fill: var(--secondary-l-1);
}
.fill-secondary-l-2 {
  fill: var(--secondary-l-2);
}
.fill-secondary-l-3 {
  fill: var(--secondary-l-3);
}
.fill-secondary-l-4 {
  fill: var(--secondary-l-4);
}
.bg-body {
  background-color: var(--bg-body);
}
.bg-surface {
  background-color: var(--bg-surface);
}
.text-body {
  color: var(--text-body);
}
.text-title {
  color: var(--text-title);
}
.bg-dark {
  background-color: var(--dark);
}
.bg-dark-5 {
  background-color: var(--dark-5);
}
.bg-dark-10 {
  background-color: var(--dark-10);
}
.bg-dark-20 {
  background-color: var(--dark-20);
}
.bg-dark-30 {
  background-color: var(--dark-30);
}
.bg-dark-40 {
  background-color: var(--dark-40);
}
.bg-dark-50 {
  background-color: var(--dark-50);
}
.bg-dark-60 {
  background-color: var(--dark-60);
}
.bg-dark-70 {
  background-color: var(--dark-70);
}
.bg-dark-80 {
  background-color: var(--dark-80);
}
.bg-dark-90 {
  background-color: var(--dark-90);
}
.text-dark {
  color: var(--dark);
}
.text-dark-5 {
  color: var(--dark-5);
}
.text-dark-10 {
  color: var(--dark-10);
}
.text-dark-20 {
  color: var(--dark-20);
}
.text-dark-30 {
  color: var(--dark-30);
}
.text-dark-40 {
  color: var(--dark-40);
}
.text-dark-50 {
  color: var(--dark-50);
}
.text-dark-60 {
  color: var(--dark-60);
}
.text-dark-70 {
  color: var(--dark-70);
}
.text-dark-80 {
  color: var(--dark-80);
}
.text-dark-90 {
  color: var(--dark-90);
}
.border-dark {
  border-color: var(--dark);
}
.border-dark-5 {
  border-color: var(--dark-5);
}
.border-dark-10 {
  border-color: var(--dark-10);
}
.border-dark-20 {
  border-color: var(--dark-20);
}
.border-dark-30 {
  border-color: var(--dark-30);
}
.border-dark-40 {
  border-color: var(--dark-40);
}
.border-dark-50 {
  border-color: var(--dark-50);
}
.border-dark-60 {
  border-color: var(--dark-60);
}
.border-dark-70 {
  border-color: var(--dark-70);
}
.border-dark-80 {
  border-color: var(--dark-80);
}
.border-dark-90 {
  border-color: var(--dark-90);
}
.bg-success {
  background-color: var(--success);
}
.bg-success-5 {
  background-color: var(--success-5);
}
.bg-success-10 {
  background-color: var(--success-10);
}
.bg-success-20 {
  background-color: var(--success-20);
}
.bg-success-30 {
  background-color: var(--success-30);
}
.bg-success-40 {
  background-color: var(--success-40);
}
.bg-success-50 {
  background-color: var(--success-50);
}
.bg-success-60 {
  background-color: var(--success-60);
}
.bg-success-70 {
  background-color: var(--success-70);
}
.bg-success-80 {
  background-color: var(--success-80);
}
.bg-success-90 {
  background-color: var(--success-90);
}
.text-success {
  color: var(--success);
}
.text-success-5 {
  color: var(--success-5);
}
.text-success-10 {
  color: var(--success-10);
}
.text-success-20 {
  color: var(--success-20);
}
.text-success-30 {
  color: var(--success-30);
}
.text-success-40 {
  color: var(--success-40);
}
.text-success-50 {
  color: var(--success-50);
}
.text-success-60 {
  color: var(--success-60);
}
.text-success-70 {
  color: var(--success-70);
}
.text-success-80 {
  color: var(--success-80);
}
.text-success-90 {
  color: var(--success-90);
}
.border-success {
  border-color: var(--success);
}
.border-success-5 {
  border-color: var(--success-5);
}
.border-success-10 {
  border-color: var(--success-10);
}
.border-success-20 {
  border-color: var(--success-20);
}
.border-success-30 {
  border-color: var(--success-30);
}
.border-success-40 {
  border-color: var(--success-40);
}
.border-success-50 {
  border-color: var(--success-50);
}
.border-success-60 {
  border-color: var(--success-60);
}
.border-success-70 {
  border-color: var(--success-70);
}
.border-success-80 {
  border-color: var(--success-80);
}
.border-success-90 {
  border-color: var(--success-90);
}
.bg-error {
  background-color: var(--error);
}
.bg-error-5 {
  background-color: var(--error-5);
}
.bg-error-10 {
  background-color: var(--error-10);
}
.bg-error-20 {
  background-color: var(--error-20);
}
.bg-error-30 {
  background-color: var(--error-30);
}
.bg-error-40 {
  background-color: var(--error-40);
}
.bg-error-50 {
  background-color: var(--error-50);
}
.bg-error-60 {
  background-color: var(--error-60);
}
.bg-error-70 {
  background-color: var(--error-70);
}
.bg-error-80 {
  background-color: var(--error-80);
}
.bg-error-90 {
  background-color: var(--error-90);
}
.text-error {
  color: var(--error);
}
.text-error-5 {
  color: var(--error-5);
}
.text-error-10 {
  color: var(--error-10);
}
.text-error-20 {
  color: var(--error-20);
}
.text-error-30 {
  color: var(--error-30);
}
.text-error-40 {
  color: var(--error-40);
}
.text-error-50 {
  color: var(--error-50);
}
.text-error-60 {
  color: var(--error-60);
}
.text-error-70 {
  color: var(--error-70);
}
.text-error-80 {
  color: var(--error-80);
}
.text-error-90 {
  color: var(--error-90);
}
.border-error {
  border-color: var(--error);
}
.border-error-5 {
  border-color: var(--error-5);
}
.border-error-10 {
  border-color: var(--error-10);
}
.border-error-20 {
  border-color: var(--error-20);
}
.border-error-30 {
  border-color: var(--error-30);
}
.border-error-40 {
  border-color: var(--error-40);
}
.border-error-50 {
  border-color: var(--error-50);
}
.border-error-60 {
  border-color: var(--error-60);
}
.border-error-70 {
  border-color: var(--error-70);
}
.border-error-80 {
  border-color: var(--error-80);
}
.border-error-90 {
  border-color: var(--error-90);
}
.text-xs {
  font-size: var(--text-xs);
}
.text-s {
  font-size: var(--text-s);
}
.text-m {
  font-size: var(--text-m);
}
.text-l {
  font-size: var(--text-l);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-3xl {
  font-size: var(--text-3xl);
}
.text-4xl {
  font-size: var(--text-4xl);
}
H1 {
  font-size: var(--text-2xl);
  line-height: 1.1;
}
H2 {
  font-size: var(--text-xl);
  line-height: 1.2;
}
H3 {
  font-size: var(--text-l);
  line-height: 1.3;
}
H4 {
  font-size: var(--text-m);
  line-height: 1.3;
}
H5 {
  font-size: var(--text-m);
  line-height: 1.3;
}
H6 {
  font-size: var(--text-m);
  line-height: 1.4;
}
.line-height-xs {
  line-height: 1;
}
.line-height-s {
  line-height: 1.2;
}
.line-height-m {
  line-height: 1.3;
}
.line-height-l {
  line-height: 1.4;
}
.line-height-xl {
  line-height: 1.5;
}
.italic {
  font-style: italic;
}
.bold {
  font-weight: bold;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.underline {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.font-100 {
  font-weight: 100;
}
.font-200 {
  font-weight: 200;
}
.font-300 {
  font-weight: 300;
}
.font-400 {
  font-weight: 400;
}
.font-500 {
  font-weight: 500;
}
.font-600 {
  font-weight: 600;
}
.font-700 {
  font-weight: 700;
}
.font-800 {
  font-weight: 800;
}
.font-900 {
  font-weight: 900;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.radius-xs {
  border-radius: var(--radius-xs);
}
.radius-s {
  border-radius: var(--radius-s);
}
.radius-m {
  border-radius: var(--radius-m);
}
.radius-l {
  border-radius: var(--radius-l);
}
.radius-xl {
  border-radius: var(--radius-xl);
}
.radius-full {
  border-radius: var(--radius-full);
}
.display-none {
  display: none;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.list-none {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.white-space-nowrap {
  white-space: nowrap;
}
.transition-global {
  transition: all 0.3s;
}
.pointer {
  cursor: pointer;
}
.not-allowed {
  cursor: not-allowed;
}
.cursor-auto {
  cursor: auto;
}
.no-pointer-events {
  pointer-events: none;
}

/* square bg */
.square-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 2px,
      transparent 2px,
      transparent 98px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 2px,
      transparent 2px,
      transparent 98px
    ),
    linear-gradient(
      0deg,
      transparent 98px,
      transparent 100px,
      rgba(0, 0, 0, 0.1) 100px,
      rgba(0, 0, 0, 0.1) 102px
    ),
    linear-gradient(
      90deg,
      transparent 98px,
      transparent 100px,
      rgba(0, 0, 0, 0.1) 100px,
      rgba(0, 0, 0, 0.1) 102px
    );
  background-size: 100px 100px;
  z-index: -1;
}

.square-bg__light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 2px,
      transparent 2px,
      transparent 98px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 2px,
      transparent 2px,
      transparent 98px
    ),
    linear-gradient(
      0deg,
      transparent 98px,
      transparent 100px,
      rgba(255, 255, 255, 0.02) 100px,
      rgba(255, 255, 255, 0.02) 102px
    ),
    linear-gradient(
      90deg,
      transparent 98px,
      transparent 100px,
      rgba(255, 255, 255, 0.02) 100px,
      rgba(255, 255, 255, 0.02) 102px
    );
  background-size: 100px 100px;
  z-index: -1;
}

/* ArBricks Grid Layout */
:root {
  --content-max-width: var(--max-screen-width);
  --section-inline-padding: var(--space-m);
  --ar-grid-layout: [full-start] 1fr [content-start first-start]
    minmax(
      0,
      calc(
        min(
          var(--content-max-width) / 2,
          (100vw - var(--section-inline-padding)) / 2
        )
      )
    )
    [first-end second-start]
    minmax(
      0,
      calc(
        min(
          var(--content-max-width) / 2,
          (100vw - var(--section-inline-padding)) / 2
        )
      )
    )
    [second-end content-end] 1fr [full-end];
}

.ar-grid-layout {
  --content-max-width: var(--max-screen-width);
  --section-inline-padding: var(--space-m);
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [content-start first-start] minmax(
      0,
      calc(
        min(
          var(--content-max-width) / 2,
          (100vw - var(--section-inline-padding)) / 2
        )
      )
    )
    [first-end second-start] minmax(
      0,
      calc(
        min(
          var(--content-max-width) / 2,
          (100vw - var(--section-inline-padding)) / 2
        )
      )
    )
    [second-end content-end] 1fr
    [full-end];
}
.ar-grid-layout > {
  grid-column: content;
}
/* ArBricks Auto Grid */
:root {
  --auto-grid-3: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((3 - 1) * var(--space-m))) / 3) * 0.7,
          (100% - (3 - 1) * var(--space-m)) / 3
        )
      ),
      1fr
    )
  );
  --auto-grid-2: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((2 - 1) * var(--space-m))) / 2) * 0.7,
          (100% - (2 - 1) * var(--space-m)) / 2
        )
      ),
      1fr
    )
  );
  --auto-grid-4: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((4 - 1) * var(--space-m))) / 4) * 0.7,
          (100% - (4 - 1) * var(--space-m)) / 4
        )
      ),
      1fr
    )
  );
  --auto-grid-5: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((5 - 1) * var(--space-m))) / 5) * 0.7,
          (100% - (5 - 1) * var(--space-m)) / 5
        )
      ),
      1fr
    )
  );
  --auto-grid-6: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((6 - 1) * var(--space-m))) / 6) * 0.7,
          (100% - (6 - 1) * var(--space-m)) / 6
        )
      ),
      1fr
    )
  );
  --auto-grid-7: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((7 - 1) * var(--space-m))) / 7) * 0.7,
          (100% - (7 - 1) * var(--space-m)) / 7
        )
      ),
      1fr
    )
  );
  --auto-grid-8: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((8 - 1) * var(--space-m))) / 8) * 0.7,
          (100% - (8 - 1) * var(--space-m)) / 8
        )
      ),
      1fr
    )
  );
  --auto-grid-9: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((9 - 1) * var(--space-m))) / 9) * 0.7,
          (100% - (9 - 1) * var(--space-m)) / 9
        )
      ),
      1fr
    )
  );
  --auto-grid-10: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((10 - 1) * var(--space-m))) / 10) *
            0.7,
          (100% - (10 - 1) * var(--space-m)) / 10
        )
      ),
      1fr
    )
  );
  --auto-grid-11: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((11 - 1) * var(--space-m))) / 11) *
            0.7,
          (100% - (11 - 1) * var(--space-m)) / 11
        )
      ),
      1fr
    )
  );
  --auto-grid-12: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--max-screen-width) - ((12 - 1) * var(--space-m))) / 12) *
            0.7,
          (100% - (12 - 1) * var(--space-m)) / 12
        )
      ),
      1fr
    )
  );
}
header,
section,
main {
  padding-inline: var(--space-m);
}
section {
  display: grid;
  grid-template-columns: repeat(0, 1fr);
  padding-block: var(--space-l);
  inline-size: 100vw;
  padding-inline: var(--space-m);
}
.container {
  display: flex;
  inline-size: 100%;
  max-inline-size: var(--max-screen-width);
  margin-inline: auto;
}