template: Story

<section class="story">
    <div class="story__secondary section group">

        <article class="story__secondary-card">
            <a href="#">
                <div class="story__secondary-image-wrapper"><img class="story__secondary-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies and co-lead of the Million Dollar Hoods Project." /></div>
                <h1 class="story__secondary-title">
                    <span class="story__secondary-title-text">Society, Struggle, Scholarship</span>
                </h1>
            </a>
            <div class="story__secondary-content">
                <p class="story__secondary-blurb">As UCLA’s four ethnic studies centers celebrate their 50th anniversary, their mission  —  to use advanced research to bring about social justice  —  takes on added urgency.</p>
                <p class="story__secondary-source">Source: <a href="#" class="link">UCLA Magazine</a></p>
            </div>
        </article>

        <article class="story__secondary-card">
            <a href="#">
                <div class="story__secondary-image-wrapper"><img class="story__secondary-image" src="/img/examples/story-gina.jpg" alt="Professor Gina Kim" /></div>
                <h1 class="story__secondary-title">
                    <span class="story__secondary-title-text">A Voice for the Marginalized</span>
                </h1>
            </a>
            <div class="story__secondary-content">
                <p class="story__secondary-blurb">Professor Gina Kim is using virtual reality to subvert Hollywood stereotypes of Asians, women and others.</p>
                <p class="story__secondary-source">Source: <a href="#" class="link">UCLA Magazine</a></p>
            </div>
        </article>

        <article class="story__secondary-card">
            <a href="#">
                <div class="story__secondary-image-wrapper"><img class="story__secondary-image" src="/img/examples/story-evelyn.jpg" alt="UCLA Professor Evelyn Blumenburg" /></div>
                <h1 class="story__secondary-title">
                    <span class="story__secondary-title-text">Evelyn Blumenberg: Seeing with Fresh Eyes </span>
                </h1>
            </a>
            <div class="story__secondary-content">
                <p class="story__secondary-blurb">Professor Evelyn Blumenburg explains her unconventional thinking on homelessness.</p>
                <p class="story__secondary-source">Source: <a href="#" class="link">Blueprint</a></p>
            </div>
        </article>

        <article class="story__secondary-card-grey">
            <a href="#">
                <div class="story__secondary-image-wrapper"><img class="story__secondary-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies and co-lead of the Million Dollar Hoods Project." /></div>
                <h1 class="story__secondary-title">
                    <span class="story__secondary-title-text">Society, Struggle, Scholarship</span>
                </h1>
            </a>
            <div class="story__secondary-content">
                <p class="story__secondary-blurb">As UCLA’s four ethnic studies centers celebrate their 50th anniversary, their mission  —  to use advanced research to bring about social justice  —  takes on added urgency.</p>
                <p class="story__secondary-source">Source: <a href="#" class="link">UCLA Magazine</a></p>
            </div>
        </article>

        <article class="story__secondary-card-grey">
            <a href="#">
                <div class="story__secondary-image-wrapper"><img class="story__secondary-image" src="/img/examples/story-gina.jpg" alt="Professor Gina Kim" /></div>
                <h1 class="story__secondary-title">
                    <span class="story__secondary-title-text">A Voice for the Marginalized</span>
                </h1>
            </a>
            <div class="story__secondary-content">
                <p class="story__secondary-blurb">Professor Gina Kim is using virtual reality to subvert Hollywood stereotypes of Asians, women and others.</p>
                <p class="story__secondary-source">Source: <a href="#" class="link">UCLA Magazine</a></p>
            </div>
        </article>

        <article class="story__secondary-card-grey">
            <a href="#">
                <div class="story__secondary-image-wrapper"><img class="story__secondary-image" src="/img/examples/story-evelyn.jpg" alt="UCLA Professor Evelyn Blumenburg" /></div>
                <h1 class="story__secondary-title">
                    <span class="story__secondary-title-text">Evelyn Blumenberg: Seeing with Fresh Eyes </span>
                </h1>
            </a>
            <div class="story__secondary-content">
                <p class="story__secondary-blurb">Professor Evelyn Blumenburg explains her unconventional thinking on homelessness.</p>
                <p class="story__secondary-source">Source: <a href="#" class="link">Blueprint</a></p>
            </div>
        </article>

    </div>
</section>