feat: introduce attack list and attack item components

src/components/AttackItem.vue

@@ -0,0 +1,92 @@
+<template>
+  <figure class="attack">
+    <div class="attack__illustration">
+      <slot name="image"></slot>
+    </div>
+
+    <figcaption class="attack__text">
+      <div class="attack__name">
+        <slot name="name"></slot>
+      </div>
+
+      <div class="attack__description">
+        <slot name="desc"></slot>
+      </div>
+    </figcaption>
+  </figure>
+</template>
+
+<style lang="scss">
+@import "@/scss/_mixins.scss";
+
+.attack {
+  flex: 0 1 100%;
+
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+
+  margin: 0;
+  padding: 0.375em 0;
+
+  @include mq-desktop {
+    flex-flow: row nowrap;
+
+    &:nth-child(even) {
+      text-align: right;
+
+      .attack__illustration,
+      .attack__text {
+        &:first-child {
+          order: 1;
+        }
+      }
+    }
+  }
+
+  @media (min-width: 70em) {
+    text-align: left;
+    flex: 0 1 50%;
+
+    &:nth-child(even) {
+      text-align: left;
+
+      .attack__illustration,
+      .attack__text {
+        &:first-child {
+          order: 0;
+        }
+      }
+    }
+  }
+
+  &__illustration {
+    flex: 1 1 auto;
+    text-align: center;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+
+    @include mq-desktop {
+      flex: 0 0 15em;
+      height: 15em;
+    }
+  }
+
+  &__text {
+    flex: 1 1 auto;
+
+    @include mq-desktop {
+      padding: 0 1rem;
+    }
+  }
+
+  &__name {
+    margin: 0 0 1em 0;
+
+    font-weight: bold;
+  }
+}
+</style>

src/components/AttackList.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="attacks">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "@/scss/_mixins.scss";
+
+.attacks {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+
+  width: 100%;
+  margin: auto;
+
+  @include mq-desktop {
+    max-width: 45rem;
+  }
+
+  @media (min-width: 70em) {
+    max-width: 70em;
+  }
+}
+</style>