/* #Box
   -------------------------------------------------------------------------- */
/*doc
---
title: box
name: box
categories: [project]
---

画像やテキストなどを縦に並べるコンポーネントです。

ラベルはデフォルトで右上に配置されます。Modifierで以下のように変更できます。

- 右下 `.p-box__labels--right-bottom`
- 左上 `.p-box__labels--left-top`
- 左下 `.p-box__labels--left-bottom`

```block
<div class="p-box">
  <div class="p-box__image">
    <img src="http://lorempixel.com/600/400/" alt="">
    <ul class="p-box__labels">
      <li class="p-box__label p-label">ラベル1</li>
      <li class="p-box__label p-label">ラベル2</li>
    </ul>
  </div>
  <div class="p-box__content">
    <h2>見出し</h2>
    <p>文章</p>
  </div>
</div>
```
*/
.p-box {
  @include _p-box();
}

.p-box__image {
  @include _p-box__image();
}

.p-box__labels {
  @include _p-box__labels();
}

.p-box__labels--right-bottom {
  top: auto;
  bottom: 0;
}

.p-box__labels--left-top {
  right: auto;
  left: 0;
}

.p-box__labels--left-bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}

.p-box__label {
  @include _p-box__label();
}

.p-box__content {
  @include _p-box__content();
}