<template>
  <NuxtLayout
    :hasPostfachLink="false"
    :postfachBadge="false"
    :profilLink="null"
    name="mobile"
    prefix="/mobile/wuerttembergische"
  >
    <img v-hm="1356" v-wm="393" src="~/assets/images/mobile/wuerttembergische/uebersicht/frame.png" />

    <template #stickyHeader>
      <img v-hm="64" v-wm="393" src="~/assets/images/mobile/uebersicht/sticky-header.png" />
    </template>

    <!-- Support -->

    <div
      v-hm="114"
      v-wm="393"
      v-xm="0"
      v-ym="170"
      class="support"
      :style="{
        padding: `0 ${(17 / frameWidthMobile) * 100}%`,
        gap: `${(8 / frameWidthMobile) * 100}%`,
      }"
    >
      <img src="~/assets/images/mobile/uebersicht/support/card-1.png" class="support-card" />
      <img src="~/assets/images/mobile/uebersicht/support/card-3.png" class="support-card" />
    </div>
  </NuxtLayout>
</template>

<style scoped>
.support {
  position: absolute;
  display: flex;
  overflow-x: auto;
}

.support-card {
  position: relative;
  width: auto;
  height: 100%;
}

.support-card > img {
  position: relative;
  width: auto;
  height: 100%;
}
</style>
