@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600&display=swap');

:root {
  /*  ACCENT FONT (for headings and buttons) */
  --cgd-accent-font-family: 'Poppins', sans-serif;

  /*******************   BODY    ********************/
  --cgd-body__font-size--1: 1rem;
  --cgd-body__line-height--1: 1.75rem;
  --cgd-body__font-weight--1: 400;

  --cgd-body__font-size--2: 0.875rem;
  --cgd-body__line-height--2: 1.25rem;
  --cgd-body__font-weight--2: 400;
  /****************   END OF BODY    ****************/


  /*****************   HEADINGS    ******************/
  --cgd-h1__font-size: 3rem;
  --cgd-h1__line-height: 4rem;
  --cgd-h1__font-weight: 400;

  --cgd-h2__font-size: 2.375rem;
  --cgd-h2__line-height: 3.375rem;
  --cgd-h2__font-weight: 400;

  --cgd-h3__font-size: 2rem;
  --cgd-h3__line-height: 2.75rem;
  --cgd-h3__font-weight: 400;

  --cgd-h4__font-size: 1.5rem;
  --cgd-h4__line-height: 2.125rem;
  --cgd-h4__font-weight: 400;

  --cgd-h5__font-size: 1.25rem;
  --cgd-h5__line-height: 1.75rem;
  --cgd-h5__font-weight: 400;

  --cgd-h6__font-size: 1.25rem;
  --cgd-h6__line-height: 1.75rem;
  --cgd-h6__font-weight: 600;
  /**************   END OF HEADINGS    **************/


  /*****************   SUBTITLES    *****************/
  --cgd-subtitle-1__font-size: 1rem;
  --cgd-subtitle-1__line-height: 1.3125rem;
  --cgd-subtitle-1__font-weight: 400;

  --cgd-subtitle-2__font-size: 0.875rem;
  --cgd-subtitle-2__line-height: 1.375rem;
  --cgd-subtitle-2__font-weight: 500;
  /*************   END OF SUBTITLES    **************/


  /******************   BUTTONS    ******************/
  --cgd-button__font-size--small: 0.75rem;
  --cgd-button__line-height--small: 1.25rem;
  --cgd-button__font-weight--small: 600;

  --cgd-button__font-size--regular: 0.875rem;
  --cgd-button__line-height--regular: 1.25rem;
  --cgd-button__font-weight--regular: 600;

  --cgd-button__font-size--large: 1rem;
  --cgd-button__line-height--large: 1.5rem;
  --cgd-button__font-weight--large: 600;
  /***************   END OF BUTTONS    **************/


  /******************   LINKS    ********************/
  --cgd-link__text-decoration: underline;

  --cgd-link__font-size--small: 0.75rem;
  --cgd-link__font-weight--small: 400;
  --cgd-link__line-height--small: 1.125rem;

  --cgd-link__font-size--regular: 0.875rem;
  --cgd-link__font-weight--regular: 400;
  --cgd-link__line-height--regular: 1.25rem;

  --cgd-link__font-size--large: 1rem;
  --cgd-link__font-weight--large: 400;
  --cgd-link__line-height--large: 1.3125rem;
  /****************   END OF LINKS    ***************/


  /******************   LABELS    *******************/
  --cgd-label__font-size--small: 0.75rem;
  --cgd-label__font-weight--small: 400;
  --cgd-label__line-height--small: 1.25rem;

  --cgd-label__font-size--regular: 0.875rem;
  --cgd-label__font-weight--regular: 400;
  --cgd-label__line-height--regular: 1.25rem;

  --cgd-label__font-size--large: 1rem;
  --cgd-label__font-weight--large: 400;
  --cgd-label__line-height--large: 1.5rem;
  /***************   END OF LABELS    ***************/


  /******************   SIZINGS    ******************/
  --cgd-sizing--x-small: 0.5rem;
  --cgd-sizing--small: 1rem;
  --cgd-sizing--regular: 1.5rem;
  --cgd-sizing--medium: 2rem;
  --cgd-sizing--large: 3rem;
  --cgd-sizing--x-large: 4rem;
  /***************   END OF SIZINGS    **************/

  
  /*****************   SPACINGS    ******************/
  --cgd-spacing--1: 0.063rem;
  --cgd-spacing--2: 0.125rem;
  --cgd-spacing--4: 0.25rem;
  --cgd-spacing--8: 0.5rem;
  --cgd-spacing--12: 0.75rem;
  --cgd-spacing--16: 1rem;
  --cgd-spacing--20: 1.25rem;
  --cgd-spacing--24: 1.5rem;
  --cgd-spacing--28: 1.75rem;
  --cgd-spacing--32: 2rem;
  --cgd-spacing--40: 2.5rem;
  --cgd-spacing--48: 3rem;
  --cgd-spacing--56: 3.5rem;
  --cgd-spacing--64: 4rem;
  /**************   END OF SPACINGS    **************/


  /***************   BORDER-RADIUS    ***************/  
  --cgd-radius--x-small: 0.25rem;
  --cgd-radius--small: 0.5rem;
  --cgd-radius--medium: 0.75rem;
  --cgd-radius--large: 1rem;
  --cgd-radius--x-large: 1.5rem;
  --cgd-radius--rounded: 63rem;
  /************   END OF BORDER-RADIUS    ***********/


  /* DIVIDER */
  --cgd-divider__color: var(--color__grey--5);
  --cgd-divider__thickness: 1px;

  /* GRID */
  --cgd-grid__n-columns: 12;
  --cgd-grid__margin: 1rem;
  --cgd-grid__gap: 1rem;
}


/* <= 1400px */
@media (max-width:87.5rem) {
  :root {
    --cgd-grid__n-columns: 12;
    --cgd-grid__margin: 1rem;
  }
}

/* <= 1200px */
@media (max-width:75rem) {
  :root {
    --cgd-grid__n-columns: 8;
    --cgd-grid__margin: 1rem;
  }
}

/* <= 992px */
@media (max-width:62rem) {
  :root {
    --cgd-grid__n-columns: 6;
    --cgd-grid__margin: 0.5rem;
  }
}

/* <= 768px */
@media (max-width:48rem) {
  :root {
    --cgd-grid__n-columns: 6;
    --cgd-grid__margin: 0.5rem;
  }
}

/* <= 567px */
@media (max-width:35.4375rem) {
  :root {
    --cgd-grid__n-columns: 6;
    --cgd-grid__margin: 0.5rem;
  }
}