[SASS] Problème @extend

Bonjour les amis !

Je suis actuellement sur une refonte complète de mon portfolio, mais voilà, je sèche :

Pour faire simple, j'ai une section "works", qui contient deux principaux blocs :

Le premier nommé "latest-works", permet d'afficher mes 2 derniers projets tandis que le second bloc "latest-article" affiche un carousel qui lui, permet de faire défiler mes derniers articles.

(merci Lorem Picsum :p)

Voici le code HTML :

<section id="works" class="section-grey">
        <div class="container">
            <div class="latest-works">
                <div class="row">
                    <div class="col-md-8 center-block text-center">
                        <h3>Check out our latest works</h3>
                        <p>Magnis modipsae que voloratati andigen daepeditem quiate re porem aut labor.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 pad-top-md">
                        <figure>
                            <a href="#" class="thumb">
                                <img src="http://lorempicsum.com/up/627/400/4">
                            </a>
                            <figcaption>
                                <div class="info">
                                    Grand Motel gets an identity brushup
                                    <div class="sub-info">Identity</div>
                                </div>
                            </figcaption>
                        </figure>

                    </div>
                    <div class="col-sm-6 pad-top-md">
                        <figure>
                            <a href="#" class="thumb">
                                <img src="http://lorempicsum.com/up/627/400/4">
                            </a>
                            <figcaption>
                                <div class="info">
                                    Grand Motel gets an identity brushup
                                    <div class="sub-info">Identity</div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="latest-article">
                <div class="row pad-top-md">
                    <div id="owl-tintinautibet" class="owl-carousel">
                        <div class="item">
                            <figure>
                                <a href="#" class="thumb">
                                    <img src="http://lorempicsum.com/up/627/400/4">
                                </a>
                                <figcaption>
                                    <div class="info">
                                        Grand Motel gets an identity brushup
                                        <div class="sub-info">Identity</div>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="item">
                            <figure>
                                <a href="#" class="thumb">
                                    <img src="http://lorempicsum.com/up/627/400/4">
                                </a>
                                <figcaption>
                                    <div class="info">
                                        Grand Motel gets an identity brushup
                                        <div class="sub-info">Identity</div>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

(j'ai volontairement supprimé quelques blocs pour mes derniers articles, histoire d'avoir un code plus aéré).

Maintenant, le CSS :

.latest-works {
    figure {
        .thumb {
            background:url(../images/link.png) center center $blue no-repeat;
            display: block;

            img {
                opacity: 1;
                width: 100%;

                &:hover { 
                    opacity: 0.1;
                    transition-duration: 0.4s;
                }
            }
        }

        .info {
            background: $white;
            border-bottom: 2px solid $intermediategrey;
            color: darken($blue, 10%);
            font-family: $main-font;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.025em;
            padding: $padding*1.5;
            line-height: 150%;

            .sub-info {
                color: inherit;
                font-weight: 300;
                font-size: 14px;
                line-height: 30px;
            }
        }
    }
}

.latest-article {
    @extend .latest-works;    

}

Comme vous pouvez le voir, j'ai simplement utilisé un @extend nomDeLaClasseAHeriter sur ma class latest-article.

Puisque mes blocs sont identiques, ils devraient normalement prendre le même style que ceux de latest-works, non ?

Alors soit je dérive totalement, soit j'ai mal utilisé le extand. Mais je penche plutôt pour la deuxième solution.

Si quelqu'un à une idée....

Merci par avance.
Steve