DS2 Hero banner

.ds2Hero {
  --ds2HeroSpacing: 48px;
  --ds2HeroMinHeight: 500px;
  --ds2ContentMaxWidth: 1500px;

  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
.ds2BannerImageThenContent {
  --ds2ImageContentImageMaxSize: 465px;
  
  .ds2HeroSingle {
    width: var(--ds2ImageContentImageMaxSize);
    height: 100%;
    position: absolute;
    left: 0;
  }

  .ds2HeroContent {
    position: relative;
    width: calc(100% - var(--ds2ImageContentImageMaxSize) - 2 * var(--ds2HeroSpacing));

    * {
      max-width: calc(1440px / 2 - 2 * var(--ds2HeroSpacing));
    }

    padding: var(--ds2HeroSpacing);
    padding-left: calc(var(--ds2ImageContentImageMaxSize) + var(--ds2HeroSpacing));
    
  }

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

// variant with image to right and content to left
.ds2BannerContentThenImage {
  --ds2ImageContentImageMaxSize: 50%;
  
  .ds2HeroSingle {
    width: var(--ds2ImageContentImageMaxSize);
    height: 100%;
    position: absolute;
    right: 0;
  }

  .ds2HeroContent {
    // background: grey;
    position: absolute;
    width: calc(var(--ds2ImageContentImageMaxSize) - 2 * var(--ds2HeroSpacing));
    max-width: calc(1440px / 2 - 2 * var(--ds2HeroSpacing));
    // padding: var(--ds2HeroSpacing);
    right: calc(50% + var(--ds2HeroSpacing));
    
  }

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

// Colours
.ds2BannerOverlay {
  .ds2BrandButton {
    background: $brand-white;
    color: $brand-black;
    border: 1px solid $brand-white;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $brand-dark-blue;
    background: $brand-dark-blue;
    color: $brand-white;
  }
}

.ds2BannerColourLilac {
  background: $brand-lilac;
  color: $brand-black;
  svg {
    fill: $brand-black;
  }
  .ds2BrandButton {
    background: $brand-lilac;
    color: $brand-black;
    border: 1px solid $brand-black;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $brand-dark-blue;
    background: $brand-dark-blue;
    color: $brand-white;
  }
}

.ds2BannerColourTeal {
  background: $brand-teal;
  color: $brand-black;
  svg {
    fill: $brand-black;
  }
  .ds2BrandButton {
    background: $brand-teal;
    color: $brand-black;
    border: 1px solid $brand-black;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $brand-dark-blue;
    background: $brand-dark-blue;
    color: $brand-white;
  }
}

.ds2BannerColourBlue {
  background: $brand-vivid-blue;
  color: $brand-white;
  svg {
    fill: $brand-white;
  }
  .ds2BrandButton {
    background: $brand-vivid-blue;
    color: $brand-white;
    border: 1px solid $brand-white;
  }
  .ds2BrandButton:first-of-type {
    background: $brand-white;
    color: $brand-black;
    border: 1px solid $brand-white;
  }
}

.ds2BannerColourDarkBlue {
  background: $brand-dark-blue;
  color: $brand-white;
  svg {
    fill: $brand-white;
  }
  .ds2BrandButton {
    background: $brand-dark-blue;
    color: $brand-white;
    border: 1px solid $brand-white;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $brand-white;
    background: $brand-white;
    color: $brand-black;
  }
}

.ds2BannerColourWhite {
  background: $brand-white;
  color: $brand-black;
  svg {
    fill: $brand-white;
  }
  .ds2BrandButton {
    background: $brand-white;
    color: $brand-black;
    border: 1px solid $brand-black;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $brand-dark-blue;
    background: $brand-dark-blue;
    color: $brand-white;
  }
}

.ds2BannerColourVividGreen {
  background: $brand-vivid-green;
  color: $brand-black;
  svg {
    fill: $brand-black;
  }
  .ds2BrandButton {
    background: $brand-vivid-green;
    color: $brand-black;
    border: 1px solid $brand-black;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $brand-black;
    background: $brand-black;
    color: $brand-white;
  }
}

.ds2MainContent {
  .ds2BannerImageThenContent, .ds2BannerContentThenImage {
    --ds2ImageContentImageMaxSize: 50%;
  }
}