@nnc-digital/nnc-design-system 1.0.0-alpha23 → 1.0.0-alpha25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.js CHANGED
@@ -25791,12 +25791,14 @@ const VideoContainer = styled__default.default.div`
25791
25791
  top: 0;
25792
25792
  left: 0;
25793
25793
  width: 100%;
25794
- height: 575px;
25795
- @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25796
- height: 540px;
25794
+ @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25795
+ height: 575px;
25797
25796
  }
25798
- @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25799
- height: 468px;
25797
+ @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25798
+ height: 420px;
25799
+ }
25800
+ @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25801
+ height: 540px; /* Height for large and above screens */
25800
25802
  }
25801
25803
  `;
25802
25804
 
@@ -25809,11 +25811,14 @@ const VideoBackground = styled__default.default.video`
25809
25811
  height: 575px;
25810
25812
  object-fit: cover;
25811
25813
  z-index: -1;
25812
- @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25813
- height: 540px;
25814
+ @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25815
+ height: 575px;
25814
25816
  }
25815
- @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25816
- height: 468px;
25817
+ @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25818
+ height: 420px;
25819
+ }
25820
+ @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25821
+ height: 540px; /* Height for large and above screens */
25817
25822
  }
25818
25823
  `;
25819
25824
 
@@ -25833,10 +25838,12 @@ const PlayPauseButton = styled__default.default.button`
25833
25838
  align-items: center;
25834
25839
  justify-content: center;
25835
25840
  z-index: 10;
25836
-
25837
25841
  &:hover {
25838
25842
  background: rgba(0, 0, 0, 0.7);
25839
25843
  }
25844
+ @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25845
+ bottom: 140px;
25846
+ }
25840
25847
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25841
25848
  bottom: 20px;
25842
25849
  right: 20px;