Creando la estructura de la sección '¿Por qué nosotros?'

Como nota, si definimos el mixed con parametros opcionales, si lo podemos utilizar

@mixin flexCenter($direction, $content: null, $align: null){
    display: flex;
    flex-direction: $direction;
    justify-content: $content;
    align-items: $align;
}

.mision-section{
    @include flexCenter(row, space-around, center);
    .earth{
        width: 40%;
        @include flexCenter(row);
        gap: 40px;
        p{
            text-align: center;
            margin: auto 0;
        }
        img {
            object-fit: contain;
        }
    }
    .innovation{
        @extend .earth
    }
}

El extend en about-us funciona si lo pones dentro de un section o del anterior section 😛

section{
.about-us {
        @extend .healthcare;
        h2{
            font-weight: bold;
        }
}}

Aquí les va un hack al min 2:31

Seleccionamos todo lo que queremos meter dentro del nuevo div presionamos al mismo tiempo las teclas CTRL + SHIFT + P y tecleamos WRAP + ENTER

Luego escribimos “.mision-section” + ENTER

En el Figma si quieren exportar el SVG completo, deben de seleccionar el grupo para que se exporte completa la imagen

Tambiény es válido agregar un ", " y agregar el otro estilo que queremos aplicar los mismo atributos, para no tener que escribir más código.

        .mision_section{
            @include flexCenter(row,space-evenly ,center );
            .earth, .innovation{
                width: 30vw;
                @include flexCenter(row,null,center );
                gap:40px;
                color: $quaternary-color;
                padding-bottom: 60px;
                img{
                    object-fit: contain;
                }
                p{
                    text-align: center;
                    font-size: $paragraph-size;
                }
                }
        }

https://www.figma.com/file/Em1aDiIHmqozHpUAjsYhT7/Eco-Store-Mockups-(Copy)?type=design&node-id=32-1588&t=y0g2inxQCK3PjqPL-0

Genial!

.