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

$hero-follow-top: 4.5vh

.image__filter--blur
  @include image-filter--blur

.hero__overlay
  background-color: $env-primary

.bg--env-100
  background-color: $env-primary

.bg--env-50
  background-color: rgba($env-primary, .5)

.hero__strap--env
  color: $env-secondary

.hero__strap--start
  color: $env-primary

.hero__follow
  background-color: $env-primary
  bottom: $hero-follow-top
  bottom: calc(var(--vh, 1vh) * #{strip-unit($hero-follow-top)})

.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
    height: 10vh

.segment__keywords
  height: 50%

.image--guarantee
  @include image-filter-rotate
  height: 100vh

.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
  justify-content: space-around
  align-items: center
  & > *
    padding: 3rem 0
    width: 50%

.segment__right
  background-color: $image-blend