/* #Card
   -------------------------------------------------------------------------- */
/*doc
---
title: card
name: card
categories: [project]
---

カードタイプのコンポーネントです。

```block
<div class="c-layout c-layout--small">
  <div class="c-layout__item u-6of12-md">
    <div class="p-card">
      <img src="http://lorempixel.com/640/340/" class="p-card__image-top">
      <div class="p-card__body">
        <h2>Card Object</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat illo autem, possimus obcaecati numquam sunt ut quas, repellat cum aspernatur voluptatem, a explicabo! Facilis sed quos, nisi rerum placeat ad?</p>
      </div>
      <ul class="p-card__list">
        <li class="p-card__list-item">list1</li>
        <li class="p-card__list-item">list2</li>
      </ul>
      <div class="p-card__foot">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, est.</p>
      </div>
    </div>
  </div>

  <div class="c-layout__item u-6of12-md">
    <div class="p-card">
      <div class="p-card__head">
        <h2>Card Object</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat illo autem, possimus obcaecati numquam sunt ut quas, repellat cum aspernatur voluptatem, a explicabo! Facilis sed quos, nisi rerum placeat ad?</p>
      </div>
      <ul class="p-card__list">
        <li class="p-card__list-item">list1</li>
        <li class="p-card__list-item">list2</li>
      </ul>
      <img src="http://lorempixel.com/640/340/" class="p-card__image-bottom">
    </div>
  </div>
</div>
```
*/

.p-card {
}

.p-card__head {
  > :last-child {
  }
}

.p-card__body {
  > :last-child {
  }
}

.p-card__foot {
  > :last-child {
  }
}

.p-card__image,
.p-card__image-top,
.p-card__image-bottom {
  max-width: none;
  width: 100%;
}

.p-card__head,
.p-card__image-top {
}

.p-card__foot,
.p-card__image-bottom {
}

.p-card__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.p-card__list-item {
}

.p-card__list-link {
  display: block;
}