<script lang="ts" setup>
const {src, link, jahr, fontSize}=defineProps(["src", "link","jahr","fontSize"]);
</script>
<template>
  <div
    class="embla__slide slider-image item"
    style="margin-left: 1rem; margin-right: 1rem"
  >
    <div class="slide-content">
      <div class="item-img">
        <div class="item-wrapper">
          <NuxtLink :to="link">
            <img
              :src="
                src
              "
            />
            <span class="jahr-overlay" v-if="jahr" :style="{'font-size': fontSize+'px'}">
              {{ jahr }}
            </span>
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.item-wrapper {
  position: relative;
}
  .jahr-overlay {
    color: white;
    mix-blend-mode: difference;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>
