/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

html.dnb-theme-dark {
  color-scheme: dark;
}
:root,
:root.dnb-theme-dark .theme-inverted,
:root.dnb-theme-dark .theme-always-light,
:root.dnb-theme-light .theme-inverted .theme-always-light {
  --min-screen-width: 320px;
  --max-screen-width: 1280px;

  /* #GROUP: Colors */
  --primary: hsla(238, 100%, 62%, 1);
  --primary-d-1: hsla(240, 56%, 50%, 1);
  --primary-d-2: hsla(243, 54%, 37%, 1);
  --primary-d-3: hsla(246, 51%, 25%, 1);
  --primary-d-4: hsla(250, 43%, 13%, 1);
  --primary-l-1: hsla(247, 100%, 70%, 1);
  --primary-l-2: hsla(251, 100%, 77%, 1);
  --primary-l-3: hsla(254, 100%, 85%, 1);
  --primary-l-4: hsla(256, 100%, 92%, 1);
  --secondary: hsla(198, 74%, 51%, 1);
  --secondary-d-1: hsla(199, 63%, 42%, 1);
  --secondary-d-2: hsla(200, 55%, 32%, 1);
  --secondary-d-3: hsla(201, 46%, 22%, 1);
  --secondary-d-4: hsla(203, 35%, 13%, 1);
  --secondary-l-1: hsla(202, 71%, 65%, 1);
  --secondary-l-2: hsla(203, 70%, 75%, 1);
  --secondary-l-3: hsla(204, 70%, 84%, 1);
  --secondary-l-4: hsla(205, 70%, 92%, 1);
  --action: #fa6161;
  --action-d-1: #b64b49;
  --action-d-2: #773432;
  --action-d-3: #3b1e1c;
  --action-l-1: #ff8b85;
  --action-l-2: #ffb4ad;
  --action-l-3: #ffdbd6;
  --bg-body: hsla(0, 0%, 90%, 1);
  --bg-btn: hsla(336, 97%, 63%, 1);
  --text-body: hsla(0, 0%, 25%, 1);
  --text-title: hsla(0, 0%, 0%, 1);
  --success: #24f95d;
  --error: #f92444;
  /* #ENDGROUP */

  /* #GROUP: Spacing */
  --space-2xs: clamp(0.25rem, calc(0.42vw + 0.17rem), 0.5rem);
  --space-xs: clamp(0.64rem, calc(0.39vw + 0.56rem), 0.88rem);
  --space-sm: clamp(0.75rem, calc(0.42vw + 0.67rem), 1rem);
  --space-base: clamp(1rem, calc(0.83vw + 0.83rem), 1.5rem);
  --space-lg: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem);
  --space-xl: clamp(1.56rem, calc(3.23vw + 0.92rem), 3.5rem);
  --space-2xl: clamp(1.95rem, calc(4.99vw + 0.95rem), 4.95rem);
  --space-3xl: clamp(2.44rem, calc(7.59vw + 0.92rem), 7rem);
  --space-4xl: clamp(3.05rem, calc(11.4vw + 0.77rem), 9.89rem);
  /* #ENDGROUP */
  
  /* #GROUP: Typography */
  --text-xs: clamp(0.79rem, calc(-0.26vw + 0.84rem), 0.63rem);
  --text-sm: clamp(0.89rem, calc(-0.08vw + 0.9rem), 0.84rem);
  --text-base: clamp(1rem, calc(0.21vw + 0.96rem), 1.13rem);
  --text-lg: clamp(1.13rem, calc(0.62vw + 1rem), 1.5rem);
  --text-xl: clamp(1.27rem, calc(1.22vw + 1.02rem), 2rem);
  --text-2xl: clamp(1.42rem, calc(2.07vw + 1.01rem), 2.66rem);
  --text-3xl: clamp(1.6rem, calc(3.25vw + 0.95rem), 3.55rem);
  --hero-title-size: var(--text-4xl);
  --post-title-size: var(--text-2xl);
  /* #ENDGROUP */

  /* #GROUP: Border Radius */
  --radius-xs: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
  --radius-s: clamp(0.38rem, calc(-0.21vw + 0.54rem), 0.5rem);
  --radius-m: clamp(0.63rem, calc(-0.21vw + 0.79rem), 0.75rem);
  --radius-l: clamp(1rem, calc(-0.42vw + 1.33rem), 1.25rem);
  --radius-xl: clamp(1.63rem, calc(-0.63vw + 2.13rem), 2rem);
  --radius-full: 999rem;
  /* #ENDGROUP */
}

:root.dnb-theme-dark,
:root.dnb-theme-light .theme-inverted,
:root.dnb-theme-light .theme-always-dark,
:root.dnb-theme-dark .theme-inverted .theme-always-dark {
  --action: #3d44ff;
  --action-d-1: #3634b7;
  --action-d-2: #2b2579;
  --action-d-3: #1c163b;
  --action-l-1: #8370ff;
  --action-l-2: #b19eff;
  --action-l-3: #d9ccff;
  --bg-body: hsla(0, 0%, 5%, 1);
  --bg-btn: hsla(336, 97%, 43%, 1);
  --text-body: hsla(0, 0%, 75%, 1);
  --text-title: hsla(0, 0%, 100%, 1);
  --success: #24f95d;
  --error: #f92444;
}

/* Color System */
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-d-1 {
  background-color: var(--primary-d-1);
}
.bg-primary-d-2 {
  background-color: var(--primary-d-2);
}
.bg-primary-l-1 {
  background-color: var(--primary-l-1);
}
.bg-primary-l-2 {
  background-color: var(--primary-l-2);
}
.text-primary {
  color: var(--primary);
}
.text-primary-d-1 {
  color: var(--primary-d-1);
}
.text-primary-d-2 {
  color: var(--primary-d-2);
}
.text-primary-l-1 {
  color: var(--primary-l-1);
}
.text-primary-l-2 {
  color: var(--primary-l-2);
}
.border-primary {
  border-color: var(--primary);
  border-color: var(--border-primary);
}
.border-primary-d-1 {
  border-color: var(--primary-d-1);
}
.border-primary-d-2 {
  border-color: var(--primary-d-2);
}
.border-primary-l-1 {
  border-color: var(--primary-l-1);
}
.border-primary-l-2 {
  border-color: var(--primary-l-2);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-secondary-d-1 {
  background-color: var(--secondary-d-1);
}
.bg-secondary-d-2 {
  background-color: var(--secondary-d-2);
}
.bg-secondary-l-1 {
  background-color: var(--secondary-l-1);
}
.bg-secondary-l-2 {
  background-color: var(--secondary-l-2);
}
.text-secondary {
  color: var(--secondary);
}
.text-secondary-d-1 {
  color: var(--secondary-d-1);
}
.text-secondary-d-2 {
  color: var(--secondary-d-2);
}
.text-secondary-l-1 {
  color: var(--secondary-l-1);
}
.text-secondary-l-2 {
  color: var(--secondary-l-2);
}
.border-secondary {
  border-color: var(--secondary);
}
.border-secondary-d-1 {
  border-color: var(--secondary-d-1);
}
.border-secondary-d-2 {
  border-color: var(--secondary-d-2);
}
.border-secondary-l-1 {
  border-color: var(--secondary-l-1);
}
.border-secondary-l-2 {
  border-color: var(--secondary-l-2);
}
.bg-action {
  background-color: var(--action);
}
.bg-action-d-1 {
  background-color: var(--action-d-1);
}
.bg-action-d-2 {
  background-color: var(--action-d-2);
}
.bg-action-l-1 {
  background-color: var(--action-l-1);
}
.bg-action-l-2 {
  background-color: var(--action-l-2);
}
.text-action {
  color: var(--action);
}
.text-action-d-1 {
  color: var(--action-d-1);
}
.text-action-d-2 {
  color: var(--action-d-2);
}
.text-action-l-1 {
  color: var(--action-l-1);
}
.text-action-l-2 {
  color: var(--action-l-2);
}
.text-body {
  color: var(--text-body);
}
.text-title {
  color: var(--text-title);
}
.text-success {
  color: var(--success);
}
.border-success {
  border-color: var(--success);
}
.bg-error {
  background-color: var(--error);
}
.text-error {
  color: var(--error);
}

/* --- Fluid Typography --- */
.text-xs {
  font-size: var(--text-xs);
}
.text-s {
  font-size: var(--text-sm);
}
.text-m {
  font-size: var(--text-base);
}
.text-l {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-3xl {
  font-size: var(--text-3xl);
}

/* Line heights */
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.2;
}
.leading-snug {
  line-height: 1.3;
}
.leading-normal {
  line-height: 1.4;
}
.leading-relaxed {
  line-height: 1.5;
}
.leading-loose {
  line-height: 2;
}

/* Text Modifiers */
.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 Alignment */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* --- LAYOUT --- */
/* Grids */
.row {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
}
.column {
  display: grid;
  grid-auto-flow: row;
  justify-items: start;
  align-content: start;
}
.columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.columns-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.columns-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.columns-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.columns-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.columns-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 1280px) {
  .column--on-xl {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .row--on-xl {
    grid-template-columns: unset;
    grid-auto-flow: column;
  }
  .columns-2--on-xl {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns-3--on-xl {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-4--on-xl {
    grid-template-columns: repeat(4, 1fr);
  }
  .columns-5--on-xl {
    grid-template-columns: repeat(5, 1fr);
  }
  .columns-6--on-xl {
    grid-template-columns: repeat(6, 1fr);
  }
  .columns-12--on-xl {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media (max-width: 991px) {
  .column--on-l {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .row--on-l {
    grid-template-columns: unset;
    grid-auto-flow: column;
  }
  .columns-2--on-l {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns-3--on-l {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-4--on-l {
    grid-template-columns: repeat(4, 1fr);
  }
  .columns-5--on-l {
    grid-template-columns: repeat(5, 1fr);
  }
  .columns-6--on-l {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 767px) {
  .column--on-m {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .row--on-m {
    grid-template-columns: unset;
    grid-auto-flow: column;
  }
  .columns-2--on-m {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns-3--on-m {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-4--on-m {
    grid-template-columns: repeat(4, 1fr);
  }
  .columns-5--on-m {
    grid-template-columns: repeat(5, 1fr);
  }
  .columns-6--on-m {
    grid-template-columns: repeat(6, 1fr);
  }

  .text-left--on-m {
    text-align: left;
  }
  .text-center--on-m {
    text-align: center;
  }
  .text-right--on-m {
    text-align: right;
  }
}
@media (max-width: 478px) {
  .column--on-s {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .row--on-s {
    grid-template-columns: 1fr;
    grid-auto-flow: column;
  }
  .columns-2--on-s {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns-3--on-s {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-4--on-s {
    grid-template-columns: repeat(4, 1fr);
  }

  .text-left--on-s {
    text-align: left;
  }
  .text-center--on-s {
    text-align: center;
  }
  .text-right--on-s {
    text-align: right;
  }
}
/* Fluid Spacing */
.p-2xs {
  padding: var(--space-2xs);
}
.p-xs {
  padding: var(--space-xs);
}
.p-s {
  padding: var(--space-sm);
}
.p-m {
  padding: var(--space-base);
}
.p-l {
  padding: var(--space-lg);
}
.p-xl {
  padding: var(--space-xl);
}
.p-2xl {
  padding: var(--space-2xl);
}
.p-3xl {
  padding: var(--space-3xl);
}
.p-4xl {
  padding: var(--space-4xl);
}
.pl-2xs {
  padding-left: var(--space-2xs);
}
.pl-xs {
  padding-left: var(--space-xs);
}
.pl-s {
  padding-left: var(--space-sm);
}
.pl-m {
  padding-left: var(--space-base);
}
.pl-l {
  padding-left: var(--space-lg);
}
.pl-xl {
  padding-left: var(--space-xl);
}
.pl-2xl {
  padding-left: var(--space-2xl);
}
.pl-3xl {
  padding-left: var(--space-3xl);
}
.pl-4xl {
  padding-left: var(--space-4xl);
}
.pr-2xs {
  padding-right: var(--space-2xs);
}
.pr-xs {
  padding-right: var(--space-xs);
}
.pr-s {
  padding-right: var(--space-sm);
}
.pr-m {
  padding-right: var(--space-base);
}
.pr-l {
  padding-right: var(--space-lg);
}
.pr-xl {
  padding-right: var(--space-xl);
}
.pr-2xl {
  padding-right: var(--space-2xl);
}
.pr-3xl {
  padding-right: var(--space-3xl);
}
.pr-4xl {
  padding-right: var(--space-4xl);
}
.pt-2xs {
  padding-top: var(--space-2xs);
}
.pt-xs {
  padding-top: var(--space-xs);
}
.pt-s {
  padding-top: var(--space-sm);
}
.pt-m {
  padding-top: var(--space-base);
}
.pt-l {
  padding-top: var(--space-lg);
}
.pt-xl {
  padding-top: var(--space-xl);
}
.pt-2xl {
  padding-top: var(--space-2xl);
}
.pt-3xl {
  padding-top: var(--space-3xl);
}
.pt-4xl {
  padding-top: var(--space-4xl);
}
.pb-2xs {
  padding-bottom: var(--space-2xs);
}
.pb-xs {
  padding-bottom: var(--space-xs);
}
.pb-s {
  padding-bottom: var(--space-sm);
}
.pb-m {
  padding-bottom: var(--space-base);
}
.pb-l {
  padding-bottom: var(--space-lg);
}
.pb-xl {
  padding-bottom: var(--space-xl);
}
.pb-2xl {
  padding-bottom: var(--space-2xl);
}
.pb-3xl {
  padding-bottom: var(--space-3xl);
}
.pb-4xl {
  padding-bottom: var(--space-4xl);
}
.px-2xs {
  padding-left: var(--space-2xs);
  padding-right: var(--space-2xs);
}
.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.px-s {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}
.px-m {
  padding-left: var(--space-base);
  padding-right: var(--space-base);
}
.px-l {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.px-2xl {
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}
.px-3xl {
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
}
.px-4xl {
  padding-left: var(--space-4xl);
  padding-right: var(--space-4xl);
}
.py-2xs {
  padding-top: var(--space-2xs);
  padding-bottom: var(--space-2xs);
}
.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.py-s {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.py-m {
  padding-top: var(--space-base);
  padding-bottom: var(--space-base);
}
.py-l {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.py-2xl {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.py-3xl {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
.py-4xl {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}
.m-2xs {
  margin: var(--space-2xs);
}
.m-xs {
  margin: var(--space-xs);
}
.m-s {
  margin: var(--space-sm);
}
.m-m {
  margin: var(--space-base);
}
.m-l {
  margin: var(--space-lg);
}
.m-xl {
  margin: var(--space-xl);
}
.m-2xl {
  margin: var(--space-2xl);
}
.m-3xl {
  margin: var(--space-3xl);
}
.m-4xl {
  margin: var(--space-4xl);
}
.ml-2xs {
  margin-left: var(--space-2xs);
}
.ml-xs {
  margin-left: var(--space-xs);
}
.ml-s {
  margin-left: var(--space-sm);
}
.ml-m {
  margin-left: var(--space-base);
}
.ml-l {
  margin-left: var(--space-lg);
}
.ml-xl {
  margin-left: var(--space-xl);
}
.ml-2xl {
  margin-left: var(--space-2xl);
}
.ml-3xl {
  margin-left: var(--space-3xl);
}
.ml-4xl {
  margin-left: var(--space-4xl);
}
.mr-2xs {
  margin-right: var(--space-2xs);
}
.mr-xs {
  margin-right: var(--space-xs);
}
.mr-s {
  margin-right: var(--space-sm);
}
.mr-m {
  margin-right: var(--space-base);
}
.mr-l {
  margin-right: var(--space-lg);
}
.mr-xl {
  margin-right: var(--space-xl);
}
.mr-2xl {
  margin-right: var(--space-2xl);
}
.mr-3xl {
  margin-right: var(--space-3xl);
}
.mr-4xl {
  margin-right: var(--space-4xl);
}
.mt-2xs {
  margin-top: var(--space-2xs);
}
.mt-xs {
  margin-top: var(--space-xs);
}
.mt-s {
  margin-top: var(--space-sm);
}
.mt-m {
  margin-top: var(--space-base);
}
.mt-l {
  margin-top: var(--space-lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.mt-2xl {
  margin-top: var(--space-2xl);
}
.mt-3xl {
  margin-top: var(--space-3xl);
}
.mt-4xl {
  margin-top: var(--space-4xl);
}
.mb-2xs {
  margin-bottom: var(--space-2xs);
}
.mb-xs {
  margin-bottom: var(--space-xs);
}
.mb-s {
  margin-bottom: var(--space-sm);
}
.mb-m {
  margin-bottom: var(--space-base);
}
.mb-l {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.mb-2xl {
  margin-bottom: var(--space-2xl);
}
.mb-3xl {
  margin-bottom: var(--space-3xl);
}
.mb-4xl {
  margin-bottom: var(--space-4xl);
}
.mx-2xs {
  margin-left: var(--space-2xs);
  margin-right: var(--space-2xs);
}
.mx-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}
.mx-s {
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
}
.mx-m {
  margin-left: var(--space-base);
  margin-right: var(--space-base);
}
.mx-l {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}
.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}
.mx-2xl {
  margin-left: var(--space-2xl);
  margin-right: var(--space-2xl);
}
.mx-3xl {
  margin-left: var(--space-3xl);
  margin-right: var(--space-3xl);
}
.mx-4xl {
  margin-left: var(--space-4xl);
  margin-right: var(--space-4xl);
}
.my-2xs {
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}
.my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.my-s {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.my-m {
  margin-top: var(--space-base);
  margin-bottom: var(--space-base);
}
.my-l {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.my-2xl {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.my-3xl {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}
.my-4xl {
  margin-top: var(--space-4xl);
  margin-bottom: var(--space-4xl);
}
.gap-2xs {
  gap: var(--space-2xs);
}
.gap-xs {
  gap: var(--space-xs);
}
.gap-s {
  gap: var(--space-sm);
}
.gap-m {
  gap: var(--space-base);
}
.gap-l {
  gap: var(--space-lg);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}
.gap-3xl {
  gap: var(--space-3xl);
}
.gap-4xl {
  gap: var(--space-4xl);
}

/* Positioning */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
}
.inset-0 {
  inset: 0;
}
.bottom-0 {
  bottom: 0;
}
.top-0 {
  top: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}

/* Dimensions */
.full-width {
  width: 100%;
}
.full-height {
  height: 100%;
}
.screen-width {
  width: 100vw;
}
.screen-height {
  height: 100vh;
}
.auto-width {
  width: auto;
}
.auto-height {
  height: auto;
}
.width-60 {
  width: 60%;
}
.width-50 {
  width: 50%;
}
.width-40 {
  width: 40%;
}

/* Z-Index */
.-z-1 {
  z-index: -1;
}
.z-0 {
  z-index: 0;
}
.z-1 {
  z-index: 1;
}
.z-10 {
  z-index: 10;
}
.z-100 {
  z-index: 100;
}

/* Border Radius */
.rounded-xs {
  border-radius: var(--radius-xs);
}
.rounded-sm {
  border-radius: var(--radius-s);
}
.rounded-md {
  border-radius: var(--radius-m);
}
.rounded-lg {
  border-radius: var(--radius-l);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-full {
  border-radius: var(--radius-full);
}
.rounded-none {
  border-radius: 0;
}

/* Opacity */
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-100 {
  opacity: 1;
}

/* Image Fit */
.fit-contain {
  object-fit: contain;
}
.fit-cover {
  object-fit: cover;
}
.fit-fill {
  object-fit: fill;
}

/* Utilities */
.hidden {
  display: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.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;
}
.white-space-nowrap {
  white-space: nowrap;
}
.transition-global {
  transition: all 0.3s ease-in-out;
}

/* Cursors */
.cursor-pointer {
  cursor: pointer;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-auto {
  cursor: auto;
}
.pointer-events-none {
  pointer-events: none;
}

/* --- Compontents --- */
.highlight {
  background: var(--primary);
  padding-block: var(--space-base);
  color: #fff;
}

.highlight.secondary {
  background: var(--secondary-l-4);
  color: #000;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4xs);
  padding: var(--space-2xs) var(--space-s);
  background: var(--dark-10);
  color: var(--primary);
  font-size: var(--text-s);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 0;
  outline: 0;
}
.badge.secondary {
  color: var(--secondary);
}

.brxe-form {
  --border-color: darkgray;
  --border-color-accent: var(--primary-l-1);
}
.brxe-form input,
.brxe-form textarea {
  transition: all 0.25s ease-in-out;
  appearance: none;
}
.brxe-form input:focus,
.brxe-form textarea:focus {
  border-color: var(--border-color-accent);
  outline: 1px solid var(--border-color-accent);
}
@media (hover: hover) {
  .brxe-form input:hover,
  .brxe-form textarea:hover {
    border-color: var(--border-color-accent);
  }
}
.brxe-form input::placeholder,
.brxe-form textarea::placeholder {
  color: var(--border-color);
}

.brxe-form select {
  transition: all 0.25s ease-in-out;
}
.brxe-form select:focus {
  outline: 1px solid var(--border-color-accent);
}
@media (hover: hover) {
  .brxe-form select:hover {
    border-color: var(--border-color-accent);
  }
}
.brxe-form input[type="checkbox"] {
  appearance: none;
  display: grid;
  place-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-s);
  width: clamp(1.13rem, calc(-0.42vw + 1.46rem), 1.38rem);
  height: clamp(1.13rem, calc(-0.42vw + 1.46rem), 1.38rem);
}
.brxe-form input[type="checkbox"]:checked:before {
  transform: scale(1);
}
.brxe-form input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.75em;
  box-shadow: inset 1em 1em var(--border-color-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 0.2s;
}
@media (hover: hover) {
  .brxe-form input[type="checkbox"]:hover {
    border-color: var(--border-color-accent);
  }
}
.brxe-form input[type="checkbox"]:focus {
  outline: 2px solid var(--border-color-accent);
}

.brxe-form input[type="radio"] {
  appearance: none;
  display: grid;
  place-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  width: clamp(1.13rem, calc(-0.42vw + 1.46rem), 1.38rem);
  height: clamp(1.13rem, calc(-0.42vw + 1.46rem), 1.38rem);
}
.brxe-form input[type="radio"]:checked:before {
  transform: scale(1);
}
.brxe-form input[type="radio"]::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border-radius: 100%;
  transform: scale(0);
  transition: transform 0.2s;
  background: var(--border-color-accent);
}
@media (hover: hover) {
  .brxe-form input[type="radio"]:hover {
    border-color: var(--border-color-accent);
  }
}
.brxe-form input[type="radio"]:focus {
  outline: 1px solid var(--border-color-accent);
}


.brxe-button.bricks-button:focus-visible {
  outline: 1px solid var(--primary);
}