/*==========================================================================
  Category detail page
  ========================================================================== */

body.categories
  position: relative
  &:before
    content: ''
    position: absolute
    display: block
    right: 0
    bottom: 774px
    width: 648px
    height: 648px
    background: url('/img/svg/big_hamer.svg')
    background-size: 130%
    background-position: 170% -25%
    background-repeat: no-repeat
    transform: scaleX(-1)

    +respond-to-width(950)
      display: none

.category-header
  width: 100%
  overflow: visible
  +flex(space-between, center)
  flex-wrap: wrap
  h1
    width: auto
    display: inline-block
    margin-bottom: 30px

  a.button
    display: inline-block
    background-color: transparent
    border: solid 2px $euroLighterGrey
    margin: 0 0 30px 20px

    &:hover
      background-color: $euroYellow
      border: solid 2px $euroYellow

    +respond-to-width(425)
      margin-right: 20px

.category-content
  width: 100%
  overflow: visible

.category-story
  margin-top: 30px
  margin-bottom: 60px

  +respond-to-width(950)
    padding: 0

  .category-image
    width: column(4, 9)

    +respond-to-width(425)
      width: 100%

    .img-holder
      height: 0
      padding-bottom: 59%
      width: 100%
      background-color: white
      background-size: contain
      background-repeat: no-repeat
      background-position: center center

  .category-description
    width: column(4.5, 9)
    margin-left: column(0.5, 9)
    vertical-align: top

    +respond-to-width(425)
      width: 100%
      margin-left: 0
      padding: column(0.5, 9) 20px

    h2
      color: #3C414B
      font-size: 20px
      font-weight: 600
      line-height: 32px
      margin-top: 0

    p
      color: #696E78
      font-size: 16px
      line-height: 24px

      +respond-to-width(950)
        padding: 0