.show-model-detail
  position: relative
  overflow: hidden
  background-color: $neutral

  & > .grid-row
    position: relative

    &::after
      $x: column(4.5, 14)
      position: absolute
      top: 0
      bottom: 0
      left: 0
      right: 0
      content: ''
      display: block
      width: 100%
      height: 100%
      background: linear-gradient(to right, transparent 0%, transparent #{$x}, #fff #{$x}, #fff 100%)

      +respond-to-width(900)
        background: #fff

  .return-to-overview
    color: $light
    background-color:$darkblue
    padding: 20px column(1, 14)
    text-decoration: none
    display: none
    width: 100%

    .arrow
      position: relative
      top: 1px
      left: 4px
      display: block
      width: 12px
      margin-right: 25px
      transform: translate3d(0,0,0)
      transition: transform 0.3s

      svg
        max-height: 15px

      .arrow-icon
        width: 100%
        transform: rotate(90deg)
        transform-origin: center

    p
      font-size: 0.8rem
      color: white
      margin: 0
      font-weight: semibold()

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

  .show-sub-menu
    position: relative
    z-index: 3
    display: inline-block
    width: column(4, 12)
    padding: 110px 50px 80px 0
    vertical-align: top

  .dynamic-content
    position: relative
    z-index: 2
    display: inline-block
    width: column(8, 12)
    padding: 80px 0
    vertical-align: top

    .kms-content
      .button
        margin-top: 40px

        &.right
          .arrow
            margin-left: 30px

    .dynamic-block
      &.full-text-block
        .content
          margin-left: 0
          text-align: left


  +respond-to-width(900)
    .grid-row
      width: 100%

      +flex(flex-start, flex-start)
      +flex-rows

    .return-to-overview
      +order(1)
      +flex(flex-start, center)

    .dynamic-content
      +order(2)
      width: 100%
      padding: 40px column(1, 14)

    .show-sub-menu
      +order(3)
      background-color: rgba($borderColor, 0.4)
      width: 100%
      padding: 80px column(1, 14)

  &.overview-page
    +respond-to-width-beyond(900)
      background: $blue

    .background-image
      content: ''
      position: absolute
      top: 0
      right: 0
      width: 50%
      height: 100%
      background-repeat: no-repeat
      background-position: right center
      background-size: cover

    .dynamic-content
      width: column(7, 12)

    +respond-to-width(900)
      .show-sub-menu
        display: none
      .dynamic-content
        width: 100%
      .background-image
        display: none

  +respond-to-width(750)
    padding-top: 60px