:root {
  --font-family: "Helvetica Neue", sans-serif;
  --second-family: "Gilroy", sans-serif;
  --font-main: var(--font-family);
  --font-accent: var(--second-family);
  --text-color: #fff;
  --page-bg: #010101;
  --main-yellow: #fed500;
  --input-bg: #121212;
  --caret-color: var(--main-yellow);

  /* базові значення контейнера */
  --container-width: 100%;
  --container-padding: 16px;
}

/* маленькі екрани до 480px */
@media (max-width: 480px) {
  :root {
    --container-width: 100%;
    --container-padding: 16px;
  }
}

/* маленькі + середні екрани до 640px */
@media (min-width: 481px) and (max-width: 640px) {
  :root {
    --container-width: 100%;
    --container-padding: 16px;
  }
}

/* планшети 641px – 767px */
@media (min-width: 641px) and (max-width: 767px) {
  :root {
    --container-width: 100%;
    --container-padding: 16px; /* можна змінити під планшет */
  }
}

/* планшети/малий десктоп 768px – 960px */
@media (min-width: 768px) and (max-width: 960px) {
  :root {
    --container-width: 744px;
    --container-padding: 30px;
  }
}

/* середній десктоп 961px – 1280px */
@media (min-width: 961px) and (max-width: 1280px) {
  :root {
    --container-width: 960px;
    --container-padding: 30px;
  }
}

/* великий десктоп >1280px */
@media (min-width: 1281px) {
  :root {
    --container-width: 1280px;
    --container-padding: 0px;
  }
}