:root {
  /* Colors */
  --color-primary: hsl(332, 17%, 17%);
  --color-secondary: hsl(22, 14%, 11%);

  --bg-color: hsl(22, 14%, 11%);
  --fg-color: hsl(332, 17%, 17%);

  --color-green-800: hsl(77, 78%, 31%);
  --color-green-700: hsla(77, 78%, 31%, 0.5);
  --color-green-600: hsla(77, 78%, 31%, 0.1);

  --color-gray-500: hsl(333, 15%, 56%);
  --color-gray-100: hsl(0, 0%, 93%);

  --text-color-primary: hsl(0, 0%, 93%);

  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(0, 0%, 0%);

  /* Gradients */

  /* Font-family */
  --font-primary: "Inter", sans-serif;

  /* Font-size */
  --fs-display: 3.2rem;

  --fs-h1: clamp(2.4rem, 4vw, 4.8rem);
  --fs-h2: clamp(1.8rem, 3.3vw, 3.2rem);
  --fs-h3: clamp(2rem, 5vw, 2.4rem);

  --fs-body: clamp(1.5rem, calc(1rem + 1.5vw), 2.4rem);
  --fs-body-md: clamp(1.5rem, calc(1rem + 1.5vw), 2rem);
  --fs-body-sm: 1.4rem;
  --fs-body-lg: clamp(1.6rem, calc(1rem + 1.6vw), 3.2rem);
  --fs-body-tiny: clamp(1.2rem, 2.2vw, 1.6rem);

  --fs-sm-1: 1.4rem;
  --fs-sm-2: clamp(1.3rem, 3vw, 1.6rem);
  --fs-sm-3: clamp(1.2rem, 3vw, 1.5rem);

  /* Font-weight */
  --weight-regular: 400;
  --weight-bold: 600;
  --weight-bolder: 700;

  /* Line-height */

  /* Letter-spacing */

  /* Section-space */
  --section-space: max(71px, 17vw);

  /* Scroll-space */
  --scroll-margin-top: 71px;

  /* Shadow */
  --shadow-sm: 7px 8px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 7px 7px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-lg: 8px 5px 4px 0 rgba(0, 0, 0, 0.25);

  /* Border-radius */
  --radius-1: clamp(29px, 9.06vw, 50px);
  --radius-2: clamp(29px, 9.06vw, 50px);

  /* Transition */
}

@media (min-width: 576px) {
  :root {
    --section-space: calc(110px + 2vw);

    --scroll-margin-top: calc(110px + 2vw);
  }
}

@media (min-width: 768px) {
  :root {
    --fs-body: clamp(1.5rem, 2.5vw, 2.4rem);

    --section-space: clamp(130px, 15vw, 184px);

    --scroll-margin-top: clamp(130px, 15vw, 184px);

    --radius-1: 29px;
    --radius-2: 32px;
  }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}