/* ==========================================================================
   Specific CSS for the about page
   ========================================================================== */

.about

  // Remove nowrap
  #team-grid-md
    white-space: normal

  #services-list
    +respond-to-width($smGridBreakpoint)
      margin-left: 0

  .team-portrait.job-offer
    display: block
    text-decoration: none

    .portrait,
    .caption
      background: #cad2db

    .content
      +position(absolute, 0 null null 0)
      padding: 60px
      font-size: .9rem
      color: #fff
      line-height: 1.4

    .title
      display: block
      margin: 0 0 60px

      color: #fff
      font-size: 3rem
      font-weight: black()
      line-height: 0.875
      text-transform: uppercase

    .caption
      padding-left: 60px
      padding-right: 60px
    .button
      max-width: none
      min-width: 0

    &:hover
      .button
        border-color: $blue
        color: #fff
        background: $blue


  +respond-to-width($smGridBreakpoint)
    // Responsive header intro
    header.main .intro
      width: column(10)

    .why-us
      .text-block
        padding: column(1)

    .team-portrait.job-offer
      grid-area: auto / auto / auto / span 2
      .title
        margin-bottom: 10px
      .portrait
        padding-bottom: 69.4445% // original divide by 2

  +respond-to-width($smGridBreakpoint)
    // Remove margin below call to action block
    .call-to-action-block
      margin-bottom: 0

    // Responsive image grid
    .image-grid
      &.with-gaps
        grid-gap: 0

  +respond-to-width($xsGridBreakpoint)
    header.main
      margin-bottom: 0
      .intro
        width: 100%
        padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace

    .team-portrait.job-offer
      .content
        padding: 20px
      .caption
        padding: 0 20px
        height: 100px
        justify-content: flex-start