.ds2Hero {
  --ds2HeroSpacing: 32px;
  --ds2HeroMinHeight: 500px;
  --ds2ContentMaxWidth: 1400px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  width: 100%;
  color: white;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: var(--ds2HeroMinHeight);

  .ds2HeroSingle {
    display: flex;
    width: 100%;
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .ds2HeroContent {
    width: calc(100% - 2 * var(--ds2HeroSpacing));
    max-width: calc(var(--ds2ContentMaxWidth) - 2 * var(--ds2HeroSpacing));
    margin: 0 var(--ds2HeroSpacing);
    margin: 0;
    position: absolute;
    place-self: center; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;

    .ds2ContentBlockUolLogo svg {
      fill: white;
    }
  }

  .ds2HeroNavContainer {
    position: absolute;
    bottom: var(--ds2HeroSpacing);
    right: var(--ds2HeroSpacing);

    .ds2HeroNavButton {
      font-size: 20px;
      width: 40px;
      height: 40px;
      margin-left: 10px;
      background: #ffffff99;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}

// variant with image to left and content to left
.ds2HeroImageContent {
  --ds2ImageContentImagePercent: 33%;
  
  .ds2HeroSingle {
    width: var(--ds2ImageContentImagePercent);
    height: 100%;
    position: absolute;
    left: 0;
  }

  .ds2HeroContent {
    position: relative;
    width: calc(100% - var(--ds2ImageContentImagePercent) - 2 * var(--ds2HeroSpacing));
    padding: var(--ds2HeroSpacing);
    padding-left: calc(var(--ds2ImageContentImagePercent) + var(--ds2HeroSpacing));
    
  }

  .ds2HeroNavContainer {
    left: calc(var(--ds2ImageContentImagePercent) - 100px - var(--ds2HeroSpacing));
  }
}

// standard colour theme (no theme specified)
.ds2HeroThemeStandard {
  background: $brand-black;
  color: white;
  svg {
      fill: white !important;
  }
  .brandButton {
      background: $brand-white !important;
      color: $brand-black !important;
  }
  .brandButton:first-of-type {
      background: $brand-teal !important;
      color: $brand-black !important;
  }
}

// Colours
.ds2HeroThemeColourLilac {
  background: $brand-lilac;
  color: $brand-black;
  svg {
    fill: $brand-black !important;
  }
  .brandButton {
    background: $brand-lilac !important;
    color: $brand-black !important;
    border: 1px solid $brand-black !important;
  }
  .brandButton:first-of-type {
    background: $brand-white !important;
    color: $brand-black !important;
  }
}

.ds2HeroThemeColourTeal {
  background: $brand-teal;
  color: $brand-black;
  svg {
      fill: $brand-black !important;
  }
  .brandButton {
      background: $brand-teal;
      color: $brand-black;
      border: 1px solid $brand-black;
  }
  .brandButton:first-of-type {
      background: $brand-white;
      color: $brand-black;
  }
}

.ds2HeroThemeColourBlue {
  background: $brand-vivid-blue;
  color: $brand-white;
  svg {
      fill: $brand-white !important;
  }
  .brandButton {
      background: $brand-vivid-blue !important;
      color: $brand-white !important;
      border: 1px solid $brand-white !important;
  }
  .brandButton:first-of-type {
      background: $brand-white !important;
      color: $brand-black !important;
  }
}

.ds2HeroThemeColourVividGreen {
  background: $brand-vivid-green;
  color: $brand-black;
  svg {
      fill: $brand-black !important;
  }
  .brandButton {
      background: $brand-stone !important;
      color: $brand-black !important;
  }
  .brandButton:first-of-type {
      background: $brand-black !important;
      color: $brand-white !important;
  }
}


// add any styles specific to theme eg.
.ds2HeroTheme1 {
  h2 {font-size: 40px;}
}