Footer looks different on home page (mobile)

Site URL: https://www.thedesignguild.co/

I'm working on fine tuning the mobile view of my site and noticed that the footer on the home page on mobile view looks different that the other pages. There is this weird gap at the top - it is looking like the left on the home page but should look like the right which is happening on every other page). Anyone know what might be going on here? Thanks in advance 🙂

This Custom CSS caused problem (first 4 lines)

@media only screen and (max-width: 768px) {
    .homepage section:first-child {
        height:30vh !important;
        min-height: 100vh !important
    }

    #collection-61a528924f8ad16b8e7dc960 section:first-child {
        height: 30vh !important;
        min-height: 100vh !important
    }
}

Change it to

@media only screen and (max-width: 768px) {
    .homepage article section:first-child {
        height:30vh !important;
        min-height: 100vh !important
    }

    #collection-61a528924f8ad16b8e7dc960 article section:first-child {
        height: 30vh !important;
        min-height: 100vh !important
    }
}

Because section:first-child appears on both Main Content & Footer. I added "article", means target first section on Main Content only