JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<div class="row row-home-hero" id="hero">
	<div class="cont">
		<h1>Title</h1>
		<h2>Subtitle</h2>
		<div class="cta-hero-home">
			<a href="#" class="cta-hero-link">» CTA1</a>
			<span class="cta-hero-spacer">or</span>
			<a href="#" class="cta-hero-link">» CTA2</a>
		</div>
	</div>
</div>

CSS

.row-home-hero {
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-color: red;
    
}
.row-home-hero:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 46%;
}
.row-home-hero .cont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    text-align: center;
}
a.cta-hero-link {
    display: block;
    width: 100px;
    max-width: 80%;
    line-height: 40px;
    background: white;
    color: #1b9fdd;
    text-transform: uppercase;
    text-decoration: none;
    margin: 10px auto;
    text-align: center;
    font-weight: 500;
    box-shadow: 0px 0px 7px 1px rgba(0,0,0,.4);
}

@media screen and (max-width: 768px) {
	.row-pre-footer .cont div {
		width: 100%;
		padding: 0 5%;
		float: none;
		margin: 0 auto 30px;

	}
	.progetto-footer, .loghi-footer {
		width: 100%;
		max-width: 320px;
		margin: 0 auto 30px;
		float: none;
	}
	.double-box .tib-tab {
		float: none;
		width: 90%;
		margin: 5% auto;
		padding-bottom: 90%;
	}
	.tib-box h2, .tab-box h2 {
		font-size: calc(28px + (46 - 28) * (100vw - 320px) / (768 - 320));
		margin-bottom: 18vw;
	}
	.double-box-inner p {
		font-size: 22px;
		line-height: 30px;
	}
	.row-home-hero.small-hero {
    	height: 500px;
	}
	.row-home-hero:before {
	    display: block;
	    content: "";
	    width: 100%;
	    padding-top: 0;
	}
}

JavaScript

function screenClass() {
    if(jQuery(window).innerWidth() < 768) {
        jQuery('.row-home-hero').addClass('small-hero');
    } else {
        jQuery('.row-home-hero').removeClass('small-hero');
        jQuery('.row-home-hero').css("height", "");
    }
}

// Fire.
screenClass();

// And recheck if window gets resized.
jQuery(window).bind('resize',function(){
    screenClass();
});
if (document.documentElement.clientWidth < 768) {
	var $li = jQuery('.small-hero'),         // Cache your element
    startW = $li.width();  // Store a variable reference
	function setMarginDiff() {
    area = 500000;
    width = jQuery('.small-hero').width();
    jQuery('.small-hero').height(Math.ceil(area/width/1.7));
    }
    setMarginDiff();                 // Do on DOM ready
	jQuery(window).resize(setMarginDiff); // and on resize
}