theme – Proper Place to Add CSS in Magento2 and Magento only Showing CSS Changes when Clearing Browser Cache?

I am trying to modify some CSS files in my Porto theme in Magento 2.3.5pt-2. When modifying the CSS in pub/media/porto/web/css/custom.css I am not seeing any changes. I am in developer mode, I have run static content deploy and cleared cached but nothing shows on frontend until I clear my browser cache. Is there a better way to modify CSS in Magento2 with out having to clear browser cache every time?

I am modifying the CSS in pub/media/porto/web/css/custom.css. Should I be modifying these theme CSS files somewhere else like in app/design/frontend/Smartwave/porto? Where is the best place to add CSS to modify your theme?

Trying to add this CSS

.sidebar .product-items .product-item-info .product-item-photo { width: 100%; }
.sidebar .product-items .product-item-info .product-item-photo img { max-width: 100% !important; width: 100%; }
.block.related .owl-stage, 
.block.related .owl-stage .owl-item { width: 100% !important; }

.products.list .product-item-photo a { display: block; }

.page-products .product-image-photo.default_image {
    width: 100% !important;
}

.category-image img  {
    width: 100% !important;
}

Change in my dev environment are only reflected until clearing browser cache. Any help would be much appreciated.