Replace dart-sass with PostCSS-only pipeline; migrate SCSS to modern CSS

The way the breakpoints are converted is kinda weird.

This is the original Sass:

$sm: 'min-width: 500px';
$md: 'min-width: 700px';
$lg: 'min-width: 1000px';

/* Navigation related breakpoints */
$wide-nav: 'min-width: 1100px';
$mobile-nav: 'max-width: 1100px';

/* Grid related breakpoints */
$grid-md: 'min-width: 600px';
$grid-max: 'min-width: 1300px';

// Sponsor breakpoints
$grid-1-2: 'min-width: 600px';
$grid-2-3: 'min-width: 800px';
$label-format-switch:  'min-width: 1000px';

$hero_break: 'min-width: 700px';
/* Font sizes */

This is the current converted Sass:

+
43
−
0
html {
  --sm: small;
  --md: small;
  --lg: small;
  --wide-nav: small;
  --mobile-nav: large;
  --grid-md: small;
  --grid-max: small;
  --grid-1-2: small;
  --grid-2-3: small;
  --label-format-switch: small;

  @media (min-width: 31.25rem) {
    --sm: large;
  }
  @media (min-width: 43.75rem) {
    --md: large;
  }
  @media (min-width: 62.5rem) {
    --lg: large;
  }
  @media (min-width: 68.75rem) {
    --wide-nav: large;
  }
  @media (max-width: 68.75rem) {
    --mobile-nav: large;
  }
  @media (min-width: 37.5rem) {
    --grid-md: large;
  }
  @media (min-width: 81.25rem) {
    --grid-max: large;
  }
  @media (min-width: 37.5rem) {
    --grid-1-2: large;
  }
  @media (min-width: 50rem) {
    --grid-2-3: large;
  }
  @media (min-width: 62.5rem) {
    --label-format-switch: large;
  }
}

Something like this makes way more sense:

:root {
  --sm: false;
  @media (width >= 500px) {
    --sm: true;
  }

  --md: false;
  @media (width >= 700px) {
    --md: true;
  }

  --lg: false;
  @media (width >= 1000px) {
    --lg: true;
  }

/* Navigation related breakpoints */
  --wide-nav: false;
  @media (width >= 1100px) {
    --wide-nav: true;
  }

  --mobile-nav: false;
  @media (max-width: 1100px) {
    --mobile-nav: true;
  }

  /* Grid related breakpoints */
  --grid-md: false;
  @media (width >= 600px) {
    --grid-md: true;
  }

  --grid-max: false;
  @media (width >= 1300px) {
    --grid-max: true;
  }

  /* Sponsor breakpoints */
  --grid-1-2: false;
  @media (width >= 600px) {
    --grid-1-2: true;
  }

  --grid-2-3: false;
  @media (width >= 800px) {
    --grid-2-3: true;
  }

  --label-format-switch: false;
  @media (width >= 1000px) {
    --label-format-switch: true;
  }

  --hero-break: false;
  @media (width >= 700px) {
    --hero-break: true;
  }
}