<template>
  <NuxtLayout :postfachBadge="false" name="mobile" prefix="/mobile/ko">
    <img v-hm="1023" v-wm="393" src="~/assets/images/mobile/ko/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="118"
      v-wm="393"
      v-xm="0"
      v-ym="144"
      class="support"
      :style="{
        padding: `0 ${(15 / frameWidthMobile) * 100}% 0 ${(17 / frameWidthMobile) * 100}%`,
      }"
    >
      <img src="~/assets/images/mobile/uebersicht/support/card-3.png" />
    </div>

    <!-- Contracts -->

    <ContractButtonBausparvertragMobileKO v-xm="16" v-ym="596.05" />
    <ContractButtonZwischenkreditMobileKO v-xm="16" v-ym="729.05" />
    <ContractButtonWohndarlehenMobileKO v-xm="16" v-ym="862.05" />
  </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>
