Well Mike – i guess he likes to have it fixed.
But this would only be usefull if the footer itself does not take away a big part of the screen height.
On some installations i have my #socket set to fixed – but this is only approx 100px.

why not simple:
just create a masonry gallery with set up for 4 columns.

guess this is self-explanatory: https://webers-testseite.de/masonry-4on1big/

btw: if you have 5 additional images in there – you can change the code to :

.masonry41 .av-masonry-entry:nth-of-type(5n) {
  width: 100% !important;
}

.masonry41 .av-masonry-entry:nth-of-type(5n) img {
  width: 100% !important;
  height: auto;
}

sorry – wrong posting

you had to know your page id ( in my example here page-id-3 ) of this page
and if the header scrolls away – it does not make sence to have shrinking too – so
put this to your child-theme functions.php:

add_filter('avf_header_setting_filter', 'avf_header_not_sticky', 50, 1);
function avf_header_not_sticky($header_settings) {
	if ( is_page(3) ) {
		$header_settings['header_sticky'] = "";
		$header_settings['header_shrinking'] = "";
	}
	return $header_settings;
}

if you have more than one page where you like to change it just set the if clause to an array f.e.:
if ( is_page( array( 3, 18, 303, 500 ))) {

on Fullwidth-Easyslider : Content-Tab (first tab) – click on one image to go to the slide option window.
Go to “Advanced Tab” ( Third tab ) – there you have the option to switch for each slide to a heading tag you want.

Fine – you are welcome

first – how did you get the 28,67 vw height?
you are using the image with 1500 x 630 ?
so height has to be : 42vw

so remove please the other code – and replace with

try :

.responsive-colorsection {
    width: 100vw !important;
    height: 42vw;
}

.responsive-colorsection .container {
  position: relative;
  height: 100% !important;
  top: 0 !important;
}

.responsive-colorsection .container .content {
  position: absolute;
  bottom: 10px !important;
  width: auto !important;
}

.responsive-colorsection .container .av-special-heading {
  background-color: rgba(255,255,255,0.9);
  padding: 10px 30px;
  border-radius: 0.5em;
}

.responsive-colorsection .template-page .entry-content-wrapper h1 {
  text-transform: none !important;
}

On Styling Tab :

but you can implement the attribute on css too:

.responsive-colorsection {
    width: 100vw !important;
    height: 56.25vw;
    background-size: cover !important;
}

you take your color-section with background-image.
Set the background-image to cover.
The color-section with custom-class f.e: responsive-colorsection
and : no minimum height – thats ruled by quick css

now you have to know the aspect ratio of your image ! mine on the testpage is nearly a 16:9 image
so if the image-width is 100% the height must be 56.25%

so:

.responsive-colorsection {
  width: 100vw !important;
  height: 56.25vw;
}

.responsive-colorsection .container {
  position: relative;
  top: calc(100% - 150px) !important;
}

for a more banner like image take a different aspect ratio image !
See example page from above.

btw.: I hope you have performance optimized the pictures with the same vigor ;)

hm – i see this on my iphone emulation developer tools:

isn’t that what you want?

The only missing is a rule for the header – because it is in position:fixed – it is not influenced by wrap_all

Try this instead:

@media only screen and (max-width:767px) {
  .responsive #top #wrap_all {
    margin-left: auto;
    margin-right: auto;
    max-width: 352px;
  }
  .responsive #top #header {
    position: fixed !important;
    max-width: 352px;
  }
}

if you only like to have that for mobile devices you can use the class on responsive : avia_mobile to be more selective:

@media only screen and (max-width:767px)  {
  .responsive.avia_mobile #top #wrap_all {
    margin-left: auto;
    margin-right: auto;
    max-width: 352px;
  }
  .responsive.avia_mobile #top #header {
    position: fixed !important;
    max-width: 352px !important;
  }
}

coming back to you – looks nice but there is one thing i would remark:

if you see the screen-width when the columns are 1/2 the top right is smaller due to inner content.

add to the one rule the width setting to 100%

#covid-beyond .flex_cell.cell-one .flex_cell_inner, 
#covid-beyond .flex_cell.cell-two .flex_cell_inner, 
#covid-beyond .flex_cell.cell-three .flex_cell_inner, 
#covid-beyond .flex_cell.cell-four .flex_cell_inner {
    display: flex !important;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;   
}

and have a look on the one media-query set on 930px
i guess for your setting it will be better to have this on 989px:

@media only screen and (max-width:989px) {
 #covid-beyond .flex_cell.cell-one,
 #covid-beyond .flex_cell.cell-two,
 #covid-beyond .flex_cell.cell-three,
 #covid-beyond .flex_cell.cell-four {
  flex:1 1 49%
 }
 #covid-beyond .flex_cell.cell-two .flex_cell_inner .flex_column {
  border-width:2px 0 0
 }
}

If you want to make it more perfect – maybe you can live with the 500 font-weight – then you had to load the 500 font-weight instead of the 700 one – and redeclare the css for all headings to 500.

Guess thats what Yigit now does for you.
Thats what i said.

Your title on the topic is wrong: with egual parameters – the parameters are not equal – thats the point.
Next time – migrate with duplicator – then you will have a 1:1 copy

For Enfold you do not need to implement the child in this way:
https://kriesi.at/documentation/enfold/child-theme/

As long as the child style.css has this on top:

/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

everything works with this child style.css.
because parent-theme style.css is empty too. The styles of Enfold are loaded ( conditionally ) via functions.php.

this is what google dev tools for your sites:
( i do allways have extra windows instead of only sidebar look on dev tools in the browsers )

again – click to enlarge the image

Just for Info: ( not intended as a solution for you ) Oswald is one of the google fonts which have variable font-weights: https://web.dev/variable-fonts/

nice info video about new browser support on that since May 2020 : https://youtu.be/B42rUMdcB7c?t=30

so you can even import a 450 font-weight with f.e. 400 and 600
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;450;600&display=swap');