Карта залезает на футер

При просмотре страницы с моб. устройства, футер сужается, и уходит под карту. Помогите исправить, чтобы футер шел ровно после карты.

<div id="map" class="contacts__map">
        <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Ad223a6ea6ccaf95607ec3b3f9162efb0673547ebec54029c097eff3cdb2ca48a&amp;source=constructor" width="100%" height="500" frameborder="0"></iframe>
    </div>
    
</section>






<footer class="footer">
    <div class="container">
        <div class="footer__grid">

            <div class="footer__logo-wrapper">
                <a href="index.html" class="footer__logo logo">Кровля-Сервис</a>
            </div>



            <div class="footer__services-wrapper footer__col">
                <h3 class="footer-heading">Услуги</h3>
                <nav>
                    <ul>
                                                <li><a href="myagkaya-krovlya/index.html">Мягкая кровля</a></li>
                                                <li><a href="remont-kryshi-proizvodstvennyh-zdanij-skladov-angarov/index.html">Ремонт кровли ангаров и складов</a></li>
                                                <li><a href="naplavlyaemaya-krovlya/index.html">Ремонт наплавляемой кровли</a></li>
                                                <li><a href="montazh-falczevoj-krovli/index.html">Монтаж фальцевой кровли</a></li>
                                                <li><a href="ustranenie-protechki/index.html">Устранение протечек кровли</a></li>
                                                <li><a href="montazh-vodostochnoj-sistemy/index.html">Монтаж водосточной системы</a></li>
                                                <li><a href="ochistka-krovli-ot-snega-i-naledi/index.html">Очистка кровли от снега и наледи</a></li>
                                                <li><a href="obogrev-krovli-i-vodostokov/index.html">Обогрев кровли и водостоков</a></li>
                                            </ul>
                </nav>
            </div>



            <div class="footer__contacts">
                <div class="footer__contacts__item">
                    <div class="footer__contacts__label">Телефон</div>
                    <div class="footer__contacts__value">
                        <a href="tel:+79219230089">+7 921 923-00-89</a>
                    </div>
                </div>

                <div class="footer__contacts__item">
                    <div class="footer__contacts__label">Адрес</div>
                    <div class="footer__contacts__value">
                        г. Санкт-Петербург, пр-т Елизарова, д.38, литер А
                    </div>
                </div>

                </div>
            </div>
    </div>

</footer>

CSS

.footer {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .footer__grid {
        flex-wrap: wrap;
    }

    .footer__col {
        max-width: revert;
        width: calc(50% - 1rem);
    }

    .footer__logo-wrapper {
        width: 100%;
    }

еще CSS

.contacts__map {
        position: revert;
        height: 300px;
    }