/*
 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.1
 Text Domain:  bricks
*/

:root {

  /*  Color Pallete*/
  /*--action: #fff;
  --action-alt: #fff;
  --brand: #fec200;
  --brand-alt: #fec200;
  --base-900: #0f0f0f;
  --base-850: #181818;
  --base-800: #272727;
  --base-750: #333333;
  --base-700: #3f3f3f;
  --base-600: #575757;
  --base-500: #6f6f6f;
  --base-400: #878787;
  --base-300: #9f9f9f;
  --base-200: #b7b7b7;
  --base-100: #cfcfcf;
  --base-50: #e7e7e7;
  --base-25: #f3f3f3;
  --base-0: #ffffff;*/

  /* GRIDS - Fix equal columns */
  --grid-1: repeat(1, minmax(0, 1fr)); /* 1 equal column */
  --grid-2: repeat(2, minmax(0, 1fr)); /* 2 equal columns */
  --grid-3: repeat(3, minmax(0, 1fr)); /* 3 equal columns */
  --grid-4: repeat(4, minmax(0, 1fr)); /* 4 equal columns */
  --grid-5: repeat(5, minmax(0, 1fr)); /* 5 equal columns */
  --grid-6: repeat(6, minmax(0, 1fr)); /* 6 equal columns */
  
  /* GRIDS - Ratio columns */
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr); /* 1:2 ratio columns */
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr); /* 1:3 ratio columns */
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr); /* 2:1 ratio columns */
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr); /* 2:3 ratio columns */
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr); /* 3:1 ratio columns */
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr); /* 3:2 ratio columns */
  
  /* GRIDS - Dynamic equal columns */
  --grid-auto-fix: repeat(auto-fit, minmax(340px, 1fr)); /* dynamic equal columns min. 340px*/
  --grid-auto: repeat(auto-fit, minmax(min(69.6767001113rem, 100vw - 5rem), 1fr)); /* dynamic 1+ columns */
  --grid-auto-2: repeat(auto-fit, minmax(min(25.0836120401rem, 100vw - 5rem), 1fr)); /* dynamic 2+ columns */
  --grid-auto-3: repeat(auto-fit, minmax(min(18.7969924812rem, 100vw - 5rem), 1fr)); /* dynamic 3+ columns */
  --grid-auto-4: repeat(auto-fit, minmax(min(15.0300601202rem, 100vw - 5rem), 1fr)); /* dynamic 4+ columns */
  --grid-auto-5: repeat(auto-fit, minmax(min(12.5208681135rem, 100vw - 5rem), 1fr)); /* dynamic 5+ columns */
  --grid-auto-6: repeat(auto-fit, minmax(min(10.7296137339rem, 100vw - 5rem), 1fr)); /* dynamic 6+ columns */ 
  
    /* SIZES Heading */
  --htitle: clamp(6.1rem, calc(6.1rem + ((1vw - 0.32rem) * -1.5854)), 4.8rem);
  --h1: clamp(3.3rem, calc(3.3rem + ((1vw - 0.32rem) * 1.7073)), 4.7rem); 
  --h2: clamp(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.3415)), 3.9rem);
  --h3: clamp(2.5rem, calc(2.5rem + ((1vw - 0.32rem) * 0.9756)), 3.3rem);
  --h4: clamp(2.2rem, calc(2.2rem + ((1vw - 0.32rem) * 0.6098)), 2.7rem);
  --h5: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0.3659)), 2.3rem);
  --h6: clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.122)), 1.9rem);

  /* SIZES Text */
  --text-s: clamp(1.3rem, calc(1.3rem + ((1vw - 0.32rem) * 0.122)), 1.4rem);
  --text-m: 1.6rem;
  --text-l: clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.2439)), 2rem);
  --line-height: clamp(1.15, calc(1.15rem + ((1vw - 0.32rem) * 0.122)), 1.25);
  --text-width: min(100%, 50ch);
  --header-width: min(100%, 30ch);
  --logo-size: clamp(5rem, 3.059vw + 2.221rem, 6.4rem);
  --dot-size: clamp(0.2rem, 0.287vw + 0.208rem, 0.4rem);

    /* DECORATIONS */    
  --radius: 1rem; /* Border radius for all elements */
  --shadow: 5 10px 30px 0 hsla(0, 0%, 13%, 0.1); /*block { box-shadow: var(--shadow); }*/
  --focus-width: 3px;
  --card-offset: 8rem;

    /* SPACING */
  --section-block-padding: clamp(5rem, calc(5rem + ((1vw - 0.32rem) * 4.7801)), 10rem); 
  --section-inline-padding: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 3.6585)), 5rem);
  --container-gap: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 1.2195)), 3rem); /*container space higher than content */
  --content-gap: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 1.0976)), 2.5rem);
  --card-gap: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.4878)), 2rem); 
  
  /* COLORS */  
  --focus-color: black;
  --action-color: hsla(0, 100%, 20%, 1);
}

 
/* UTILITY CLASSES */
.grid-1 { display: grid; grid-template-columns: var( --grid-1 ) }
.grid-2 { display: grid; grid-template-columns: var( --grid-2 ) }
.grid-3 { display: grid; grid-template-columns: var( --grid-3 ) }
.grid-4 { display: grid; grid-template-columns: var( --grid-4 ) }
.grid-5 { display: grid; grid-template-columns: var( --grid-5 ) }
.grid-6 { display: grid; grid-template-columns: var( --grid-6 ) }

.grid-1-2 { display: grid; grid-template-columns: var( --grid-1-1 ) }
.grid-1-3 { display: grid; grid-template-columns: var( --grid-1-3 ) }
.grid-2-1 { display: grid; grid-template-columns: var( --grid-2-1 ) }
.grid-2-3 { display: grid; grid-template-columns: var( --grid-2-3 ) }
.grid-3-1 { display: grid; grid-template-columns: var( --grid-3-1 ) }
.grid-3-2 { display: grid; grid-template-columns: var( --grid-3-2 ) }

.grid-auto-fix { display: grid; grid-template-columns: var( --grid-auto-fix ) }
.grid-auto { display: grid; grid-template-columns: var( --grid-auto ) }
.grid-auto-2 { display: grid; grid-template-columns: var( --grid-auto-2 ) }
.grid-auto-3 { display: grid; grid-template-columns: var( --grid-auto-3 ) }
.grid-auto-4 { display: grid; grid-template-columns: var( --grid-auto-4 ) }
.grid-auto-5 { display: grid; grid-template-columns: var( --grid-auto-5 ) }
.grid-auto-6 { display: grid; grid-template-columns: var( --grid-auto-6 ) }

.htitle { font-size: var( --htitle ) }
.h1 {  font-size: var(--h1); }
.h2 {  font-size: var(--h2); }
.h3 {  font-size: var(--h3); }
.h4 {  font-size: var(--h4); }
.h5 {  font-size: var(--h5); }
.h6 {  font-size: var(--h6); }

.text-s {  font-size: var(--text-s); }
.text-m {  font-size: var(--text-m); }
.text-l {  font-size: var(--text-l); }