:root {

  /*//test variable*/
  --font--size--1: 100px;
  --font--size--2: 80px;
  --font--size--3: 60px;
  --font--size--4: 50px;
  --font--size--4: 40px;

  --test--type: var(--font--size--1);

  /* XXXL */
  --font--size-XXXL-deskXL: 14.063rem;
  --font--size-XXXL-deskL: clamp(9.375rem, -9.377rem + 23.44vw, 14.063rem);
  --font--size-XXXL-tablet: clamp(7.188rem, 3.77628rem + 6.9984vw , 9.375rem);
  --font--size-XXXL-tabletS: clamp(3.75rem, -1.7508rem + 18.336vw, 7.188rem);
  --font--size-XXXL-mobile: 3.75rem;

  --font--size-XXXL: var(--font--size-XXXL-deskXL);



  /* XXL */
  --font--size-XXL-deskXL: 9.375rem;
  --font--size-XXL-deskL: clamp(6.25rem, -6.25rem + 15.625vw, 9.375rem);
  --font--size-XXL-tablet: clamp(5.625rem, 4.65rem + 2vw, 6.25rem);
  --font--size-XXL-tabletS: clamp(3.125rem, -0.875rem + 13.333vw, 5.625rem);
  --font--size-XXL-mobile: 3.125rem;

  --font--size-XXL: var(--font--size-XXL-deskXL);



  /* XL */
  --font--size-XL-deskXL: 6.25rem;
  --font--size-XL-deskL: clamp(5rem, 6.25vw, 6.25rem);
  --font--size-XL-tablet: clamp(3.75rem, 1.8rem + 4vw, 5rem);
  --font--size-XL-tabletS: clamp(2.813rem, 1.3138rem + 4.9973vw, 3.75rem);
  --font--size-XL-mobile: 2.813rem;

  --font--size-XL: var(--font--size-XL-deskXL);



  /* L */
  --font--size-L-deskXL: 44px;
  --font--size-L-deskL: clamp(2.188rem, -0.06rem + 2.81vw, 2.75rem);
  --font--size-L-tablet: clamp(1.75rem, 1.06672rem + 1.4016vw, 2.188rem);
  --font--size-L-tabletS: clamp(1.5rem, 1.1rem + 1.333333vw, 1.75rem);
  --font--size-L-mobile: 1.5rem;

  --font--size-L: var(--font--size-L-deskXL);



  /* M */
  --font--size-M-deskXL: 2.25rem;
  --font--size-M-deskL: clamp(1.813rem, 0.065rem + 2.185vw, 2.25rem);
  --font--size-M-tablet: clamp(1rem, -0.26828rem + 2.6016vw, 1.813rem);
  --font--size-M-tabletS: 1rem;
  --font--size-M-mobile: 1rem;

  --font--size-M: var(--font--size-M-deskXL);


  /* S */
  --font--size-S-deskXL: 1.75rem;
  --font--size-S-deskL: clamp(1.25rem, -0.75rem + 2.5vw, 1.75rem);
  --font--size-S-tablet: clamp(0.75rem, -0.03rem + 1.6vw, 1.25rem);
/*  --font--size-S-tabletS: 0.75rem;
  --font--size-S-mobile: 0.75rem;*/

   /* QA EDIT */
  --font--size-S-tabletS: 0.9rem;
  --font--size-S-mobile: 0.9rem;
   /* QA EDIT */

  --font--size-S: var(--font--size-S-deskXL);

  /* XS */
  --font--size-XS-deskXL: 1.375rem;
  --font--size-XS-deskL: clamp(1.125rem, 0.125rem + 1.25vw, 1.375rem);
  --font--size-XS-tablet: clamp(0.875rem, 0.485rem + 0.8vw, 1.125rem);
  /*--font--size-XS-tabletS: clamp(0.625rem, 0.225rem + 1.3333vw, 0.875rem);
  --font--size-XS-mobile: 0.625rem;*/

  /* QA EDIT */
  --font--size-XS-tabletS: 0.875rem;
  --font--size-XS-mobile: 0.875rem;
   /* QA EDIT */

  --font--size-XS: var(--font--size-XS-deskXL);



  /* XXS */

  --font--size-XXS-deskXL: 20px;
  --font--size-XXS-deskL: 12px;
  --font--size-XXS-tablet: 10px;
  --font--size-XXS-tabletS: 8px;
  --font--size-XXS-mobile: 8px;

  --font--size-XXS: var(--font--size-XXS-deskXL);

  /* XXXS */

  --font--size-XXXS-deskXL: 16px;
  --font--size-XXXS-deskL: 13px;
  --font--size-XXXS-tablet: 12px;
  --font--size-XXXS-tabletS: 10px;
  --font--size-XXXS-mobile: 10px;

  --font--size-XXXS: var(--font--size-XXXS-deskXL);

  /* breadcrumb */

  --font--size-bread-deskXL: 1.25rem;
  --font--size-bread-deskL: clamp(1rem, 1.25vw, 1.25rem);
  --font--size-bread-tablet: clamp(0.75rem, 0.36rem + 0.8vw, 1rem);
  --font--size-bread-tabletS: 0.75rem;
  --font--size-bread-mobile: 0.75rem;

  --font--size-bread: var(--font--size-bread-deskXL);

  /* basic button */
  
  --font--size-basic-button-deskXL: 16px;
  --font--size-basic-button-deskL: 13px;
  --font--size-basic-button-tablet: 13px;
  --font--size-basic-button-tabletS: 12px;
  --font--size-basic-button-mobile: 12px;

  --font--size-basic-button: var(--font--size-basic-button-deskXL);

  /* spacing fixed */

  /* 200 */
  --spacing-200--deskXL: 200px;
  --spacing-200--deskL: 160px;
  --spacing-200--tablet: 100px;
  --spacing-200--tabletS: 100px;
  --spacing-200--mobile: 200px;

  --spacing-200: var(--spacing-200--deskXL);

  /* 150 */
  --spacing-150--deskXL: 150px;
  --spacing-150--deskL: 120px;
  --spacing-150--tablet: 75px;
  --spacing-150--tabletS: 75px;
  --spacing-150--mobile: 150px;

  --spacing-150: var(--spacing-150--deskXL);

  /* 100 */
  --spacing-100--deskXL: 100px;
  --spacing-100--deskL: 80px;
  --spacing-100--tablet: 50px;
  --spacing-100--tabletS: 50px;
  --spacing-100--mobile: 100px;

  --spacing-100: var(--spacing-100--deskXL);

  /* 75 */
  --spacing-75--deskXL: 75px;
  --spacing-75--deskL: 50px;
  --spacing-75--tablet: 38px;
  --spacing-75--tabletS: 38px;
  --spacing-75--mobile: 75px;

  --spacing-75: var(--spacing-75--deskXL);

  /* 50 */
  --spacing-50--deskXL: 50px;
  --spacing-50--deskL: 40px;
  --spacing-50--tablet: 25px;
  --spacing-50--tabletS: 25px;
  --spacing-50--mobile: 50px;

  --spacing-50: var(--spacing-50--deskXL);

  /* 20 */
  --spacing-20--deskXL: 20px;
  --spacing-20--deskL: 20px;
  --spacing-20--tablet: 20px;
  --spacing-20--tabletS: 20px;
  --spacing-20--mobile: 20px;

  --spacing-20: var(--spacing-20--deskXL);

  /* 10 */
  --spacing-10--deskXL: 10px;
  --spacing-10--deskL: 10px;
  --spacing-10--tablet: 10px;
  --spacing-10--tabletS: 10px;
  --spacing-10--mobile: 10px;

  --spacing-10: var(--spacing-10--deskXL);


  /* responsive card medium */
  --spacing-responsive-card-medium--deskXL: 60px;
  --spacing-responsive-card-medium--deskL: 60px;
  --spacing-responsive-card-medium--tablet: 40px;
  --spacing-responsive-card-medium--tabletS: 40px;
  --spacing-responsive-card-medium--mobile: 40px;

  --spacing-responsive-card-medium: var(--spacing-responsive-card-medium--deskXL);
}

@media(min-width: 1600px) {
/*//lap*/
	:root {
		--test--type: var(--font--size--1);

    --font--size-XXXL: var(--font--size-XXXL-deskXL);

    --font--size-XXL: var(--font--size-XXL-deskXL);

    --font--size-XL: var(--font--size-XL-deskXL);

		--font--size-L: var(--font--size-L-deskXL);

    --font--size-M: var(--font--size-M-deskXL);

    --font--size-S: var(--font--size-S-deskXL);

    --font--size-XS: var(--font--size-XS-deskXL);

    --font--size-XXS: var(--font--size-XXS-deskXL);

    --font--size-XXXS: var(--font--size-XXXS-deskXL);

    --font--size-bread: var(--font--size-bread-deskXL);

    --font--size-basic-button: var(--font--size-basic-button-deskXL);

    /*spacing*/

    --spacing-200: var(--spacing-200--deskXL);

    --spacing-150: var(--spacing-150--deskXL);

    --spacing-100: var(--spacing-100--deskXL);

    --spacing-75: var(--spacing-75--deskXL);

    --spacing-50: var(--spacing-50--deskXL);

    --spacing-20: var(--spacing-20--deskXL);

    --spacing-10: var(--spacing-10--deskXL);
    
    --spacing-responsive-card-medium: var(--spacing-responsive-card-medium--deskXL);
	}
}

@media(max-width: 1599px) and (min-width: 1280px) {
/*//lap*/
	:root {
		--test--type: var(--font--size--2);

    --font--size-XXXL: var(--font--size-XXXL-deskL);

    --font--size-XXL: var(--font--size-XXL-deskL);

    --font--size-XL: var(--font--size-XL-deskL);

		--font--size-L: var(--font--size-L-deskL);

    --font--size-M: var(--font--size-M-deskL);

    --font--size-S: var(--font--size-S-deskL);

    --font--size-XS: var(--font--size-XS-deskL);

    --font--size-XXS: var(--font--size-XXS-deskL);

    --font--size-XXXS: var(--font--size-XXXS-deskL);

    --font--size-bread: var(--font--size-bread-deskL);

    --font--size-basic-button: var(--font--size-basic-button-deskL);

    --spacing-200: var(--spacing-200--deskL);

    --spacing-150: var(--spacing-150--deskL);

    --spacing-100: var(--spacing-100--deskL);

    --spacing-75: var(--spacing-75--deskL);

    --spacing-50: var(--spacing-50--deskL);

    --spacing-20: var(--spacing-20--deskL);

    --spacing-10: var(--spacing-10--deskL);

    --spacing-responsive-card-medium: var(--spacing-responsive-card-medium--deskL);
	}
}

@media(max-width: 1279px) and (min-width: 780px) {
/*//lap*/
	:root {
		--test--type: var(--font--size--3);

    --font--size-XXXL: var(--font--size-XXXL-tablet);

    --font--size-XXL: var(--font--size-XXL-tablet);

    --font--size-XL: var(--font--size-XL-tablet);

		--font--size-L: var(--font--size-L-tablet);

    --font--size-M: var(--font--size-M-tablet);

    --font--size-S: var(--font--size-S-tablet);

    --font--size-XS: var(--font--size-XS-tablet);

    --font--size-XXS: var(--font--size-XXS-tablet);

    --font--size-XXXS: var(--font--size-XXXS-tablet);

    --font--size-bread: var(--font--size-bread-tablet);

    --font--size-basic-button: var(--font--size-basic-button-tablet);

    --spacing-200: var(--spacing-200--tablet);

    --spacing-150: var(--spacing-150--tablet);

    --spacing-100: var(--spacing-100--tablet);

    --spacing-75: var(--spacing-75--tablet);

    --spacing-50: var(--spacing-50--tablet);

    --spacing-20: var(--spacing-20--tablet);

    --spacing-10: var(--spacing-10--tablet);

    --spacing-responsive-card-medium: var(--spacing-responsive-card-medium--tablet);
	}
}

@media(max-width: 779px) and (min-width: 480px) {
/*//lap*/
	:root {
		--test--type: var(--font--size--4);

    --font--size-XXXL: var(--font--size-XXXL-tabletS);

    --font--size-XXL: var(--font--size-XXL-tabletS);

    --font--size-XL: var(--font--size-XL-tabletS);

		--font--size-L: var(--font--size-L-tabletS);

    --font--size-M: var(--font--size-M-tabletS);

    --font--size-S: var(--font--size-S-tabletS);

    --font--size-XS: var(--font--size-XS-tabletS);

    --font--size-XXS: var(--font--size-XXS-tabletS);

    --font--size-XXXS: var(--font--size-XXXS-tabletS);

    --font--size-bread: var(--font--size-bread-tabletS);

    --font--size-basic-button: var(--font--size-basic-button-tabletS);

    --spacing-200: var(--spacing-200--tabletS);

    --spacing-150: var(--spacing-150--tabletS);

    --spacing-100: var(--spacing-100--tabletS);

    --spacing-75: var(--spacing-75--tabletS);

    --spacing-50: var(--spacing-50--tabletS);

    --spacing-20: var(--spacing-20--tabletS);

    --spacing-10: var(--spacing-10--tabletS);

    --spacing-responsive-card-medium: var(--spacing-responsive-card-medium--tabletS);
	}
}
@media screen and (max-width: 479px) {
/*//mobile*/
	:root {
		--test--type: var(--font--size--5);

    --font--size-XXXL: var(--font--size-XXXL-mobile);

    --font--size-XXL: var(--font--size-XXL-mobile);

    --font--size-XL: var(--font--size-XL-mobile);

		--font--size-L: var(--font--size-L-mobile);

    --font--size-M: var(--font--size-M-mobile);

    --font--size-S: var(--font--size-S-mobile);

    --font--size-XS: var(--font--size-XS-mobile);

    --font--size-XXS: var(--font--size-XXS-mobile);

    --font--size-XXXS: var(--font--size-XXXS-mobile);

    --font--size-bread: var(--font--size-bread-mobile);

    --font--size-basic-button: var(--font--size-basic-button-mobile);

    --spacing-200: var(--spacing-200--mobile);

    --spacing-150: var(--spacing-150--mobile);

    --spacing-100: var(--spacing-100--mobile);

    --spacing-75: var(--spacing-75--mobile);

    --spacing-50: var(--spacing-50--mobile);

    --spacing-20: var(--spacing-20--mobile);

    --spacing-10: var(--spacing-10--mobile);

    --spacing-responsive-card-medium: var(--spacing-responsive-card-medium--mobile);
	}
}