/**
 * About page / Person information
 *
 * 1. Add some whitespace below
 * 2. Remove the whitespace for mobile
 * 3. Last person block doesn't need margin anymore
 * 4. Center this block horizontal and vertical
 * 5. Puts the text beneath image on mobile
 */

.person-block-container
  +flex(center, center)
  +flex-direction(column)

  margin-bottom: 100px /* 1 */
  +respond-to(mobile)
    margin-bottom: 0 /* 2 */

  .person-block
    width: 100%
    margin-bottom: 25px

    &:last-of-type /* 3 */
      margin-bottom: 0

    +flex(center, center) /* 4 */

    +respond-to(mobile)
      +flex-direction(column) /* 5 */


  /**
    * Person image
    *
    * 1. Give picture a height based on the viewport width
    * 2. Give better ratio to the image on smaller screens
    * 3. Give image container a max-height
    */

  .person-image-container
    width: 100%
    max-width: 650px

    .person-image
      width: 100%
      max-width: 240px
      margin-left: auto

      +respond-to(mobile)
        margin-right: auto

      img
        width: 100%

  /**
    * Person information
    *
    * 1. Add some padding for extra whitespace
    * 2. Turn the opacity down for italic written items in this paragraph
    */

  .person-information
    width: 100%
    max-width: 650px
    height: auto
    background: none
    color: $white
    padding: 40px /* 1 */

    +respond-to(mobile)
      padding: 50px 0

    h2
      color: $yellow
      +font-semi-bold(1.4em, 26px)
      margin-bottom: 20px

    p
      color: $white
      +font-default(18px, 26px)
      margin: 0

      em
        opacity: 0.7 /* 2 */