/*!*************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/moresoda.scss ***!
  \*************************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  /* ROLEX VARIABLES */
  --green: #127749;
}

:root {
  /* ROLEX VARIABLES */
  /* Rolex guidelines don't specify the maximum and minimum breakpoints for the Typography but looking at thieir own website these are 640px and 1920px */
  --headline70: clamp(2.25rem, 1.1875rem + 2.6563vi, 4.375rem);
  /* 36px → 70px */
  --headline30: clamp(1.375rem, 1.125rem + 0.625vi, 1.875rem);
  /* 22px → 30px */
}

.Slideshow__Content .SectionHeader .rolex-slider__subheading,
.SlideContentMobile .SectionHeader .rolex-slider__subheading {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: var(--headline30) !important;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 0;
}

.Slideshow__Content .SectionHeader .rolex-slider__title,
.SlideContentMobile .SectionHeader .rolex-slider__title {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: var(--headline70) !important;
  font-weight: bold;
  line-height: 1.1;
}

.rolex-cta-primary {
  align-items: center;
  background-color: var(--green);
  border: 0;
  border-radius: 100px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  font-weight: bold;
  height: 44px;
  justify-content: center;
  padding: 0 30px;
  text-decoration: none;
}

.Slideshow__Content--rolex.Slideshow__Content--middleLeft {
  transform: translate(0, -50%);
}