<div class="lighter bg" id="hero">
        <div class="heropanel bg" id="first">
            <div class="row">
                <div class="twelve columns">
                    dongs
                </div>
            </div>
        </div>
        <div class="heropanel bg" id="second">
            <div class="row">
                <div class="twelve columns">
                    more dongs
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function fixHeroSize() {
            var hero = $('#hero');
            var children = hero.children();
            var height;

            hero.css('min-height', 0);
            $.each(children, function(index, item) {
                $(item).css('min-height', 0);
            });

            if($(window).height() > 768) {
                height = 400;
            } else {
                height = 0;
            }

            $.each(children, function(index, item) {
                var actual = $(item).height();
                if(height < actual) {
                    height = actual;
                }
            });

            hero.css('min-height', height);

            $.each(children, function(index, item) {
                $(item).css('min-height', height);
            });
        }

        fixHeroSize();

        window.onresize = fixHeroSize;
    </script>