@import "base/variavles"
$size: 250px
$figure_size: 50px
.cards
  display: flex
  align-items: flex-start
  flex-flow: row wrap
.worksell-card
  //&:first-child
  //  margin-left: 0
  //  margin-right: 0
  margin: 15px
  display: inline-block
  a
    -webkit-transition: all 0.3s ease-out
    -moz-transition: all 0.3s ease-out
    transition: all 0.3s ease-out
    display: inline-block
    color: #235080
  a:hover,
  a:visited
    .img-figure
      opacity: 1
    transform: scale(1.06)
    text-decoration: none
    color: #121880
    box-shadow: 0 0 10px rgba(0,0,0,0.7)
  .img-block
    width: $size
    //border: 1px solid red
    position: relative
    .img
      width: $size
      height: $size
      border: 10px solid #F2F2F2
      background:
        repeat: no-repeat
        position: center
        size: cover
    .cost-wrapper
      position: absolute
      bottom: 0
      width: 100%
      text-align: center
      .cost
        color: #fb2c2d
        font-size: 18px
        display: inline-block
        min-width: $size*0.8
        background-color: white
        padding: 4px 8px
        //border: 1px solid black

  .name-block
    margin-top: 15px
    max-width: $size
    text-align: center

  .img-figure
    width: $figure_size
    height: $figure_size
    -webkit-transition: all 0.3s ease-out
    -moz-transition: all 0.3s ease-out
    transition: all 0.3s ease-out
    border-radius: 100%
    background:
      image: url("#{$static}/img/img.png")
      repeat: no-repeat
      position: center
      //size: cover
      color: rgba(211,211,211,0.8)
    position: absolute
    top: 50%
    left: 50%
    margin-left: -$figure_size/2
    margin-top: -$figure_size/2
    opacity: 0