background isn't adjusted properly

<template>
  <div class="relative min-h-screen bg-gradient-to-r from-purple-100 via-pink-200 to-purple-100">
    <Navbar />
    <img src="./assets/img/cont_corner_topl.png" alt="Top Image" class="top-image noselect" draggable="false" />
    <img src="./assets/img/cont_corner_bottomr.png" alt="Down Image" class="down-image noselect" draggable="false" />
    <NuxtPage />
  </div>

</template>

<script setup>
useHead({
  title: "麗奈っち // reinacchi",
  link: [
    {
      rel: "stylesheet",
      href: "https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css",
    },
  ],
});
</script>

<style>
.top-image {
  @apply absolute top-0 left-0 w-64 h-64;
}

.down-image {
  @apply absolute bottom-0 right-0 w-64 h-64;
}

@media (min-width: 768px) {
  .top-image {
    @apply w-96 h-96;
  }

  .down-image {
    @apply w-96 h-96;
  }
}
</style>