How do I reduce the sidebar width on Quark theme?

Hello to all,
How do I reduce the sidebar width on Quark theme?
Hello, sorry if this is trivial, I do not like using frameworks for CSS I want to keep styles simple.

  1. I found
.col-9 {
  width: 75%;
}

Deals with the width of the summaries section for desktop screens

  1. and this for the sidebar width
.col-3 {
  width: 25%;
}
  1. One single column for mobiles:
.col-12 {
  width: 100%;
}
  1. If I edit widgets.css directly and I reduce the sidebar, .col-3, to 20% and increase the summaries, col-9, to 80% in the same amount, it works on the browser inspector.

  2. Then I make the changes in my inherited theme in the custom.css file, but I see Spectre changing back to the original values no matter what I try to bypass in custom.css.

Question: How can I make these changes permanent using my quarkCustom theme?


Reduced, forced on browser.

Thanks and regards
joejac

Hello
My error was in the media query
The following CSS in my custom.css file worked fine :blush::

.bricklayer-column-sizer {
    width: 100%;
    display: none;
}

@media screen and (min-width: 640px) {
    .bricklayer-column-sizer {
        width: 100%;
    }
 .col-12 {
    width: 100%;
  }
}

@media screen and (min-width: 980px) {
    .bricklayer-column-sizer {
        width: 50%;
    }
 .col-12 {
    width: 100%;
  }
}

@media screen and (min-width: 1200px) {
	.bricklayer-column-sizer {
    width: 33.33333%;
    display: none;
	}

 .col-3 {
    width: 20%;
  }

  .col-9 {
    width: 80%;
  }

}

@media screen and (max-width: 1199px) {
 .col-12 {
    width: 100%;
  }
}

I wish you all a very nice holiday season. :christmas_tree:
Best regards.
joejac