// $primary-color: #4CB58E
// $light-color: #34495E
// $dark-color: #fff
// $bg-color: #303742
// $base-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace

//@import "node_modules/spectre.css/src/spectre"
//@import "node_modules/spectre.css/src/spectre-exp"
//@import "node_modules/spectre.css/src/spectre-icons"
//@import "node_modules/spectre.css/src/_variables"
@import "./grid"

// Responsive breakpoints
$size-xs: 480px
$size-sm: 600px
$size-md: 840px
$size-lg: 960px
$size-xl: 1280px
$size-2x: 1440px

body
  margin: 0

a
  color: black
  text-decoration-color: #e72520

  &:hover
    color: #e72520

@mixin container
  max-width: $size-lg
  margin: 0 auto
  padding: 0 20px

.container
  @include container

.header
  position: fixed
  z-index: 3
  left: 0
  right: 0
  height: 90px
  overflow: hidden
  background-color: white

  .container
    display: flex
    height: 100%

  .accueil
    padding: 15px
    margin: 5px 5px 5px -15px

  .logo
    height: 50px

  .menu
    margin: auto
    margin-right: -20px

    a
      text-decoration-thickness: 3px
      text-underline-offset: 10px
      padding: 15px
      margin: 5px

    ul
      list-style: none
      margin: 0
      padding: 0

    li
      display: inline


.ancre
  position: absolute
  top: -126px

@media (max-width: $size-md)
  .header
    height: 70px
    .container
      justify-content: space-between
      align-items: center
    .logo
      height: 30px

  .ancre
    top: -86px

@media (max-width: $size-sm)
  .header
    .menu
      text-align: right
      margin: 0
      a
        padding: 0
        margin: 0
        text-decoration-thickness: 1px
        text-underline-offset: 1px
      li
        display: block

.bg
  position: relative
  padding: 20px 0

  &.colored
    background-color: #f2f2f2

  @media (max-width: $size-md)
    padding: 10px 0

#content
  padding-top: 90px


$gutter: 10px
$padding-card: 20px
$padding-card-body: 20px

.news
  display: flex
  flex-wrap: wrap
  align-items: center

.card
  margin: 20px 0
  height: 300px
  overflow: hidden
  display: flex

  &:nth-child(even)
    .card-image
      order: 2
    .card-body
      order: 1
      margin-left: 0
      margin-right: -40px



  .card-image
    width: 45%
    overflow: hidden
    display: flex
    justify-content: center

    img
      padding: 0
      margin: 0
      align-self: center
      min-height: 300px

  .card-body
    z-index: 2
    width: 55%
    box-shadow: 0 1px 3px rgba(0,0,0,.1)
    border-bottom: 1px solid #ebebeb
    margin-left: -40px
    align-self: center
    background-color: white
    padding: $padding-card-body

    h3
      padding: 0
      margin: 0

    time
      color: #bcc3ce

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

@media (max-width: $size-md)
  .card
    .card-image
      width: 40%
    .card-body
      width: 60%

@media (max-width: $size-sm)
  .card
    height: inherit
    .card-image
      width: 30%
      max-height: 200px
      align-self: center
    .card-body
      align-self: inherit
      margin: 0
      width: 70%

    &:nth-child(even)
      .card-body
        margin: 0