Variables in CSS styles

styles.css

/* ONE: nested media query and calc */
:root {
  --value: 30px;
}

.element {
  border-radius: var(--value);
  
  @media (min-width: 768px) {
    border-radius: calc(var(--value) * 2);
  }
}

/* TWO: redefining variable against media query separately from style declarations */
:root {
  --value: 30px;
}

@media (min-width: 768px) {
  --value: 60px;
}

.element {
  border-radius: var(--value);
}

In Pure CSS second example doesn't work but after small modification the following works fine.

:root {
  --value: 30px;
}

@media (min-width: 768px) {
  :root {
    --value: 60px;
  }

  /*  OR 
  .element {
    --value: 60px;
  }
  */
}

.element {
  border-radius: var(--value);
}