<template>
  <NuxtLayout :postfachBadge="false" name="mobile" prefix="/mobile/wuestenrot">
    <img v-hm="1049" v-wm="393" src="~/assets/images/mobile/wuestenrot/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-2.png" class="support-card" />
      <img src="~/assets/images/mobile/uebersicht/support/card-3.png" class="support-card" />
    </div>

    <!-- Contracts -->

    <ContractButtonBausparvertragMobileWuestenrot v-xm="16" v-ym="622.05" />
    <ContractButtonZwischenkreditMobileWuestenrot v-xm="16" v-ym="755.05" />
    <ContractButtonWohndarlehenMobileWuestenrot v-xm="16" v-ym="888.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>
