<div class="row">
    <div class="column medium-6">
      <article class="feature-card">
        <div class="feature-card__content">
          <header class="feature-card__header">
            <h2 class="feature-card__title">
              On larger screens, there is both a title and description.
            </h2>
            <h3 class="feature-card__category">Category or Caption</h3>
          </header>
          <div class="feature-card__description">
            <p>When viewed on a smaller mobile screen, this description will disappear. Try to resize your browser and you will notice the difference.</p>
          </div>
          <footer class="feature-card__footer">
            <div class="stacked-for-medium  button-group">
             <a class="button" href="#">Primary Action</a>
              <a href="#" class="secondary button">Secondary Action</a>
            </div>
          </footer>
        </div>
      </article>
    </div>
    
    <div class="column medium-6">
      <article class="feature-card">
        <div class="feature-card__content">
          <header class="feature-card__header">
            <h2 class="feature-card__title">
              This card doesn't have a description.
            </h2>
            <h3 class="feature-card__category">Another Category</h3>
          </header>
          <footer class="feature-card__footer">
            <a class="hollow button" href="#">Learn more <span class="show-for-sr">This card doesn't have a description.</span></a>
          </footer>
        </div>
      </article>    
    </div>
    </div>
    
    <div class="row">
    <div class="column medium-4">
      <article class="feature-card--media-card">
        <a class="feature-card--media-card__link" href="#">
          <div class="feature-card__content">
            <figure class="feature-card__figure responsive_image">
              <picture class="feature-card__picture">
                <img class="feature-card__image" src="../assets/img/beineke.jpeg" alt="">
              </picture>
            </figure>
    
              <header class="feature-card__header">
                <h2 class="feature-card--media-card__title">
                  Beineke Reopens
                </h2>
              </header>
            <div class="feature-card--media-card__description">
              <p>
                Nulla tempor sem a purus blandit, eu elementum massa sagittis. Proin tortor enim, suscipit sed magna.
              </p>
            </div>
          </div>
        </a>
      </article>    
    </div>
    
    <div class="column medium-4">
      <article class="feature-card--media-card">
        <a class="feature-card--media-card__link" href="#">
          <div class="feature-card__content">
            <figure class="feature-card__figure responsive_image">
              <picture class="feature-card__picture">
                <img class="feature-card__image" src="../assets/img/campus.jpeg" alt="">
              </picture>
            </figure>
    
              <header class="feature-card__header">
                <h2 class="feature-card--media-card__title">
                  Campus Life
                </h2>
              </header>
            <div class="feature-card--media-card__description">
              <p>
                Nulla tempor sem a purus blandit, eu elementum massa sagittis. Proin tortor enim, suscipit sed magna.
              </p>
            </div>
          </div>
        </a>
      </article>    
    </div>
    
    <div class="column medium-4">
      <article class="feature-card--media-card">
        <a class="feature-card--media-card__link" href="#">
          <div class="feature-card__content">
            <figure class="feature-card__figure responsive_image">
              <picture class="feature-card__picture">
                <img class="feature-card__image" src="../assets/img/athletics.jpeg" alt="">
              </picture>
            </figure>
    
              <header class="feature-card__header">
                <h2 class="feature-card--media-card__title">
                  Athletics &amp; Recreation
                </h2>
              </header>
            <div class="feature-card--media-card__description">
              <p>
                Nulla tempor sem a purus blandit, eu elementum massa sagittis. Proin tortor enim, suscipit sed magna.
              </p>
            </div>
          </div>
        </a>
      </article>    
    </div>
    </div>