:root {
  /* =========================
     DESKTOP GRID
  ========================= */

  --page-width-desktop: 1440px;
  --container-width: 1200px;
  --page-margin-desktop: 120px;
  --grid-columns-desktop: 12;
  --grid-column-width-desktop: 78px;
  --grid-gutter-desktop: 24px;

  /* =========================
     MOBILE GRID
  ========================= */

  --page-width-mobile: 390px;
  --container-mobile: 342px;
  --page-margin-mobile: 24px;
  --grid-columns-mobile: 4;
  --grid-column-width-mobile: 72px;
  --grid-gutter-mobile: 18px;

  /* =========================
     MEDIA WIDTHS
  ========================= */

  --media-width-standard: 1200px;
  --media-width-wide: 1400px;
  --media-width-full: 100%;

  /* =========================
     HEADER
  ========================= */

  --header-desktop: 80px;
  --header-mobile: 68px;

  /* =========================
     COLORS
  ========================= */

  --black: #111111;
  --white: #ffffff;
  --grey-100: #f5f5f5;
  --grey-300: #d9d9d9;
  --grey-600: #666666;

  /* =========================
     TYPOGRAPHY
  ========================= */

  --font-main: "Work Sans", sans-serif;
}