countdown and styling

src/components/Countdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <vue-countdown :time="time" :interval="1000" v-slot="{ days, hours, minutes, seconds }">
+    <vue-countdown tag="div" :time="time" :interval="1000" v-slot="{ days, hours, minutes, seconds }">
     <div class="time-box">
 
     
@@ -28,27 +28,22 @@
 </template>
 
 <style>
-.time-box{
-    height: 500px;
-    width: 500px;
-    margin:0 auto;
+.component-dark{
+    padding-top: 25px;
 }
-@media (min-width: 1024px) {
-    .time-box{
-        padding-top:250px;
-        width: 1000px;
-    }
+.time-box{
+    height: 1000px;
+    width: 100%;
+    margin-top: 25px;
 }
 
-
 .time{
     height: 200px;
     width: 200px;
-    margin: 25px;
     text-align: center;
     background-color: #6495ed;
-    float: left;
     border-radius: 22px;
+    margin:25px auto;
 }
 
 .time-number{
@@ -58,6 +53,30 @@
     padding-top: 40px;
 }
 
+@media (min-width: 500px) {
+    .time-box{
+        height: 500px;
+        width: 500px;
+        margin:0 auto;
+    }
+
+    .time{
+        float: left;
+        margin: 25px;
+    }
+}
+
+
+@media (min-width: 1024px) {
+    .time-box{
+        padding-top:250px;
+        width: 1000px;
+    }
+}
+
+
+
+
 </style>
   
   <script lang="ts">

src/views/HomeView.vue

@@ -7,19 +7,10 @@
   <main>
     <div class="components"> 
       <div class="component">
-        <img width="500px" style="margin: 0 auto; display: block;"
-                    data-original="{{ item.img }}"
-                    v-bind:src="logo"
-                    class="lazy" alt="">
+        <img class="logo lazy" data-original="{{ item.img }}" g
+                    v-bind:src="logo" alt="">
       </div>
       <div class="component">
-        
-        <!--<div style="width: 100%; height: 100%;">
-          <img width="500px" style="margin: 0 auto; display: block;"
-                    data-original="{{ item.img }}"
-                    v-bind:src="logo"
-                    class="lazy" alt="">
-        </div>-->
         <h3>WIR HEIRATEN</h3>
         <h2>11 | JULI | 2025</h2>
         <h1>Judith & Fritzi</h1>
@@ -34,9 +25,22 @@
 <style>
   h1{
     color: #6495ed;
-    font-size: 84px;
+    font-size: 64px;
     padding: 40px 0px;
   }
+  .logo{
+    width: 100%;
+    display: block;
+    margin: 0 auto;
+  }
+  @media (min-width: 500px) {
+    h1{
+      font-size: 84px;
+    }
+    .logo{
+      width: 500px;
+    }
+}
   @media (min-width: 750px) {
     h1{
       font-size: 128px;