@media (max-width: 900px) {
    /* Hide the top navigation on screens ≤ 900px */
    #top-navigation {
        display: none !important;
    }

    /* Your existing rules */
    .hero-image-component > div,
    .hero-image-component > div > div > div > div {
        min-height: 30vh !important;
    }
}

@media (max-width: 700px) {
    .hero-image-component > div,
    .hero-image-component > div > div > div > div {
        min-height: 26vh !important;
    }
}

@media (max-width: 500px) {
    .hero-image-component > div,
    .hero-image-component > div > div > div > div {
        min-height: 22vh !important;
    }
}