:root{

/*  section styles*/
--spacing: min(11.42vw, 220px);
--spacing-f: calc(var(--spacing) + 15px);
--spacing-f-n: calc(var(--spacing-f) * -1);
--spacing-n: calc(var(--spacing) * -1);

--spacing-d: min(3.73vw, 72px);
--spacing-d-f: calc(var(--spacing-d) + 15px);
--spacing-d-f-n: calc(var(--spacing-d-f) * -1);
--spacing-d-n: calc(var(--spacing-d) * -1);

--section-offset: 100px;
--section-offset-f: 80px;

/*  row styles*/
  --max-width: 1476px;
  --max-width-d: 1772px;
  --row-offset: 80px;


/*  column styles*/
  --column-gap: 40px;


/*elements styles*/
  --default-gap: 24px;

/*  header height*/
   --hh: 120px;

/*colors*/
 --blue: #00274C;
 --yellow: #FFCB05;
 --pink: #D8A4FF;

 /* fonts */
 --fz-h1: 4rem;
 --fz-h2: 3rem;
 --fz-q: 2.5rem;
 --fz-h3: 1.5rem;
 --fz-h4: 1.5rem;
 --fz-p: 1.125rem;
 --fz-p-xs: 1rem;

 --title-offset: 56px;
 --subtitle-offset: 32px;
 --text-offset: 24px;

}
@media screen and (min-width: 1200px) and (max-width: 1480px){
  :root{
    /*  section styles*/
    --spacing: 9vw;
    --spacing-d: 3vw;

    --section-offset: 80px;
    --row-offset: 64px;

    /*  header height*/
     --hh: 100px;

    /* fonts */
    --fz-h1: 3.5rem;
    --fz-h2: 2.5rem;
    --fz-q: 2rem;
    --fz-h3: 1.375rem;
    --fz-h4: 1.375rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px){
  :root{
    /*  section styles*/
    --spacing: 33px;
    --spacing-d: 33px;

    /* fonts */
    --fz-h1: 3rem;
    --fz-h2: 2rem;
    --fz-q: 1.5rem;
    --fz-h3: 1.25rem;
    --fz-h4: 1.25rem;
    --fz-p: 1rem;
    --fz-p-xs: .875rem;

    --title-offset: 40px;

    /*  header height*/
     --hh: 88px;
  }
}

@media screen and (max-width: 1199px){
  :root{
    /*  section styles*/
    --section-offset: 60px;

    /*  row styles*/
    --row-offset: 40px;
  }

}
@media screen and (max-width: 767px){
  :root{
    /*  section styles*/
    --spacing: 5px;
    --spacing-d: 5px;

    /* fonts */
    --fz-h1: 2.5rem;
    --fz-h2: 1.5rem;
    --fz-q: 1.25rem;
    --fz-h3: 1.125rem;
    --fz-h4: 1.125rem;
    --fz-p: 1rem;
    --fz-p-xs: .875rem;

    --title-offset: 32px;
    --subtitle-offset: 24px;
    --text-offset: 16px;

    /*  header height*/
     --hh: 72px;
  }
}