// ACTUALITES
$space: 1rem
.actualites
  margin: 0 -$space
  padding: 0

  > .cell
    height: 300px
    padding: $space
    position: relative

    &.empty
      width: 100%

    a
      display: flex
      width: 100%
      height: 100%
      text-decoration-color: rgba($color-primary, 0)
      box-sizing: border-box
      padding: $space

      &:hover
        background: rgba($color-primary, 0.5)

      &::after
        content: inherit

    .info
      padding: 2rem
      background: rgba($color-primary, 0.25)
      border: $space solid rgba(255,255,255,.25)
      box-sizing: border-box
      width: 100%
      height: 100%
      align-content: center
      text-align: center

      h3
        color: white
        font-size: 2rem
        text-align: center
        margin: 0
        padding: 0
        flex: 0

      time
        color: white
        font-size: 1rem
        flex: 0


    .image
      position: absolute
      top: $space
      bottom: $space
      left: $space
      right: $space
      z-index: -2
      overflow: hidden

      img
        height: 100%
        object-fit: cover

figure.center
  text-align: center
  img
    margin: 0 auto
    max-width: 100%

$imageBorder: 2px
.actu-image
  text-align: center
  padding: 1rem 0 0
  max-width: 100%

@media screen and (min-width: 840px)
  .actu-image
    padding: 2rem 0

@media screen and (max-width: 839px)
  $space: .5rem
  .actualites
    margin: 0 -$space

    > .cell
      padding: $space
      a
        padding: $space

      .info
        padding: $space * 2
        border: $space solid rgba(255,255,255,.25)
      .image
        top: $space
        bottom: $space
        left: $space
        right: $space

@media screen and (max-width: 599px)
    .actualites

      > .cell
          max-width: 460px