Как сверстать такой блок?
<section id="banner">
    <div class="banner-content">
        <img src="#" id="woman-photo" alt="">
        <div class="banner-text-content">
            <h2>Лето 2021</h2>
            <a href="#">Узнать подробнее</a>
        </div>
    </div>
</section>
По CSS:

#banner – это фон баннера;
.banner-content – это блок в котором весь контент с указанным width и margin: 0 auto;;
#woman-photo – фотография девушки;
.banner-text-content – это всё текстовое содержимое с фоном 20 21;
стили для текста и кнопки как в макете.

Если это сезонный баннер, то сделайте просто большую картинку ссылкой и все. Скорее всего тексты на нем меняться не будут и контент менеджеру просто будет поменять его осенью на другую картинку. Тем более блоки с такими стилями как "banner", "banner-text" на ура блокируются всякими блокировщиками рекламы. Никакого толку этот баннер ни сео, ни семантике не даст.