main.sass

@import "normalize"

$cyan: #00BCD4

//Flex grid
=grid-size($col: 1, $total: 4)
  flex-basis: percentage($col/$total)

//Media queries
$bpoints: ("xs": 480px, "sm": 768px, "md": 992px, "lg": 1200px)
=break($key)
  $val: map-get($bpoints, $key)

  @if map-has-key($bpoints, $key)
    @media screen and (max-width: $val)
      @content

=size($width, $height)
  width: $width
  height: $height

// Reset
*
  box-sizing: border-box
  list-style-type: none
  text-decoration: none

body
  font-family: 'Lucida Grande', sans-serif
  max-width: 1920px
  margin: 0 auto
  background: #191919
  //#191919

// Style
header
  padding: 0 10px
  display: flex
  flex-flow: column
  h1, p, a, h4
    color: whitesmoke
    // text-align: right
  h1
    margin: 2px 0
  h4
    text-transform: uppercase
    margin: 0 0 10px
  a
    text-decoration: none
    border-bottom: 1px solid $cyan
    &:hover
      color: $cyan
      border: none
    &:visited
      border-bottom: 1px solid $cyan
  .subtitle
    display: flex
    justify-content: space-between
    p
      margin: 0

img
  +size(100%, auto)
  display: block
  transition: filter 0.8s ease
  transition: transform 3s ease

#showcase
  padding: 10px
  display: flex
  flex-flow: row wrap
  +break(md)
    padding: 10px 0

.title-grad
  +size(100%, 100%)
  background: linear-gradient(to top, rgba(black, 0.7) 10%, rgba(black, 0.1))
  position: absolute
  display: flex
  align-items: flex-end
  justify-content: center
  bottom: 0
  opacity: 0
  transition: opacity ease-in-out 0.3s

.box
  overflow: hidden
  text-align: center
  position: relative
  background: #2f2f31
  border: 1px solid #191919
  transition: all 0.3s ease
  &:hover
    .title-grad
      opacity: 1
    img
      filter: brightness(0.7)
      transform: scale(1.05)

.title
  margin-bottom: 6%
  color: darken(white, 10%)
  white-space: nowrap

//media queries
.box
  +grid-size()
  +break(lg)
    +grid-size(2, 6)
  +break(md)
    +grid-size(1, 2)
  +break(sm)
    +grid-size(1, 1)