Convert ids to classes

src/components/HomeDownloadSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="download" class="home-section">
+  <div class=" downloadhome-section">
     <h2 class="title">Pobieranie</h2>
     <home-download-version-switcher v-if="$mq === 'md'" :activeSection="activeSection" />
     <h3 class="section-name section-name-beta" v-if="$mq === 'lg'">BETA</h3>
@@ -42,7 +42,7 @@
 </script>
 
 <style lang="scss" scoped>
-  #download {
+  .download {
     height: 100vh;
     box-sizing: border-box;
     padding: 0 32px 32px;

src/components/HomeFeaturesTableSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="features-table-section" class="home-section">
+  <div class="features-table-section home-section">
     <h2 class="features-table-section__title">Porównanie funkcji</h2>
     <div class="features-table">
       <table class="features-table__table">
@@ -40,7 +40,7 @@
 </script>
 
 <style lang="scss">
-  #features-table-section {
+  .features-table-section {
     min-height: 100vh;
     overflow: hidden;
     box-sizing: border-box;

src/components/HomeMainHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="main-header">
+  <div class="home-main-header">
     <h1 class="logo"><img src="../assets/wulkanowy-full-flat.svg" alt="Wulkanowy" /></h1>
     <p class="text">
       Aplikacja ucznia i rodzica<br />
@@ -90,7 +90,7 @@
 
 
 <style lang="scss" scoped>
-  #main-header {
+  .home-main-header {
     padding-bottom: 48px;
     height: 100vh;
     box-sizing: border-box;

src/components/HomeMainSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="main" class="home-section">
+  <div class="main home-section">
     <home-main-header />
   </div>
 </template>
@@ -16,7 +16,7 @@
 </script>
 
 <style lang="scss" scoped>
-  #main {
+  .main {
     height: 100vh;
     background: linear-gradient(
         rgba(0, 0, 0, 0.3),

src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="home">
+  <div class="home">
     <home-main-section />
     <home-features-table-section />
     <home-download-section />
@@ -30,7 +30,7 @@
     scroll-snap-type: y proximity;
   }
 
-  #home .home-section {
+  .home .home-section {
     scroll-snap-align: start;
   }
 </style>