Bootstrap Responsive Viewport and MDB CSS Class Support Need

I have a couple of questions regarding a recent project:

01 - First, I am having some spacing issues regarding the section on my home page that is not adequately spacing a margin and / or padding below my section. On desktops, it's fine, but I would like to reduce the padding on the content by about 10px moving it up towards the .

On tablets, the text content overlaps my photo completely in portrait orientation (not the intended design). And on smartphone displays, I would like to increase the padding in portrait orientation between the photo and the section.

I have tried all kinds of combinations using bootstrap classes targeting breakpoint size (e.g., mt-sm-5, pt-sm-5) and using media queries for specific breakpoints and orientation, but I cannot seem to get this to work.

02 - Second question: I really like the "view + mask" effect, and I have succeed at leveraging that on the Schedule page of my project near page top. A rose-orange gradient overlays a rough concrete texture.

I wanted to recreate that on my home page in the Sidebar at page top in the asymmetric split view with the photo, but I can only seem to render the gradient overlay. I have tried some other similar tricks in CSS but I cannot seem to get the concrete.jpg texture to appear through the gradient overly on the sidebar.

Any help is greatly appreciated!

Thank you!

Eric, Seattle, Washington

Please refer to my live project here (there's only two pages: Home and Schedule):

http://kathyackerseattlesymposium.com/