@nnc-digital/nnc-design-system 1.0.0-alpha22 → 1.0.0-alpha24

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.
@@ -25778,13 +25778,15 @@ const VideoContainer = styled.div`
25778
25778
  top: 0;
25779
25779
  left: 0;
25780
25780
  width: 100%;
25781
- height: 575px;
25782
- @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25783
- height: 540px;
25781
+ @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25782
+ height: 575px;
25784
25783
  }
25785
- @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25784
+ @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25786
25785
  height: 420px;
25787
25786
  }
25787
+ @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25788
+ height: 540px; /* Height for large and above screens */
25789
+ }
25788
25790
  `;
25789
25791
 
25790
25792
 
@@ -25796,17 +25798,20 @@ const VideoBackground = styled.video`
25796
25798
  height: 575px;
25797
25799
  object-fit: cover;
25798
25800
  z-index: -1;
25799
- @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25800
- height: 540px;
25801
+ @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25802
+ height: 575px;
25801
25803
  }
25802
- @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25804
+ @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25803
25805
  height: 420px;
25804
25806
  }
25807
+ @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25808
+ height: 540px; /* Height for large and above screens */
25809
+ }
25805
25810
  `;
25806
25811
 
25807
25812
  const PlayPauseButton = styled.button`
25808
25813
  position: absolute;
25809
- bottom: 20px;
25814
+ top: 20px;
25810
25815
  right: 20px;
25811
25816
  background: rgba(0, 0, 0, 0.5);
25812
25817
  border: 1px solid white;
@@ -25825,7 +25830,7 @@ const PlayPauseButton = styled.button`
25825
25830
  background: rgba(0, 0, 0, 0.7);
25826
25831
  }
25827
25832
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25828
- bottom: 20px;
25833
+ top: 20px;
25829
25834
  right: 20px;
25830
25835
  }
25831
25836
  `;