.home-intro

  .breadcrumb-block
    +flex(flex-start, flex-end)
    height: 240px
    padding-bottom: 30px
    grid-area: breadcrumb

    .breadcrumb-placeholder
      width: column(6.5, 12)
      margin-left: column(1, 12)

  .content-block
    position: relative
    z-index: 2
    background-color: $blue
    grid-area: content

    // ---------------------------- Site specific styling
    .lacom-machinefabriek &
      background-color: $flatRed

    .rols-machineonderdelen &
      background-color: $rollsYellow

    .vdb-machinefabriek &
      background-color: $vdbGreen

    .jansen-machining-technology &
      background-color: $jansenBlue

    .kms-content
      width: column(10, 12)
      padding: calc(100vw / 12) 0 calc(100vw / 12) 0
      margin-left: column(1, 12)

      +respond-to-width-beyond(1440)
        padding: 120px 0 120px 0


      h1
        margin: 0 0 calc(100vw / 12)
        font-size: 4rem
        line-height: 1.1
        color: white

        +respond-to-width(1050)
          font-size: 3rem

        +respond-to-width(750)
          font-size: 2.5rem

        +respond-to-width(600)
          font-size: 2rem

        +respond-to-width(425)
          font-size: 1.75rem

        +respond-to-width-beyond(1440)
          margin-bottom: 120px

      p
        color: white
        font-size: 1rem

      .read-more
        position: relative
        +flex(flex-start, flex-end)
        height: calc(100vw / 12)
        font-size: 0.8rem
        line-height: 1.2
        text-decoration: none
        color: white

        +respond-to-width-beyond(1440)
          height: 120px

        .arrow
          position: absolute
          left: 0
          bottom: -28px
          display: block
          transform: translate3d(0, 0, 0)
          transition: transform 0.3s

          &:after
            content: ''
            display: inline-block
            +sprite(470px 29px, 19px, 13px)
            transform: rotate(90deg)

        &:hover
          .arrow
            transform: translate3d(0, 5px, 0)


  .video-block
    background-color: $darkBrown
    grid-area: video
    transition: background-color 0.6s, width 0.6s

    .grid-row
      position: relative
      width: 100%
      max-width: none

      .video-placeholder
        position: relative
        width: 100%
        height: 0
        padding-bottom: calc(100% / 16 * 9)

        .image-placeholder, .play-button
          transition: opacity 0.6s

        +respond-to-width-beyond(1200)
          padding-bottom: 0
          height: 675px

        +respond-to-width(600)
          padding-bottom: 0
          height: 338px
          +flex(center, center)

        .video-overlay
          position: relative
          width: 100%
          max-width: 1200px
          margin: auto
          opacity: 0
          transition: max-width 0.6s, opacity 0.6s

          .video-holder
            position: relative
            width: 100%
            height: 0
            padding-bottom: calc(100% / 16 * 9)


          iframe
            position: absolute
            width: 100%
            height: 100%
            left: 0
            top: 0


        .image-placeholder
          position: absolute
          z-index: 3
          opacity: 0.3
          top: 0
          left: 0
          width: 100%
          height: 100%
          background:
            size: cover
            repeat: no-repeat
            position: center

        .play-button
          position: absolute
          z-index: 3
          width: 100%
          height: 100%
          +flex(center, center)
          cursor: pointer

          .button-placeholder
            position: relative
            width: 90%
            max-width: 200px

            .icon-wrapper
              display: block
              transform: scale3d(1,1,1)
              transform-origin: 60% 50%
              transition: transform 0.4s

            svg#triangle
              width: 100%
              max-width: 200px

              .st0.background
                transition: opacity 0.4s
                &:hover
                  opacity: 0.3

            span
              position: absolute
              top: 0
              left: 0
              +flex(center, center)
              width: 100%
              height: 100%
              padding-right: 20px

              font-size: 0.65rem
              line-height: 1
              color: white
              font-weight: bold()
              text-transform: uppercase
              letter-spacing: 2.6px

          &:hover
            .button-placeholder
              .icon-wrapper
                transform: scale3d(0.9, 0.9, 1)


  .video-format-placeholder
    position: relative
    display: none
    max-height: 1080px

    .width-placeholder
      position: relative
      display: block
      width: 100%
      height: 0
      padding-bottom: calc(100% / 16 * 9)

  @supports (display: grid)
    +respond-to-width-beyond(1200)
      display: grid
      min-height: 100vh
      grid-template-columns: 17fr 11fr
      grid-template-rows: 1fr 3fr
      grid-template-areas: "breadcrumb video" "content video" "content video" "content video"
      transition: min-height 0.6s

      +respond-to-width-beyond(1680)
        grid-template-columns: calc(1020px + ((100% - 1680px) / 2)) auto

      .breadcrumb-block
        width: 100%
        height: auto
        max-width: none

        .breadcrumb-placeholder
          width: 100%
          margin-left: auto
          max-width: calc(1440px / 12 * 7.5)
          #breadcrumb
            padding-left: column(1, 7.5)

          +respond-to-width(1680)
            max-width: none
            padding-left: calc(100% / 8.5 * 2)

            #breadcrumb
              padding-left: 0


      .content-block
        width: 100%
        max-width: none
        .grid-row
          width: 100%
          margin-right: 0
          max-width: calc(1440px / 12 * 7.5)
          padding-right: calc(100% / 8.5)

          .kms-content
            margin-left: 0
            width: 100%
            padding-left: column(1, 6.5)

          +respond-to-width(1680)
            max-width: none
            padding-left: calc(100% / 8.5 * 2)

            .kms-content
              padding-left: 0


      .video-block
        position: relative
        .grid-row
          position: absolute
          top: 0
          left: 0
          height: 100%
          width: 100%
          max-width: none

          .video-placeholder
            height: 100%
            padding-bottom: 0

  // Video format animation
  &.video-formation
    &:after
      content: ''
      position: relative
      width: 100%

    .video-block
      background-color: darken($darkerBrown, 10%)
      .grid-row
        .video-overlay
          opacity: 1
          z-index: 3
        .image-placeholder, .play-button
          opacity: 0

    @supports (display: grid)
      +respond-to-width-beyond(1200)
        .video-block
          position: absolute
          z-index: 3
          //opacity: 0.4
          right: 0
          top: 0
          height: 100%
          max-height: 100vh
          width: calc(100% / 28 * 11)
          will-change: width

          +respond-to-width-beyond(1680)
            width: calc(100% - (1020px + ((100% - 1680px) / 2)))

          .grid-row
            .video-overlay
              opacity: 0
              max-width: 1920px

          &.video-formation-size
            width: 100%
            .grid-row
              .video-overlay.show-video
                opacity: 1

        &.keep-display-settings
          display: block

        &.video-formation-max-height-size
          min-height: 665px
          display: block

          +respond-to-width-beyond(1920)
            min-height: 1080px

          .video-format-placeholder
            display: block
            background-color: darken($darkerBrown, 10%)

          .breadcrumb-block
            max-height: 0
            padding-bottom: 0

          .content-block
            max-height: 0


  +respond-to-width(700)
    .breadcrumb-block
      .breadcrumb-placeholder
        display: none

    .content-block
      .grid-row
        width: 100%

        .kms-content
          width: calc(100% - 40px)
          padding: 60px 0 80px
          margin-left: auto
          margin-right: auto

          .read-more
            font-size: 0.9rem