:root{
  @media (min-width: 1px) and (max-width: 640px) {
    --logo-height: var(--space-48);
    --nav-elements-gap: var(--space-48);

    --section-padding: var(--space-96);
    --section-gap: var(--space-32);
    --section-br: var(--space-32);

    --wrapper-padding: var(--space-42);

    /* block margin */
    --block-gap: var(--space-64);

    /* duże boxy */
    --box-padding: var(--space-24);
    --box-gap: var(--space-32);
    --box-br: var(--space-24);

    /* małe boxy */
    --small-box-padding: var(--space-24);
    --small-box-gap: var(--space-24);
    --small-box-br: var(--space-24);

    --tiny-box-padding: var(--space-12) var(--space-16);
    --tiny-box-gap: var(--space-24);
    --tiny-box-br: var(--space-16);

    /* elements */
    --elements-gap: var(--space-24);
    --paragraph-gap: var(--space-24);

    /* elements */
    --elements-gap: var(--space-16);

    --elements-gap-xl:var(--space-42);
    --elements-gap-l: var(--space-32);
    --elements-gap: var(--space-20);
    --elements-gap-s: var(--space-8);
    --elements-gap-xs: var(--space-8);

    --paragraph-gap: var(--space-20);
  }

  @media (min-width: 1px) and (max-width: 489px) {
    --wrapper-padding: var(--space-32);
  }

 @media (min-width: 641px) and (max-width: 1023px) {

    --logo-height: var(--space-32);
    --nav-elements-gap: var(--space-24);

    --section-padding: var(--space-96);
    --section-gap: var(--space-32);
    --section-br: var(--space-32);

    --wrapper-padding: var(--space-32);

    /* block margin */
    --block-gap: var(--space-64);

    /* duże boxy */
    --box-padding: var(--space-24);
    --box-gap: var(--space-32);
    --box-br: var(--space-24);

    /* małe boxy */
    --small-box-padding: var(--space-24);
    --small-box-gap: var(--space-24);
    --small-box-br: var(--space-24);

    --tiny-box-padding: var(--space-12) var(--space-16);
    --tiny-box-gap: var(--space-24);
    --tiny-box-br: var(--space-16);

    /* elements */
    --elements-gap: var(--space-24);
    --paragraph-gap: var(--space-24);

    /* elements */
    --elements-gap: var(--space-16);

    --elements-gap-xl:var(--space-42);
    --elements-gap-l: var(--space-32);
    --elements-gap: var(--space-20);
    --elements-gap-s: var(--space-8);
    --elements-gap-xs: var(--space-8);

    --paragraph-gap: var(--space-20);
 }

  @media (min-width: 1024px) and (max-width: 1199px) {
    --logo-height: var(--space-48);
    --nav-elements-gap: var(--space-48);

    --section-padding: var(--space-108);
    --section-gap: var(--space-54);
    --section-br: var(--space-32);

    --wrapper-padding: var(--space-32);

    /* block margin */
    --block-gap: var(--space-64);

    /* block margin */
    --block-gap: var(--space-64);

    /* duże boxy */
    --box-padding: var(--space-32);
    --box-gap: var(--space-24);
    --box-br: var(--space-24);

    /* małe boxy */
    --small-box-padding: var(--space-24);
    --small-box-gap: var(--space-24);
    --small-box-br: var(--space-24);

    --tiny-box-padding: var(--space-12) var(--space-16);
    --tiny-box-gap: var(--space-24);
    --tiny-box-br: var(--space-16);

    /* elements */
    --elements-gap: var(--space-16);

    --elements-gap-xl:var(--space-42);
    --elements-gap-l: var(--space-32);
    --elements-gap: var(--space-20);
    --elements-gap-s: var(--space-8);
    --elements-gap-xs: var(--space-8);

    --paragraph-gap: var(--space-20);
  }

  @media (min-width: 1200px) and (max-width: 1599px) {
    --logo-height: var(--space-56);
    --nav-elements-gap: var(--space-48);

    --section-padding: var(--space-108);
    --section-gap: var(--space-54);
    --section-br: var(--space-48);

    --wrapper-padding: var(--space-32);

    /* block margin */
    --block-gap: var(--space-80);

    /* duże boxy */
    --box-padding: var(--space-48);
    --box-gap: var(--space-32);
    --box-br: var(--space-24);

    /* małe boxy */
    --small-box-padding: var(--space-24);
    --small-box-gap: var(--space-32);
    --small-box-br: var(--space-24);

    --tiny-box-padding: var(--space-12) var(--space-16);
    --tiny-box-gap: var(--space-24);
    --tiny-box-br: var(--space-16);

    /* elements */
    --elements-gap-xl:var(--space-42);
    --elements-gap-l: var(--space-36);
    --elements-gap: var(--space-24);
    --elements-gap-s: var(--space-12);
    --elements-gap-xs: var(--space-8);
    --elements-gap-xxs: var(--space-4);

    --paragraph-gap: var(--space-20);

  }

  @media (min-width: 1490px) {
    --logo-height: var(--space-56);
    --nav-elements-gap: var(--space-48);

    --section-padding: var(--space-132);
    --section-gap: var(--space-64);
    --section-br: var(--space-48);

    --wrapper-padding: var(--space-32);

    /* block margin */
    --block-gap: var(--space-80);

    /* duże boxy */
    --box-padding: var(--space-48);
    --box-gap: var(--space-32);
    --box-br: var(--space-24);

    /* małe boxy */
    --small-box-padding: var(--space-32);
    --small-box-gap: var(--space-32);
    --small-box-br: var(--space-24);

    --tiny-box-padding: var(--space-12) var(--space-16);
    --tiny-box-gap: var(--space-24);
    --tiny-box-br: var(--space-16);



    /* elements */
    --elements-gap-xl:var(--space-42);
    --elements-gap-l: var(--space-36);
    --elements-gap: var(--space-24);
    --elements-gap-s: var(--space-12);
    --elements-gap-xs: var(--space-8);
    --elements-gap-xxs: var(--space-4);

    --paragraph-gap: var(--space-20);
  }

}