<template>
  <div class="footer">
    <div class="footer-main footer-ref">
      <div class="footer-column footer-ref" v-for="item in [1, 2, 3]" :key="item">
        <div class="footer-title"></div>
        <div class="footer-link footer-link-ref" v-for="link in ['l1', 'l2', 'l3']" :key="link"></div>
      </div>
      <div class="footer-column footer-ref">
        <div class="footer-title"></div>
        <div class="footer-contact" v-for="item in [1, 2, 3]" :key="item">
          <div class="footer-circle">
            <div class="footer-icon"></div>
          </div>
          <div class="footer-contact-text"></div>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="footer-copyright-text large"></div>
      <div class="footer-copyright-text"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Product',
};
</script>

<style scoped>
.footer {
  width: 100%;
}
.footer-main {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 32px 10%;
  border-top: 2px solid var(--footer-main-border-top-color);
  background-color: var(--footer-main-color);
}
.footer-column {
  flex: 1;
}
.footer-title {
  width: 60%;
  height: 8px;
  margin-bottom: 16px;
  background-color: var(--footer-title-color);
}
.footer-link {
  width: 50%;
  height: 8px;
  background-color: var(--footer-link-color);
}
.footer-link {
  margin-bottom: 16px;
}
.footer-link:hover {
  background-color: var(--footer-link-hover-color);
}
.footer-contact {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.footer-contact-text {
  width: 50%;
  height: 8px;
  background-color: var(--text-color);
}

.footer-circle {
  padding: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: var(--footer-circle-color);
}
.footer-icon {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--footer-icon-color);
}
.footer-copyright {
  width: 100%;
  padding: 32px 10%;
  background-color: var(--footer-copyright-color);
}
.footer-copyright-text {
  width: 50%;
  height: 8px;
  margin: 0px auto 4px;
  background-color: var(--footer-copyright-text-color);
}
.footer-copyright-text.large {
  width: 60%;
}
</style>
