/*  Last full read through 27/12/2020
 *
 *##############################################
 *# pwp landing sass         /_sass/env/pwp.sass
 *##############################################
 *
 */

.hero
  height: 90vh
  height: calc(var(--vh, 1vh) * 90)

.hero__overlay
  background-color: $env-primary

.hero__strap
  color: $env-secondary

.hero__strap--start
  color: $env-primary

.hero__follow
  background-color: $env-primary
  bottom: 4.5vh

.segment__wrap
  display: flex
  flex-direction: column-reverse
  width: 100vw

.segment__gaurentee
  @include logo-color($white)
  align-items: center
  background-color: $env-primary
  color: $white
  display: flex
  flex-direction: column
  justify-content: center
  padding: 4rem 0
  width: 100%

  .site__logo
    margin: 0 5vw
    text-align: center
    width: 100px

.segment__keywords
  height: 50%

.image--guarantee
  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)

.strap__guarantee
  border-top: solid 1px $soft-white
  margin: 3rem 0
  width: 80%

.strap--env-primary
  background-color: $env-primary
  color: $white

.segment__keywords
  display: flex
  flex-direction: row
  flex-wrap: wrap
  & > *
    padding: 3rem 0
    width: 50%