/*
 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 {
  /* Font Sizes */
  --body-font-size: 18px;
  --sb-font: 16px; /* body small */
  --lb-font: 20px;
  --xlb-font: 22px;
  --h1-font: 60px;
  --h2-font: 45px;
  --h3-font: 37px; /* added to scale nicely */
  --h4-font: 30px;
  --h5-font: 25px;
  --h6-font: 20px; /* adjusted since h6 = h4 looked odd */

  --mega-font: 94px;

  /* Spacing Variables */
  --10-space: 10px;
  --15-space: 15px;
  --20-space: 20px;
  --25-space: 25px;
  --30-space: 30px;
  --40-space: 40px;
  --50-space: 50px;
  --60-space: 60px;
  --80-space: 80px;
  --100-space: 100px;
  --150-space: 150px;
}

/* Tablet Portrait: max-width 991px */
@media (max-width: 991px) {
  :root {
    --body-font-size: 16px;
    --sb-font: 14px;
    --lb-font: 18px;
    --xlb-font: 20px;
    --h1-font: 52px;
    --h2-font: 38px;
    --h3-font: 31px;
    --h4-font: 26px;
    --h5-font: 22px;
    --h6-font: 18px;

    --mega-font: 80px;

    --10-space: 8px;
    --15-space: 10px;
    --20-space: 15px;
    --25-space: 20px;
    --30-space: 25px;
    --40-space: 30px;
    --50-space: 40px;
    --60-space: 50px;
    --80-space: 60px;
    --100-space: 70px;
    --150-space: 100px;
  }
}

/* Mobile Landscape: max-width 767px */
@media (max-width: 767px) {
  :root {
    --body-font-size: 15px;
    --sb-font: 13px;
    --lb-font: 17px;
    --xlb-font: 19px;
    --h1-font: 42px;
    --h2-font: 32px;
    --h3-font: 26px;
    --h4-font: 22px;
    --h5-font: 18px;
    --h6-font: 16px;

    --mega-font: 60px;

    --10-space: 6px;
    --15-space: 8px;
    --20-space: 10px;
    --25-space: 15px;
    --30-space: 20px;
    --40-space: 25px;
    --50-space: 30px;
    --60-space: 35px;
    --80-space: 45px;
    --100-space: 55px;
    --150-space: 70px;
  }
}

/* Mobile Portrait: max-width 478px */
@media (max-width: 478px) {
  :root {
    --body-font-size: 14px;
    --sb-font: 12px;
    --lb-font: 16px;
    --xlb-font: 18px;
    --h1-font: 36px;
    --h2-font: 28px;
    --h3-font: 22px;
    --h4-font: 20px;
    --h5-font: 16px;
    --h6-font: 14px;

    --mega-font: 50px;

    --10-space: 5px;
    --15-space: 6px;
    --20-space: 8px;
    --25-space: 10px;
    --30-space: 15px;
    --40-space: 20px;
    --50-space: 25px;
    --60-space: 30px;
    --80-space: 35px;
    --100-space: 40px;
    --150-space: 50px;
  }
}
