<script setup>
  import OriginBoxVue from "./OriginBox.vue";
</script>

<template>
  <section class="origins">
    <h2>{{ $t('origins.header') }}</h2>
    <div class="boxes">
      <OriginBoxVue image="coffee_brasil.png" :title="$t('origins.brazil')" :description="$t('origins.brazil_description')" />
      <OriginBoxVue image="coffee_colombia.png" :title="$t('origins.colombia')" :description="$t('origins.colombia_description')" />
      <OriginBoxVue image="coffee_peru.png" :title="$t('origins.peru')" :description="$t('origins.peru_description')" />
      <OriginBoxVue image="coffee_uganda.png" :title="$t('origins.uganda')" :description="$t('origins.uganda_description')" />
    </div>
  </section>
</template>

<style lang="scss" scoped>
  .origins {
    color: #fff;
    background-color: #000;
    padding: 72px 64px;
  }

  h2 {
    padding: 0 150px;
    font-size: 52px;
    text-align: center;
  }

  .boxes {
    margin-top: 72px;
    display: flex;
    justify-content: space-between;
  }
</style>