.sectionLayer{
  width: calc(var(--singleUserWindowWidth) - (var(--singleUserWindowBorderSize) * 2));
  height: calc(var(--singleUserWindowHeight) - (var(--singleUserWindowBorderSize) * 2));
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  background-image: linear-gradient(to bottom, var(--bmwi_blue_100) , var(--bmwi_white_100));
  overflow: hidden;
}

.sectionScrollMask{
  width: var(--sectionScrollMaskWidth);
  height: var(--sectionScrollMaskHeight);
  position: absolute;
  top: calc(var(--sectionMarginTop) - var(--scrollMaskOffset));
  left: var(--sectionMarginLeft);
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  overscroll-behavior: none;
}

.sectionScrollItem{
  width: 100%;
  position: relative;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.sectionScrollTopItem{
  top: var(--scrollMaskOffset);
  height: calc((var(--mainHeaderLineHeight) * 2) + var(--turntableContainerHeight) + var(--spacerUnit));
}

.sectionTitleContainer{
  width: auto;
  /* height: calc( var(--mainHeaderLineHeight) * 2); */
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  display: block;
  box-sizing: border-box;
}

.sectionIntroContainer{
  width: 42%;
  height: calc(var(--mainHeaderLineHeight) * 1.82);
  padding: 0px;
  margin-top: calc(var(--mainHeaderLineHeight) / 3);
  display: block;
  box-sizing: border-box;
}

.sectionTitle{}

h1.sectionHeadline{
  font-size: var(--mainHeaderSize);
  font-weight: bold;
  line-height: var(--mainHeaderLineHeight);
  padding: 0px;
  margin: 0px;
  color: var(--bmwi_white_100);
}

h2.sectionSubHeadline{
  font-size: var(--teaserFontSize);
  font-weight: normal;
  line-height: var(--teaserLineHeight);
  padding: 0px;
  margin: 0px;
  color: var(--bmwi_white_100);
}