Mobile Responsive Header

CSS fix to make header(Media) image (2000 px X 1200px) responsive in 2017 Theme.
Reference: 1yr 6months ago – https://www.ads-software.com/support/topic/need-a-responsive-header-image/

CSS code that works on std Twenty Seventeen Layout: – courtesy of glassonlypros1
—————————————————————————–
@media screen and (max-width: 450px) {

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}
}

.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 870px;
}

@media only screen and (max-width:768px) {
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 400px;
}
}

@media only screen and (max-width:480px) {
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 200px;
}
}
.custom-header-media:before {
display: none;
}
——————————————————————————-
NOTE:
As I had to search inumerable posts to find the correct code, I thought it important to make this post so it is time relevant ass of October 2019.

The page I need help with: [log in to see the link]