$size-la-une: 220px
$size-news: 100px
.post
  display: flex
  flex-wrap: nowrap
  margin-bottom: 2rem

  @media screen and (max-width: $size-sm)
    flex-direction: column
    justify-content: center
    align-items: center
  .picture
    width: $size-news
    height: $size-news
    background: $orange
    flex-shrink: 0
    @media screen and (max-width: $size-sm)
      margin-bottom: 1rem

    a
      width: 100%
      height: 100%
      display: block

  &.big

    .picture
      width: $size-la-une
      height: $size-la-une
      @media screen and (max-width: $size-sm)
        width: 100%
        overflow: hidden
        margin: 0
        img
          width: 100%
    .details
      padding: 20px
      background: $grey
      height: $size-la-une
      overflow: hidden
      text-overflow: ellipsis
      @media screen and (max-width: $size-sm)
        height: inherit
  .details
    padding: 0 1rem
    height: $size-news
    max-width: 100%
    overflow: hidden
    @media screen and (max-width: $size-sm)
      height: inherit
      text-align: center

    span
      font-size: .8rem
      display: block
    h2
      margin: .6rem 0
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
    h3
      margin: .3rem 0
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis

    .text
      font-size: .9rem
      overflow: hidden
      text-overflow: ellipsis
      width: 100%
      padding-top: 6px

      p
        margin: 0
        display: inline