adding cards

index.html

@@ -6,7 +6,7 @@
   <link rel="icon" type="image/png" href="/images/logo-kreis_ico.png" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Righteous&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Tayrona Foods</title>
 </head>

package-lock.json

@@ -11,7 +11,8 @@
         "vue": "^3.2.47",
         "vue-i18n": "^9.2.2",
         "vue-mobile-detection": "^2.0.1",
-        "vue-router": "^4.2.2"
+        "vue-router": "^4.2.2",
+        "vue3-carousel": "^0.3.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.1.0",
@@ -1010,6 +1011,14 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vue3-carousel": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz",
+      "integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   },
   "dependencies": {
@@ -1610,6 +1619,12 @@
       "requires": {
         "@vue/devtools-api": "^6.5.0"
       }
+    },
+    "vue3-carousel": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz",
+      "integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==",
+      "requires": {}
     }
   }
 }

package.json

@@ -12,7 +12,8 @@
     "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",
     "vue-mobile-detection": "^2.0.1",
-    "vue-router": "^4.2.2"
+    "vue-router": "^4.2.2",
+    "vue3-carousel": "^0.3.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

src/App.vue

@@ -8,3 +8,38 @@
     <Footer></Footer>
   </div>
 </template>
+
+<style lang="scss">
+  .content {
+    background-color: #000;
+    color: #fff;
+    padding: 0 72px 72px;
+
+      h2 {
+      font-size: 52px;
+      font-weight: 500;
+      line-height: 70px;
+      text-align: center;
+      padding: 72px 0;
+    }
+
+    h4 {
+      font-size: 32px;
+      font-weight: 500;
+      line-height: 70px;
+      text-align: center;
+      padding: 72px 264px;
+    }
+
+    p {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 40px;
+      text-align: justify;
+
+      &.centered {
+        text-align: center;
+      }
+    }
+  }
+</style>

src/components/DifferentBox.vue

@@ -5,16 +5,11 @@ export default {
     title: String,
     description: String
   },
-  methods: {
-    getImage(image) {
-        return new URL(`/src/assets/images/${image}`, import.meta.url).href;
-    },
-  }
 }
 </script>
 <template>
   <div class="different-box">
-    <img :src="getImage(image)" class="image" />
+    <img :src="$helper.getImage(image)" class="image" />
     <h3 class="title">{{ title }}</h3>
     <p class="description">{{ description }}</p>
   </div>

src/components/Employee.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="employee-box">
-    <img :src="getImage(image)" class="image">
+    <img :src="$helper.getImage(image)" class="image">
     <h3 class="name">{{ name }}</h3>
     <h4 class="role">{{ role }}</h4>
   </div>
@@ -13,11 +13,6 @@ export default {
     name: String,
     role: String,
   },
-  methods: {
-    getImage(image) {
-        return new URL(`/src/assets/images/${image}`, import.meta.url).href;
-    },
-  }
 }
 </script>
 

src/components/OriginBox.vue

@@ -5,16 +5,11 @@ export default {
     title: String,
     description: String
   },
-  methods: {
-    getImage(image) {
-        return new URL(`/src/assets/images/${image}`, import.meta.url).href;
-    },
-  }
 }
 </script>
 <template>
   <div class="origin-box">
-    <img :src="getImage(image)" class="image" />
+    <img :src="$helper.getImage(image)" class="image" />
     <h3 class="title">{{ title }}</h3>
     <p class="description">{{ description }}</p>
   </div>

src/components/ProductFlipCard.vue

@@ -0,0 +1,357 @@
+<script>
+const kinds = {
+  earth: 'common.earth',
+  water: 'common.water',
+  air: 'common.air',
+  fire: 'common.fire',
+}
+export default {
+  props: {
+    product: Object
+  },
+  data() {
+    return {
+      flipped: false,
+      kinds,
+    }
+  },
+  methods: {
+    toggle() {
+      this.flipped = !this.flipped;
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="flip-card" :class="{flipped}" @click="toggle">
+    <div v-if="product" class="flip-card-inner" :class="(product && product.kind) || 'no-product'">
+      <div class="flip-card-front">
+        <img class="logo" :src="$helper.getImage(product.image)" />
+        <div>
+          <h3 class="title">{{ $t(kinds[product.kind])}}</h3> 
+          <h3 class="slogan">{{ $t(product.slogan) }}</h3>
+        </div>
+        <div class="description">{{  $t(product.description) }}</div>    
+      </div>
+      <div class="flip-card-back">
+        <div class="info">
+          <div class="info-header">
+            <h3 class="title centered">{{ $t(product.info.name) }}</h3>
+            <h3>- {{ $t(product.info.farm) }} -</h3>
+            <p class="strain">{{ $t(product.info.strain) }}</p>
+          </div>
+          <div class="info-data">
+            <div class="info-data-left">
+              <img class="logo" :src="$helper.getImage(product.image)" />
+              <p class="kind">{{ $t(kinds[product.kind]) }}</p>
+              <p class="slogan">{{ $t(product.slogan) }}</p>
+            </div>
+            <div class="info-data-right">
+              <div class="info-data-row">
+                <div class="info-data-box land">
+                  <div class="info-data-box-label">{{ $t('Land / region') }}</div>
+                  <div class="info-data-box-value">
+                    <div class="text-overflow">{{ $t('Brasil') }}/{{ $t('Cerrado, Carmo do paranaiba') }}</div>
+                  </div>
+                </div>
+                <div class="info-data-box height">
+                  <div class="info-data-box-label">{{ $t('Altura') }}</div>
+                  <div class="info-data-box-value">
+                    <div class="text-overflow">{{ $t('1.100 m') }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="info-data-row">
+                <div class="info-data-box revision">
+                  <div class="info-data-box-label">{{ $t('Revisión') }}</div>
+                  <div class="info-data-box-value">
+                    <div class="text-overflow">{{ $t('Secado al sol') }}</div>
+                  </div>
+                </div>
+                <div class="info-data-box harvest">
+                  <div class="info-data-box-label">{{ $t('Cosecha') }}</div>
+                  <div class="info-data-box-value">
+                    <div class="text-overflow">{{ $t('Seleccionado') }}</div>
+                  </div>
+                </div>
+                <div class="info-data-box profile">
+                  <div class="info-data-box-label">{{ $t('Perfil') }}</div>
+                  <div class="info-data-box-value">
+                    <div class="text-overflow">{{ $t('1/4') }}</div>
+                  </div>
+                </div>
+                
+              </div>
+              <div class="info-data-row">
+                <div class="info-data-box taste">
+                  <div class="info-data-box-label">{{ $t('Sabor') }}</div>
+                  <div class="info-data-box-value">
+                    <div class="text-overflow">
+                      {{ $t('Chocolate, ligero ácido de frutas') }}
+                    </div>
+                  </div>
+                </div>                
+                <div class="info-data-box mouthfeel">
+                  <div class="info-data-box-label">{{ $t('Gusto') }}</div>
+                  <div class="info-data-box-value">
+                    <div class="text-overflow">{{ $t('Ligeramente picante') }}</div>
+                  </div>
+                </div>                
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      No product
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+h3 {
+    font-weight: 500;
+    font-size: 36px;
+    line-height: 50px;
+    text-align: left;
+
+}
+.flip-card {
+  cursor: pointer; 
+  height: 444px;
+  width: 600px;
+  color: #000;
+  font-size: 20px;
+  border-radius: 40px;
+  perspective: 1000px;
+
+  &.flipped &-inner {
+    transform: rotateY(180deg);
+  }  
+
+  &-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+    border-radius: 40px;
+
+    &.earth {
+      background-color: #A6AF94;
+    }
+    &.water {
+      background-color: #889CA7;
+    }
+    &.air {
+      background-color: #F4EEB0;
+    }
+    &.fire {
+      background-color: #D58C83;
+    }
+    &.no-product {
+      background-color: #fff;
+    }
+  }
+
+&-front {
+  display: grid;
+  grid-template-columns: 180px auto;
+  grid-template-rows: 160px auto;
+  justify-items: start;
+  align-items: center;
+  
+  .description {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 35px;
+    text-align: justify;
+    padding: 0 44px;
+    align-self: flex-start;
+  }
+  .logo {
+    height: 184px;
+    width: 147px;
+  }
+}
+
+  &-front, &-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+
+  &-back {
+    transform: rotateY(180deg);
+    border-radius: 40px;
+    padding-top: 16px;
+
+    h3, h4 {
+      font-family: 'Righteous', cursive;
+      text-align: center;
+    }
+
+    .info {
+      height: 100%;
+      width: 100%;
+      display: grid;
+      grid-template-rows: 35% 65%;
+
+      
+      .strain {
+        text-align: center;
+        font-family: 'Cormorant Garamond', serif;
+        font-size: 24px;
+      }
+
+      &-data {
+        display: grid;
+        grid-template-columns: 30% 70%;
+        margin: 20px;
+        border-style: solid;
+        border-width: 2px;
+
+        &-left {
+          padding-top: 16px;
+        }
+
+        &-right {
+          display: grid;
+          grid-template-rows: repeat(3, 1fr);
+          height: 100%;
+          width: 100%;
+
+          .earth & {
+            background-color: #babfa9;
+          }
+          .water & {
+            background-color: #92a7b1;
+          }
+          .air & {
+            background-color: #f4f4cc;
+          }
+          .fire & {
+            background-color: #d59c95;
+          }          
+        }
+
+        &-row {            
+          border-top-style: solid;
+          border-top-width: 2px;
+          border-bottom-style: solid;
+          border-bottom-width: 2px;
+          display: inline-flex;
+          // flex-wrap: nowrap;
+          // justify-content: space-around;
+          min-width: 100%;
+          height: 100%;
+
+          &:first-child {
+            border-top: none;
+          }
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .earth & {
+            border-color: #A6AF94;
+          }
+          
+          .water & {
+            border-color: #889CA7;
+          }
+          .air & {
+            border-color: #F4EEB0;
+          }
+          .fire & {
+            border-color: #D58C83;
+          }
+        }
+
+        &-box {
+          padding: 8px 0 0 8px;
+          border-right-style: solid;
+          border-right-width: 2px;
+          min-width: 100px;
+          flex-basis: 0px;
+          flex-grow: 1;
+
+          .text-overflow {
+            width: 98%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+
+          &:last-child {
+            border-right: none;
+          }
+
+
+          .earth & {
+            border-color: #A6AF94;
+          }
+          
+          .water & {
+            border-color: #889CA7;
+          }
+          .air & {
+            border-color: #F4EEB0;
+          }
+          .fire & {
+            border-color: #D58C83;
+          }
+
+          &-label{
+            font-family: 'Righteous', cursive;
+            font-size: 20px;
+            text-transform: uppercase;
+          }
+          &-value{
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 20px;
+          }
+        }
+
+        p {
+          &.kind {
+            font-family: 'Righteous', cursive;
+            text-align: left;
+            line-height: 20px;
+            margin-left: 20px;
+            text-transform: uppercase;
+            letter-spacing: 1.3px;
+          }
+          &.slogan {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 90%;
+            text-align: left;
+            line-height: 25px;
+            margin-left: 20px;
+          }
+        }
+
+        .earth & {
+          border-color: #babfa9;
+        }
+        .water & {
+          border-color: #92a7b1;
+        }
+        .air & {
+          border-color: #f4f4cc;
+        }
+        .fire & {
+          border-color: #d59c95;
+        }
+      }
+    }
+  }
+}
+</style>

src/i18n/es.js

@@ -53,4 +53,29 @@ export default {
   certifications: {
     title: 'Nuestras certificaciones'
   },
+  products: {
+    brasil_de_andrade: {
+      slogan: 'Nacido para crear',
+      description: 'La tierra, buscamos activamente las mejores fincas cafeteras a nivel mundial donde suelos ricos en nutrientes son la base para formar granos de café de alta calidad. Desde las fértiles plantaciones de América Latina hasta las exóticas zonas de cultivo de África, nos centramos en la sostenibilidad y el comercio justo.',
+      info: {
+        name: 'Brasil de Andrade',
+        farm: 'Capim Branco',
+        strain: '100% Arabica',
+        land: 'Brasil',
+        region: 'Cerrado, Carmo do paranaiba',
+        height: '1.100 m',
+        revision: 'Secado al sol',
+        harvest: 'Seleccionado cuidadosamente',
+        profile: '1/4',
+        taste: 'Chocolate, ligero ácido de frutas.',
+        mouthfeel: 'Ligeramente picante'
+      }
+    }
+  },
+  common: {
+    earth: 'Tierra',
+    water: 'Agua',
+    air: 'Aire',
+    fire: 'Fuego',
+  }
 }

src/main.js

@@ -5,11 +5,13 @@ import VueMobileDetection from 'vue-mobile-detection';
 
 import './style.css'
 import App from './App.vue'
+import helper from './plugins/helper';
 
 const app = createApp(App);
 
 app.use(router);
 app.use(VueMobileDetection);
 app.use(i18n);
+app.use(helper);
 
 app.mount('#app');

src/plugins/helper.js

@@ -0,0 +1,11 @@
+const getImage = (image) => {
+  return new URL(`/src/assets/images/${image}`, import.meta.url).href;
+}
+
+export default {
+  install: (app, options) => {
+    app.config.globalProperties.$helper = {
+      getImage,
+    };
+  },
+}

src/views/about/About.vue

@@ -5,7 +5,7 @@
 
 <template>
   <MenuVue type="about" :title="$t('about.title')"></MenuVue>
-  <section class="about-section">
+  <section class="about-section content">
     <h2>Tayrona Foods</h2>
     <p>Somos un equipo de colombianos amantes del café, cuyo sueño es a través de experiencias excepcionales compartir con el mundo las maravillas de este producto, sus únicos e inolvidables aromas, la amplia diversidad de sus matices y sobre todo su capacidad de cautivar los sentidos.</p>
     <p>Hemos crecido entre los deliciosos sabores de la comida callejera y las pintorescas plantaciones de café de Colombia, esto sumado a nuestra formación en la ingeniería agrícola, la administración de empresas y los negocios internacionales, así como la vida en los Estados Unidos, España y Alemania nos han aportado una variedad de ideas y nuevas experiencias para llevar la cultura del café al mundo y de la mano apoyar a los campesinos de nuestro país.</p>
@@ -21,33 +21,9 @@
 
 <style lang="scss" scoped>
   .about-section {
-    background-color: #000;
-    color: #fff;
-    padding: 0 72px 72px;
   }
 
-  h2 {
+  
-    font-size: 52px;
-    font-weight: 500;
-    line-height: 70px;
-    text-align: center;
-    padding: 72px 0;
-  }
-
-  h4 {
-    font-size: 32px;
-    font-weight: 500;
-    line-height: 70px;
-    text-align: center;
-    padding: 72px 264px;
-  }
-
-  p {
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 40px;
-    text-align: justify;
-  }
 
   .employees {
     display: flex;

src/views/products/Products.vue

@@ -1,7 +1,239 @@
-<script setup>
+<script>
   import MenuVue from "../../components/Menu.vue";
+  import 'vue3-carousel/dist/carousel.css'
+  import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
+  import ProductFlipCard from "../../components/ProductFlipCard.vue";
+
+  const products = [
+    {
+      kind: 'earth',
+      image: 'logo_tierra.svg',
+      slogan: 'Nacido para crear',
+      description: 'La tierra, buscamos activamente las mejores fincas cafeteras a nivel mundial donde suelos ricos en nutrientes son la base para formar granos de café de alta calidad. Desde las fértiles plantaciones de América Latina hasta las exóticas zonas de cultivo de África, nos centramos en la sostenibilidad y el comercio justo.',
+      info: {
+        name: 'Brasil de Andrade',
+        farm: 'Capim Branco',
+        strain: '100% Arabica',
+        land: 'Brasilien / Cerrado, Carmo do paranaiba',
+        height: '1.100 m',
+        revision: 'Secado al sol',
+        harvest: 'Seleccionado cuidadosamente',
+        profile: '1/4',
+        taste: 'Chocolate, ligero ácido de frutas.',
+        mouthfeel: 'Ligeramente picante'
+      }
+    }, 
+    {
+      kind: 'water',
+      image: 'logo_agua.svg',
+      slogan: 'Nacido para sentir',
+      description: 'El agua, juega un papel decisivo en la preparación del café. Por lo tanto, solo utilizamos agua de primera clase que se adapta perfectamente a los requisitos individuales de cada café. La cantidad y calidad correcta del agua despliega los aromas y sabores en cada taza.',
+      info: {
+        name: 'Brasil de Andrade',
+        farm: 'Capim Branco',
+        strain: '100% Arabica',
+        land: 'Brasilien / Cerrado, Carmo do paranaiba',
+        height: '1.100 m',
+        revision: 'Secado al sol',
+        harvest: 'Seleccionado cuidadosamente',
+        profile: '1/4',
+        taste: 'Chocolate, ligero ácido de frutas.',
+        mouthfeel: 'Ligeramente picante'
+      }
+    },
+    {
+      kind: 'air',
+      image: 'logo_aire2.svg',
+      slogan: 'Nacido para inspirar',
+      description: 'El aire, es otra parte esencial de nuestra pasión por el café, damos gran importancia a los granos de café recién tostados que conservan su aroma y sabor inconfundibles. Es por eso que tostamos en pequeños lotes para asegurarnos de que cada taza que disfrutes esté llena de frescura y aroma.',
+      info: {
+        name: 'Brasil de Andrade',
+        farm: 'Capim Branco',
+        strain: '100% Arabica',
+        land: 'Brasilien / Cerrado, Carmo do paranaiba',
+        height: '1.100 m',
+        revision: 'Secado al sol',
+        harvest: 'Seleccionado cuidadosamente',
+        profile: '1/4',
+        taste: 'Chocolate, ligero ácido de frutas.',
+        mouthfeel: 'Ligeramente picante'
+      }
+    },
+    {
+      kind: 'fire',
+      image: 'logo_fuego.svg',
+      slogan: 'Nacido para triunfar',
+      description: 'El fuego, la pasión que resuena en cada paso de nuestro trabajo. Desde la selección de variedades de café verde hasta el cuidadoso tostado y la preparación amorosa, estamos allí con alma y corazón para ofrecerte una experiencia de café extraordinaria.',
+      info: {
+        name: 'Brasil de Andrade',
+        farm: 'Capim Branco',
+        strain: '100% Arabica',
+        land: 'Brasilien / Cerrado, Carmo do paranaiba',
+        height: '1.100 m',
+        revision: 'Secado al sol',
+        harvest: 'Seleccionado cuidadosamente',
+        profile: '1/4',
+        taste: 'Chocolate, ligero ácido de frutas.',
+        mouthfeel: 'Ligeramente picante'
+      }
+    },
+]
+
+  export default {
+    data() {
+      return {
+        products,
+      };
+    },
+    components: {
+    MenuVue,
+    Carousel,
+    Slide,
+    Pagination,
+    Navigation,
+    ProductFlipCard
+},
+    methods: {
+      getImage(image) {
+        return new URL(`/src/assets/images/${image}`, import.meta.url).href;
+      },
+    }
+  }
 </script>
 
 <template>
   <MenuVue type="products"></MenuVue>
-</template>
+  <section class="product-section content">
+    <h2>Origen</h2>
+    <p>Las culturas indígenas siempre han tenido una estrecha relación con su entorno natural, encontrando en la armonía con los cuatro elementos: fuego, agua, aire y tierra, el sentido de sus vidas, y es esta misma relación la que describe maravillosamente nuestra serie de cafés.</p>
+    <p class="centered"><img src="@images/v-elemento.png" /></p>
+    <div class="cards">
+      <ProductFlipCard class="card" v-for="product in products" :key="product.id" :product="product"></ProductFlipCard>
+    </div>
+    <Carousel :items-to-show="2" :wrap-around="true" snap-align="start">
+      <Slide v-for="slide in slides" :key="slide.class">
+        <div class="carousel__item" :class="slide.class">
+          <div class="carousel__item__inner">
+            <div class="carousel__item__inner__front">
+              <img class="logo" :src="getImage(slide.image)" />
+              <h3 class="title">{{ slide.title }}</h3> 
+              <div class="description">{{  slide.description }}</div>    
+            </div>
+            <div class="carousel__item__inner__back">
+              back
+            </div>
+          </div>
+        </div>
+      </Slide>
+
+      <template #addons>
+        <Navigation />
+        <Pagination />
+      </template>
+    </Carousel>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+
+.cards {
+  display: grid;
+  grid-template-columns: 50% 50%;
+}
+
+.card {
+  margin: 8px;
+}
+.carousel {
+
+  &__item {
+    height: 444px;
+    width: 625px;
+    color: #000;
+    font-size: 20px;
+    border-radius: 40px;
+
+    &:hover &__inner {
+      transform: rotateY(180deg);
+    }
+    
+
+    &__inner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transition: transform 0.8s;
+      transform-style: preserve-3d;
+      border-radius: 40px;
+
+      &__front {
+        display: grid;
+        grid-template-columns: 150px auto;
+        grid-template-rows: 160px auto;
+        justify-items: start;
+        align-items: center;
+
+        h3 {
+          font-weight: 500;
+          font-size: 36px;
+          line-height: 50px;
+          text-align: left;
+        }
+
+        .description {
+          grid-column-start: 1;
+          grid-column-end: 3;
+          font-weight: 500;
+          font-size: 22px;
+          line-height: 35px;
+          text-align: justify;
+          padding: 0 44px;
+          align-self: flex-start;
+        }
+        .logo {
+          height: 184px;
+          width: 147px;
+        }
+      }
+
+      &__front, &__back {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        -webkit-backface-visibility: hidden; /* Safari */
+        backface-visibility: hidden;
+      }
+
+      &__back {
+        transform: rotateY(180deg);
+        border-radius: 40px;
+      }
+    }
+
+    &.tierra {
+      background-color: #A6AF94;
+    }
+    &.agua {
+      background-color: #889CA7;
+    }
+    &.aire {
+      background-color: #F4EEB0;
+    }
+    &.fuego {
+      background-color: #D58C83;
+    }
+  }
+
+  &__slide {
+    padding: 10px;
+  }
+
+  &__prev,
+  &__next {
+    box-sizing: content-box;
+    border: 5px solid white;
+  }
+}
+
+
+</style>