:root {
  --section-padding-block: clamp(40px, calc(14.18px + 7.172vw), 110px);
  --section-padding-inline: clamp(1.600rem, calc(0.308rem + 3.59vw), 7.200rem);
  --container-width: 136.6rem;
  --logo-width:15rem;
 --header-menu-height:80px;

  --color-white: white;
  --color-grey-05: hsl(0, 0%, 95%);
  --color-grey-10: hsl(0, 0%, 90%);
  --color-grey-20: hsl(0, 0%, 80%);
  --color-grey-30: hsl(0, 0%, 70%);
  --color-grey-40: hsl(0, 0%, 60%);
  --color-grey-50: hsl(0, 0%, 50%);
  --color-grey-60: hsl(0, 0%, 40%);
  --color-grey-70: hsl(0, 0%, 30%);
  --color-grey-80: hsl(0, 0%, 20%);
  --color-grey-90: hsl(0, 0%, 10%);
  --color-grey-95: hsl(0, 0%, 5%);


  


  --border-radius-m: 0.4rem;
  --border-radius-l: calc(2 * var(--border-radius-m));
  --border-radius-xl: calc(3 * var(--border-radius-m));
  --border-radius-xxl: calc(4 * var(--border-radius-m));
  --trans-05: .5s ease;
  --trans-02: .2s ease;

  
  --grid-gutter: var(--space-s-l);
  --grid-gutter-m-xl: var(--space-m-xl);
  --grid-gutter-l-xxl: var(--space-l-xxl);
  --grid-gutter-xl-xxxl: var(--space-xl-xxxl);

  --grid-columns: 12;
  --grid-1: minmax(0, 1fr);
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
}