Card-Slider: Abstand Tablet

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -3,7 +3,7 @@
 @import '../../components/event-teaser-large/event-teaser-large.scss';
 
 .right-open-container{
-  @media (min-width: 1000px) {
+  @media (min-width: 400px) {
     width: calc((var(--container-width) / 2) + 50vw - 8px);
     margin-left:auto;
     margin-right:0;
@@ -53,6 +53,10 @@
     contain: layout;
     margin:0 calc(var(--col-padding) * -1);
     @media(max-width: 999px) {
+      width: 34500px;
+      //margin:0;
+    }
+    @media(max-width: 399px) {
       width: 10000%;
       margin:0;
     }
@@ -85,8 +89,11 @@
     max-width:1%;
     min-width:1%;
     min-height:400px;
-    
+    padding:var(--col-padding);
     @media(min-width: 1000px) {
+      //padding:var(--col-padding);
+    }
+    @media(min-width: 400px) {
       padding:var(--col-padding);
     }
   }
@@ -105,157 +112,156 @@
   }
 }
 
+
 .rotationslider{
   margin-bottom:calc(var(--section-margin) + 2rem) !important;
   overflow: hidden;
   padding-top: var(--section-margin);
   margin-top:0;
-}
-
-.rotationslider h1{
-  max-width: 50%;
-  display: inline-block;
-}
-
-.rotationslider .eventteaserlargeslider  {
-  margin-bottom:2rem;
-  position: relative;
-  display: block;
-
-  button {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    
+  h1{
+    max-width: 50%;
+    display: inline-block;
   }
-  .slider-tabs, .tabs {
-    position: absolute;
-    bottom: -2rem;
-    left: 50%;
-    right: 0;
-    padding: 0;
-    list-style: none;
-    transform: translate(-50%, 0);
-    text-align: center;
-    font-size: 0;
-    line-height: 0;
-    margin: 0;
-    li {
-      display: inline-block;
-      vertical-align: top;
+  .eventteaserlargeslider  {
+    margin-bottom:2rem;
+    position: relative;
+    display: block;
 
-      &.active button:before {
-        background-color: var(--theme-color-primary);
-        //box-shadow: 0 0 0 2px var(--theme-color-primary);
-      }
+    button {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      
     }
-
-    .btn {
-      --button-min-size: 24px;
+    .slider-tabs, .tabs {
+      position: absolute;
+      bottom: -2rem;
+      left: 50%;
+      right: 0;
+      padding: 0;
+      list-style: none;
+      transform: translate(-50%, 0);
+      text-align: center;
       font-size: 0;
       line-height: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &::before {
-        content: "";
-        position: relative;
-        display: block;
-        width: 15px;
-        height: 15px;
-        //border: 2px solid var(--theme-color-primary);
-        background-color: var(--theme-color-primary-dimmed-04);
-        border-radius: 15px;
-        transition: 0.2s ease;
-      }
+      margin: 0;
+      li {
+        display: inline-block;
+        vertical-align: top;
 
-      &::after {
-        display: none;
+        &.active button:before {
+          background-color: var(--theme-color-primary);
+          //box-shadow: 0 0 0 2px var(--theme-color-primary);
+        }
       }
 
-      &:hover {
-        background-color: transparent;
+      .btn {
+        --button-min-size: 24px;
+        font-size: 0;
+        line-height: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         &::before {
-          background-color: var(--theme-color-primary);
+          content: "";
+          position: relative;
+          display: block;
+          width: 15px;
+          height: 15px;
+          //border: 2px solid var(--theme-color-primary);
+          background-color: var(--theme-color-primary-dimmed-04);
+          border-radius: 15px;
+          transition: 0.2s ease;
+        }
+
+        &::after {
+          display: none;
+        }
+
+        &:hover {
+          background-color: transparent;
+
+          &::before {
+            background-color: var(--theme-color-primary);
+          }
         }
       }
     }
-  }
-  
-  .prev, .next {
-    position: absolute;
-    top: -94px;
-    width: 60px;
-    height: 60px;
-    text-align: center;
-    line-height: 60px;
-    left: calc(var(--container-width) - 2 * var(--container-padding) - 60px);
-    color: var(--theme-color-primary);
-    right:auto;
-    border-radius: 24px;
-    background: var(--theme-color-primary-dimmed-04);
-    --button-hover-shadow-opacity: 0.4; 
-    --button-hover-shadow-size: 6px ;
-    @media(max-width: 1470px) {
-      left:auto;
-      right: var(--container-padding);
-    }
-    @media(max-width: 1339px) {
-      top: -90px;
-    }
-    @media(max-width: 999px) {
-      right:0px;
-      top: -80px;
-    }
-    @media(max-width: 767px) {
     
+    .prev, .next {
+      position: absolute;
+      top: -94px;
+      width: 60px;
+      height: 60px;
+      text-align: center;
+      line-height: 60px;
+      left: calc(var(--container-width) - 2 * var(--container-padding) - 60px);
+      color: var(--theme-color-primary);
+      right:auto;
+      border-radius: 24px;
+      background: var(--theme-color-primary-dimmed-04);
+      --button-hover-shadow-opacity: 0.4; 
+      --button-hover-shadow-size: 6px ;
+      @media(max-width: 1470px) {
+        left:auto;
+        right: var(--container-padding);
+      }
+      @media(max-width: 1339px) {
+        top: -90px;
+      }
+      @media(max-width: 399px) {
+        right:0px;
+        top: -80px;
+      }
+      @media(max-width: 767px) {
+      
+      }
+      &:before {
+        @include icon-small-arrow-right-simple;
+        font-family: "Icons", sans-serif;
+        font-size: 30px;
+        content: "\e825";
+      }
+      &:after{
+        content: "";
+          position: absolute;
+          display: block;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          border-radius: var(--border-radius-lg);
+          box-shadow: 0 0 0 2px var(--theme-color-primary-dimmed-04);
+          opacity: 0;
+          transition: 0.3s ease;
+      }
+      &:hover:after{
+        opacity: 0.4;
+        box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04);
+      }
+      
     }
-    &:before {
-      @include icon-small-arrow-right-simple;
-      font-family: "Icons", sans-serif;
-      font-size: 30px;
-      content: "\e825";
+
+    .prev {
+      left: calc(var(--container-width) - 2 * var(--container-padding) - 140px);
+      transform: rotate(180deg);
+      @media(max-width: 1470px) {
+        left:auto;
+        right:calc(var(--container-padding) + 70px);
+      }
+      @media(max-width: 399px) {
+        right:70px;
+      }
     }
-    &:after{
-      content: "";
-        position: absolute;
-        display: block;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: var(--border-radius-lg);
-        box-shadow: 0 0 0 2px var(--theme-color-primary-dimmed-04);
-        opacity: 0;
-        transition: 0.3s ease;
+    .count{
+      display:none;
     }
-    &:hover:after{
-      opacity: 0.4;
-      box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04);
+    h2, .like-h2 {
+      margin-top: 0.3em;
+      margin-bottom: 0.4em;
     }
-    
-  }
 
-  .prev {
-    left: calc(var(--container-width) - 2 * var(--container-padding) - 140px);
-    transform: rotate(180deg);
-    @media(max-width: 1470px) {
-      left:auto;
-      right:calc(var(--container-padding) + 70px);
-    }
-    @media(max-width: 999px) {
-      right:70px;
-    }
-  }
-  .count{
-    display:none;
   }
-  h2, .like-h2 {
-    margin-top: 0.3em;
-    margin-bottom: 0.4em;
-  }
-
-}
+}