Haga lo que hicimos en aula

HTML
<! –– Section 2, Bloque Mapa ––>
            <section class="MainSection2">

                <h3 class="tituloSection2">Nuestra Ubicación</h3>

                <p class="parrafo1Section2">Nuestro establecimiento está ubicado en el corazón de la ciudad</p>

                <div class="section2Div1">
                    <! –– Enlace de la direccion de ALURA en Brasil, desde google maps ––>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4115223676613!2d-46.63780007525009!3d-23.589569863879717!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5bd9bb943bf5%3A0x6f642995c970f0fe!2scaelum%20alura!5e0!3m2!1ses-419!2scl!4v1683153532644!5m2!1ses-419!2scl" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>

            </section>

 <! –– Section 3, Bloque Diferenciales ––>
            <section class="MainSection3">

                <! –– Cabecera 2 ––>
                <h3 class="tituloSection3">Diferenciales</h3>

                <div class="section3Div1">
                    <ul class="section3Div1Ul"><! –– Lista 1 ––>
                        <li class="section3Div1UlLi">Atenció personalizada a los clientes</li>
                        <li class="section3Div1UlLi">Espacio diferenciado</li>
                        <li class="section3Div1UlLi">Localización</li>
                        <li class="section3Div1UlLi">Porfesionales calificados</li>
                        <li class="section3Div1UlLi">Puntualidad</li>
                        <li class="section3Div1UlLi">Limpieza</li>
                    </ul><img src="diferenciales/diferenciales.jpg" alt="Imagen de un barbero trabajando" class="imagen1Section3"><! –– Referenciar Imagen 2 ––>
                </div>

                <div class="mainDiv1"><! –– Video ––>

                    <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen class="mainDiv1Video"></iframe>

                </div>

CSS

/*------------------------------*/
/*section2: Nuestra ubicación*/
/*------------------------------*/

.MainSection2{
    margin: 0 auto;
    padding: 2em 2em;
    background: linear-gradient(#FEFEFE, #888888);
}

.section2Div1{
    width: 940px;
    margin: 0 auto;
    border: 2px solid black;
}

.tituloSection2{
    text-align: center;
    font-size: 2em;
    margin: 1em auto;
}

.parrafo1Section2{
    padding: 0 0 1em 0;
    text-align: center;
}

/*------------------------------*/
/*section3: Diferenciales*/
/*------------------------------*/

.MainSection3{
    margin: 0 auto;
    padding: 2em 2em;
    background: #888888;
}

.tituloSection3{
    text-align: center;
    font-size: 2em;
    margin: 1em auto;
}

.section3Div1{
    width: 640px;
    margin: 0 auto;
}

.section3Div1Ul{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.section3Div1UlLi{
    line-height: 1.5;
}

.section3Div1UlLi:before{
    content: "★";
    margin: 0 5px 0 0;
}

.section3Div1UlLi:first-child{
    font-weight: bold;
}

.imagen1Section3{
    width: 60%;
}