@appartmint/mint 2.1.1 → 2.1.3

package/dist/css/mint.css

@@ -890,6 +890,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   gap: 1rem;
   width: auto;
   text-decoration: none;
+  white-space: nowrap;
 }
 #mint-header .mint-logo span {
   margin: 0;
@@ -1098,11 +1099,10 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
 }
 
 :root .mint-landing.swiper {
-  width: 100vw;
   max-width: 100vw;
-}
-:root .mint-landing.swiper {
   top: -4px;
+  width: calc(100% + 8px);
+  left: -4px;
 }
 @media (min-width: 480px) {
   :root .mint-landing.swiper {
@@ -1114,8 +1114,15 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     top: -16px;
   }
 }
-:root .mint-landing.swiper {
-  left: -4px;
+@media (min-width: 480px) {
+  :root .mint-landing.swiper {
+    width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  :root .mint-landing.swiper {
+    width: calc(100% + 32px);
+  }
 }
 @media (min-width: 480px) {
   :root .mint-landing.swiper {
@@ -1130,8 +1137,32 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
 :root .mint-landing.swiper .swiper-slide {
   padding: 0;
 }
-:root .mint-landing .mint-video-bg {
+
+.mint-landing .mint-video-bg {
+  align-items: center;
+  top: 0;
+  width: 100%;
   margin: 0;
+  min-height: calc(100vh - var(--mint-header-height));
+  padding: 16px;
+}
+@media (min-width: 480px) {
+  .mint-landing .mint-video-bg {
+    padding: calc(16px + 48 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  .mint-landing .mint-video-bg {
+    padding: 64px;
+  }
+}
+.mint-landing .mint-video-bg iframe, .mint-landing .mint-video-bg video {
+  position: absolute;
+}
+@media (min-width: 1200px) {
+  .mint-landing .mint-video-bg iframe + * .mint-grid, .mint-landing .mint-video-bg video + * .mint-grid {
+    margin-bottom: 0;
+  }
 }
 
 .grecaptcha-badge {
@@ -1157,54 +1188,53 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   flex-direction: column;
   align-items: flex-end;
   justify-content: center;
+  flex-direction: row;
+  min-height: calc(100vh - var(--mint-header-height) + 10rem);
   gap: 2rem;
   position: relative;
+  top: -4px;
+  width: calc(100% + 8px);
+  padding: 4px;
 }
-@media (min-width: 1200px) {
+@media (min-width: 480px) {
   .mint-video-bg {
-    flex-direction: row;
-    min-height: calc(100vh - var(--mint-header-height));
-    margin-bottom: 15%;
+    top: calc(-4px + -12 * (100vw - 480px) / 288);
   }
 }
-@media (min-width: 1200px) {
-  .mint-video-bg > section {
-    margin-bottom: -15%;
+@media (min-width: 768px) {
+  .mint-video-bg {
+    top: -16px;
   }
 }
-.mint-video-bg iframe, .mint-video-bg video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  pointer-events: none;
-}
-@media (min-width: 1200px) {
-  .mint-video-bg iframe, .mint-video-bg video {
-    position: absolute;
-    width: 100vw;
-    border: none;
-    padding: 0;
+@media (min-width: 480px) {
+  .mint-video-bg {
+    width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
   }
 }
-@media (min-width: 1200px) {
-  .mint-video-bg iframe + * .mint-grid, .mint-video-bg video + * .mint-grid {
-    margin-bottom: -15%;
+@media (min-width: 768px) {
+  .mint-video-bg {
+    width: calc(100% + 32px);
   }
 }
-.mint-video-bg.mint-overflow {
-  overflow: hidden;
-  margin-bottom: 0;
+@media (min-width: 480px) {
+  .mint-video-bg {
+    padding: calc(4px + 12 * (100vw - 480px) / 288);
+  }
 }
-@media (min-width: 1200px) {
-  .mint-video-bg.mint-overflow > section {
-    margin-bottom: 0;
+@media (min-width: 768px) {
+  .mint-video-bg {
+    padding: 16px;
   }
 }
-.mint-video-bg.mint-overflow iframe, .mint-video-bg.mint-overflow video {
-  top: -10%;
-  left: -10%;
-  width: 120%;
-  height: 120%;
+.mint-video-bg iframe, .mint-video-bg video, .mint-video-bg .mint-image, .mint-video-bg .mint-embed {
+  position: absolute;
+  top: 0;
+  padding: 0;
+  width: 100%;
+  height: calc(100vh - var(--mint-header-height));
+  border: none;
+  object-fit: cover;
+  pointer-events: none;
 }
 
 @keyframes mint-stretch-in {
@@ -1440,8 +1470,6 @@ main > router-outlet {
   flex-grow: 1;
   width: 100%;
   padding: 0.25rem;
-}
-:root main > router-outlet + * {
   padding: 4px;
 }
 @media (min-width: 480px) {