Subtheme classes not overriding theme class

While " https://www.drupal.org/project/d8w3css/issues/2881550 💬 Subtheme procedure Fixed " (subtheme procedures) was related, I thought it would be most helpful to open a new related issue.

Using the d8w3css as a base I have created a subtheme named w3csssub. The directory structure includes /themes/d8w3css and /themes/w3csssub. W3csssub is set as default on my site (fkelly.org). On that site I have a view that displays a customized menu of sorts ... customized because I need to uses images a menu links. You can see it in operation at:
http://fkelly.org/drupal8/gays

However, it is "in operation" properly only because I modified the code in the d8w3css /css/custom/theme.css file to eliminate height and width settings for images. This is a temporary expedient until I figure out how to override the css using my subtheme. The code in theme.css that is problematic is from lines 10 to 19:

a.d8-has-image {
  overflow: hidden;
  display: inline-block;
  height: 100%;
  min-width: 100%;
}
a.d8-has-image > img.w3-image {
 width: 100%;
  float: left;
}

My modified code that I am attempting to use as an override is:

a.d8-has-image {
  overflow: hidden;
  display: inline-block;
 /* height: 100%;
  min-width: 100%; */
}
a.d8-has-image > img.w3-image {
/*  width: 100%; */
  float: left;
}

Where I commented out height and width settings. (They cause distortions in the images see png below).

The libraries.yml file for the subtheme is:

global-components:
  version: VERSION
  css:
    theme:
      css/styles.css: {}

  js:
    js/script.js: {}

and the libraries.yml file for the base theme includes as global components:
global-components:

Version: VERSION
  css:
    theme:
      css/custom/base.css: {}
      css/custom/w3-custom-classes.css: {}
      css/custom/layout.css: {}
      css/custom/components.css: {}
      css/custom/theme.css: {}
      css/custom/responsive.css: {}

According to my understanding of how this works, the styles.css from the subtheme should get loaded AFTER THE theme.css from the base theme and thus override any styles in it. Looking at page source this seems to be working: I get:

@import url("/themes/d8w3css/css/w3-css/w3.css?p0rhhs");
@import url("/themes/d8w3css/css/w3-css/w3css-color-libraries.css?p0rhhs");
@import url("/themes/d8w3css/css/font-awesome/font-awesome.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/base.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/w3-custom-classes.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/layout.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/components.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/theme.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/responsive.css?p0rhhs");
@import url("/themes/w3csssub/css/styles.css?p0rhhs");

So it looks like the subtheme styles.css is loading last. However on the page itself the theme.css is taking precedence and applying widths and height to the image elements. (This testing is on a local host where I've carefully cleared cache multiple times and even turned off css aggregation).

I've attached a png of how the images look with these settings. The "correct" images are on the web site link I posted.