/**
 * Breakpoints
 */
/**
 * Typography
 */
/**
 * Grid
 */
/**
 * Colors
 */
/**
 * Spacing
 */
/**
* Font Sizes
*/
/**
 * Components
 */
/**
 * Animations
 */
/*
 * Media query to respond to a minimum size (mobile first)
 */
/*
 * Media query to respond to a maximum size
 */
/*
 * Output font size in px/rem
 */
/*
 * Placeholder mixin for <input>
 */
/**
 * Clearfix
 */
.section.section--hero {
  overflow: hidden;
  background: var(--background-colour);
}
.section.section--hero .container {
  padding-top: 0;
  padding-bottom: 0;
}
.section.section--hero .section--hero__wrapper .section--hero__content {
  padding-top: 45px;
  padding-bottom: 45px;
}
.section.section--hero .section--hero__image {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  width: 70%;
  height: 100%;
  transform: translate(0, -50%);
}
.section.section--hero.bg--image .section--hero__image {
  width: auto;
  max-width: 50%;
}
.section.section--hero.bg--image .section--hero__image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  max-height: 100%;
}
.section.section--hero.has-video .section--hero__content {
  background: var(--background-colour);
  position: relative;
  z-index: 2;
}
.section.section--hero.has-video .section--hero__content:after {
  content: "";
  background: var(--background-colour);
  width: 390px;
  height: 100%;
  display: block;
  position: absolute;
  left: 70%;
  top: 0;
  border-radius: 0 20rem 20rem 0;
  z-index: -1;
}
.section.section--hero.has-video .section--hero__image img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  float: right;
}
.section.section--hero.has-video .section--hero__image .play-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding-left: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.section.section--hero.has-video .section--hero__image .play-button:hover svg {
  transform: scale(1.05);
}
.section.section--hero.has-video .section--hero__image .play-button svg {
  width: 110px;
  transition: transform 250ms;
}
@media screen and (min-width: 1280px) {
  .section.section--hero .section--hero__content {
    padding-left: 24px;
  }
}
@media screen and (max-width: 1280px) {
  .section.section--hero .container {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 1024px) {
  .section.section--hero .section--hero__wrapper .section--hero__content {
    padding: 24px 0;
  }
  .section.section--hero.has-video .section--hero__content:after {
    left: 40%;
  }
  .section.section--hero.has-video .section--hero__image .play-button svg {
    width: 70px;
  }
}
@media screen and (max-width: 768px) {
  .section.section--hero:before, .section.section--hero:after {
    display: none;
  }
  .section.section--hero .section--hero__wrapper .section--hero__content {
    padding-top: 24px 0;
  }
  .section.section--hero .section--hero__image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: unset;
  }
  .section.section--hero .section--hero__image .play-button {
    position: relative;
    padding-left: 0 !important;
  }
  .section.section--hero .section--hero__video--mob {
    padding-top: 24px;
  }
  .section.section--hero .section--hero__img {
    margin-top: 24px;
  }
}