/*==========================================================================
  Content block
  ========================================================================== */

/**
  * Content block with image and description
  *
  * 1. Left and right padding are bigger due to description and image size.
  * 2. Give blue background to odd items to show seperation of the blocks.
  *
  */

.content-block
  background: $white
  padding: 25px column(1) 25px column(1) /* 1 */
  +respond-to-width($mdGridBreakpoint)
    padding: 20px

  &.blue-bg /* 2 */
    background: $lightBlue

  .content-image
    margin: 25px 0 25px 0
    img
      width: 100%

  .content-description
    margin: 25px 0 25px 0
    align-self: center
    padding: 0 50px 0 50px

    +respond-to-width($smGridBreakpoint)
      padding: 0

    h2
      font-size: 2.4rem
      +respond-to-width($mdGridBreakpoint)
        font-size: 2rem
      font-family: "olivierregular", serif
      color: #5398be

    p
      padding: 0
      margin: 0
      font-size: 1rem
      +respond-to-width($mdGridBreakpoint)
        font-size: 0.9rem