responsive media problem wider than the content

Hi,

I have a content type where I'd like to use media wider than the content area. I've managed to do it on desktop but it's not as responsive as I want it. (linked below)

I use the following code to achieve it.

/* Set wider than content media*/
.entry-content .alignwide .midslider, body:not(.no-sidebar) .entry-content .alignwide {
    margin-left: -140px;
    width: calc(100% + 140px);
    max-width: calc(100% + 140px);
}
/* End Set wider than content media */

However, when I squeeze the page to a narrower viewport the images and slide gallery is not responsive as they should be.

My goal is to achieve the same responsiveness of this example:
https://www.atlasobscura.com/articles/ugly-orchid