$gutter: 20px
$gutterXS: 10px

.card
  margin: $gutter 0
  padding: $gutter
  background-color: white
  box-shadow: 0 1px 3px rgba(0,0,0,.1)
  border-bottom: 1px solid #ebebeb
  width: 100%

  .card-image
    overflow: hidden
    display: flex
    justify-content: center
    padding: $gutter

    img
      padding: 0
      margin: 0
      max-width: 100%
      max-height: 100%

  .card-body
    align-self: center
    background-color: white
    padding: $gutter
    width: 100%

    h3
      padding: 0
      margin: 0
      color: #0c9cfd

    time
      color: #4d5253
      font-size: .8rem

    *:last-child
      margin-bottom: 0
      padding-bottom: 0

    .button
      display: inline-block
      background-color: #0c9cfd
      color: white
      text-decoration: none
      padding: .7rem 1rem
      margin: 1rem 0
      border-radius: .2rem

@media screen and (max-width: 600px)
  .card
    margin: $gutterXS 0
    padding: $gutterXS

    .card-image
      padding: $gutterXS

    .card-body
      padding: $gutterXS