@media-Regel eingefügt in Datei 'termine.css'

src/css/style.scss

@@ -112,31 +112,6 @@ img {
 }
 
 
-.fitko-termine {
-  text-align: center;
-  min-height: 500px;
-}
-
-.fitko-termine-heading {
-  text-align: center;
-  height: 80px;  
-}
-
-.fitko-termine-before-button {
-  text-align: center;
-  min-height: 140px;
-  
-}
-
-
-.fitko-termine-after-button {
-  text-align: center;
-  min-height: 470px;
-  margin-top: 25px;
-  
-}
-
-
 @media (min-width: 997px) {
   .navbar__items--right [class^="searchBox"] {
     position: right;
@@ -153,16 +128,4 @@ img {
     margin-left: -60px;
     margin-right: 0px;
   }
-}
-
-@media (max-width:444px) {    
-  
-  .fitko-termine-after-button {
-    text-align: center;
-    display: inline-block;
-    height: 600px !important;
-    
-  }
-
-}
-
+}
\ No newline at end of file

src/css/termine.css

+
+.fitko-termine {
+    text-align: center;
+    min-height: 500px;
+  }
+  
+  .fitko-termine-heading {
+    text-align: center;
+    height: 80px;  
+  }
+  
+  .fitko-termine-before-button {
+    text-align: center;
+    min-height: 140px;
+    
+  }
+  
+  
+  .fitko-termine-after-button {
+    text-align: center;
+    min-height: 280px;
+    margin-top: 25px;
+    
+  }
+  
+
+  @media screen and (max-width: 900px){
+    .fitko-termine {
+        text-align: center;
+        min-height: 500px;
+    }
+ }
+
+  @media screen and (max-width: 900px){
+    
+    .fitko-termine-before-button {
+     
+      
+      height: 210px !important;
+      
+    }
+  
+  }
+   
+  @media screen and (max-width: 900px){
+    
+    .fitko-termine-after-button {
+     
+      
+      height: 600px !important;
+      
+    }
+  
+  }
\ No newline at end of file

src/pages/termine.mdx

@@ -6,7 +6,7 @@ import MailToButtonTermine from '@components/MailToButtonTermine'
 import BannerTermine from '@components/BannerTermine'
 import CardTermine from '@components/CardTermine'
 import MailToButton from '@components/MailToButton'
-import '../css/style.scss';
+import '../css/termine.css';
 
 <header className="max-w-3xl mx-auto text-center pb-16">
   <h1 className="h1 mb-4">Veranstaltungen</h1>