<template>
  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
    <!-- Main Content -->
    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
      <!-- Mobile Images -->
      <div class="md:hidden">
        <img
          src="./mobile/row-1-column-1.webp"
          alt="Terms of Service - Part 1"
          class="mb-0 w-full"
        />
        <img
          src="./mobile/row-2-column-1.webp"
          alt="Terms of Service - Part 2"
          class="mb-0 w-full"
        />
        <img
          src="./mobile/row-3-column-1.webp"
          alt="Terms of Service - Part 3"
          class="mb-0 w-full"
        />
      </div>

      <!-- Desktop Images (2x) -->
      <div class="hidden md:block">
        <img src="./pc/row1.png" alt="Terms of Service - Part 1" class="mb-10 h-[18px] w-[206px]" />
        <img
          src="./pc/row2.png"
          alt="Terms of Service - Part 2"
          class="mb-0 w-full"
          style="width: 100%; height: auto"
        />
        <img
          src="./pc/row3.png"
          alt="Terms of Service - Part 3"
          class="m-auto mt-[60px] h-[70px] w-[693px]"
        />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
// No additional logic needed for this static page
</script>

<style scoped>
/* No additional styles needed */
</style>
