Desafío: Aumentando la semántica

HTML:

<section class="ofertas">

            <section class="ofertas__titulo">
                <h1 class="ofertas__titulo--texto">Ofertas de la semana</h1>
                <div class="ofertas__titulo--subrayado"></div>
            </section>

            <section class="ofertas__cards">

                <div class="ofertas__cards--grupo">

                    <article class="ofertas__cards--elemento ofertas__cards--japon">
                        <section class="ofertas__card">
                            <div class="ofertas__card--contenido">
                                <header class="ofertas__card--destino">
                                    <p class="ofertas__card--destino-tipo">HOTEL+AVIÓN</p>
                                    <h3 class="ofertas__card--destino-nombre">Japón</h3>
                                </header>
                                <div class="ofertas__card--precio">$ 4000</div>
                                <div class="ofertas__card--boton">
                                    <a href="#" class="ofertas__card--boton-texto" aria-label="Ver detalles">Ver detalles</a>
                                </div>
                            </div>
                        </section>
                    </article>


                    <article class="ofertas__cards--elemento  ofertas__cards--san-andreas">
                        <section class="ofertas__card">
                            <div class="ofertas__card--contenido">
                                <header class="ofertas__card--destino">
                                    <p class="ofertas__card--destino-tipo">HOTEL+AVIÓN</p>
                                    <h3 class="ofertas__card--destino-nombre">San Andreas</h3>
                                </header>
                                <div class="ofertas__card--precio">$ 3000</div>
                                <div class="ofertas__card--boton">
                                    <a href="#" class="ofertas__card--boton-texto" aria-label="Ver detalles">Ver detalles</a>
                                </div>
                            </div>
                        </section>
                    </article>
                    
                </div>


            </section>

        </section>

CSS:

.ofertas {
    margin-bottom: 112px;
}

.ofertas__titulo--texto {

    font-size: 32px;
}