I just learned that CSS now supports nested selectors! So I can write something like this and it works without using a preprocessor like SCSS:

.cal-link {
  right: -18px;
  top: -6px;
  @media (max-width: 800px) {
    right: 0;
    top: -4px;
  }
}

Here’s the caniuse page for more on browser support.

MDN says there are some limitations around using it with pseudo-elements like ::before though.