.flex
  display: flex
  flex-wrap: wrap
  margin: 0
  padding: 0

  div
    width: 50%
    flex-grow: 1

    a
      img
        cursor: zoom-in

    img
      margin: 0
      min-height: 100%
      min-width: 100%
      max-height: 50vh
      object-fit: cover
      vertical-align: bottom

article img 
  display: block
  margin-left: auto
  margin-right: auto
  border: 1px solid #ccc !important
  border-radius: 4px
  margin-top: 1.5em
  margin-bottom: 1.5em

img 
    max-width: 100%

@mixin img-float
  border: none !important
  margin-top: 0
  max-width: 40%
  @media (min-width: 768px)
    max-width: 50% !important
  @media (min-width: 960px)
    height: 65% !important
  @media (min-width: 1600px) 
    height: 100% !important    

figure 
  margin-bottom: 1.5em !important
  margin-left: 0
  margin-right: 0
  a
    img
      cursor: zoom-in
  img
    margin-bottom: 0 !important
  img[src*='#left']
    @include img-float
    float: left
  img[src*='#right']
    @include img-float
    float: right 

  figcaption
    margin-top: 0.8rem !important
    font-size: 1.2rem 
    text-align: center
    font-style: italic
    font-weight: normal
    color: #777676

    /** Hugo's figure shortcode seems to render h4s sometimes **/
    h4
      font-size: 1.2rem
      font-weight: normal


.big-img
  .container
    height: 100px !important
    @media (min-width: 768px)
      height: 150px !important
    @media (min-width: 960px)
      height: 200px !important
    @media (min-width: 1600px) 
      height: 250px !important

  background: no-repeat center center
  -webkit-background-size: cover
  -moz-background-size: cover
  background-size: cover
  -o-background-size: cover

  border-top: 2px solid lightgray
  border-bottom: 1px solid $accent