/*==========================================================================
  Flyer (uitwaaier)
  ========================================================================== */

/**
  * Flyer block
  *
  * 1. Centers the CTA sentence and button vertically and horizontally
  * 2. Add illustrations on left side of subscribe block
  * 2. Add illustrations on right side of subscribe block
  */

.flyer-block-default
  position: relative

  &:before /* 2 */
    content: url('/img/structure/cta/illustration_01.png')
    +transform(scale(0.3))
    +transform-origin(top left)
    +respond-to-width($mdGridBreakpoint)
      +transform(scale(0.24))
    position: absolute
    left: 40px
    top: -60px
    +respond-to-width(1100)
      left: 20px
      top: -40px
    +respond-to-width(650)
      left: -35px
      top: -50px
    z-index: 10

  &:after /* 3 */
    content: url('/img/structure/cta/illustration_02.png')
    +transform(scale(0.3))
    +transform-origin(top right)
    +respond-to-width($mdGridBreakpoint)
      +transform(scale(0.24))
    position: absolute
    right: 60px
    top: -50px
    +respond-to-width($mdGridBreakpoint)
      right: 20px
    +respond-to-width(1100)
      right: 10px
      top: -30px
    +respond-to-width(650)
      right: -40px
      top: -30px
    z-index: 10

/**
  * Call to action block
  *
  * 1. Centers the cta sentence and button vertically and horizontally
  */

.flyer-content-wrapper
  +flex(center, center) /* 1 */
  +flex-direction(column)
  padding: 75px column(2)

  background:
    color: $blue
  color: white

  /**
    * CTA sentence
    *
    */
  .flyer-sentence
    text-align: center
    font-size: 1.5rem
    font-family: 'Coda Caption', sans-serif
    margin-bottom: 35px
    line-height: 2.5rem

    +respond-to-width($smGridBreakpoint)
      line-height: 2rem
      font-size: 1.8rem

  /**
    * CTA button
    *
    */
  .flyer-button
    @extend .button-default
    color: $white
    border-color: $white

    &:hover
      background:
        color: $white
      color: $blue


/**
  * Default call to action block on custom pages
  *
  */
.flyer-default

  /**
    * Default CTA sentence
    * Overrides and inherits the settings of elements above
    *
    */
  .flyer-sentence
    font-size: 2.5rem
    font-family: "olivierregular", serif
    color: $yellow

    +respond-to-width($smGridBreakpoint)
      line-height: 2rem
      font-size: 1.8rem