/* ==========================================================================
   Team portraits
   ========================================================================== */

.grid-layout.about-our-team
  display: grid
  grid-template-columns: 1fr 1fr 1fr 1fr
  max-width: $gridMaxWidth
  margin: 0 auto

  .text
    grid-area: 1 / 1 / auto / span 2

  .text-block
    padding: column(1,6)
    padding-top: columnVw(.5)

  // Switch to 3-column layout
  +respond-to-width($mdGridBreakpoint)
    grid-template-columns: 1fr 1fr 1fr
    .text-block
      padding: column(.5,8)

  // Full screen text
  +respond-to-width($smGridBreakpoint)
    .text
      grid-area: 1 / 1 / auto / span 3
    .text-block
      padding: column(1,12)

  // Switch to 2-column layout
  +respond-to-width(640)
    grid-template-columns: 1fr 1fr
    .text
      grid-area: 1 / 1 / auto / span 2

  +respond-to-width($xsGridBreakpoint)
    .text-block
      padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace

    @supports not (display: grid)
      +clearfix

  // Ie fix
  html.ie &
    +clearfix

/**
 * A team member portrait
 *
 * 1. Base the margin on the view width
 *    so you get equal spacing vertically and horizontally
 */
.team-portrait
  position: relative
  overflow: hidden

  /**
   * Photo
   */
  .portrait
    position: relative
    overflow: hidden
    padding-bottom: 138.889%

    img
      position: absolute
      top: 0
      left: 0
      max-width: 100%
      +transform(translateY(100%))
      opacity: 0

  /**
   * Name and function
   */
  .caption
    position: relative
    z-index: 10
    display: flex
    flex-direction: column
    justify-content: center
    height: 120px
    padding-left: column(.5,3)
    margin-bottom: column(1,3)

    background: $black
    color: #fff
    line-height: 1.22222

    .name, .function
      display: block
      font-size: .9rem

    .name
      font-weight: semibold()

    .function
      color: #6C6C80

  // Ie fix
  html.ie &
    width: 33%
    float: left

    .portrait
      padding-bottom: 130%

  +respond-to-width($xsGridBreakpoint)

    .caption
      margin-bottom: 0
      height: 80px

    // Fallback when grid not supported
    @supports not (display: grid)

      width: 50%
      float: left

      .portrait
        padding-bottom: 130%

      &.job-offer
        width: 100%