/**
 * Discover block
 *
 * 1. Padding on top and bottom of the entire discover block
 */

.discover
  position: relative
  background:
    color: $discoverItemsBgColor

.discover-row
  position: relative
  color: $discoverMainTitle

  padding: 100px 0 /* 1 */

  +flex(center, center)
  +flex-direction(column)

  h2
    +font-semi-bold(28px, 34px)
    color: $discoverMainTitle

  +respond-to(mobile)
    text-align: center
    padding: 50px 0

.discover-block
  //margin-top: 25px

  +respond-to-width(1080)
    max-width: 500px

    .discover-item-wrapper
      margin-bottom: 10px

  +flex(center, center)
  +flex-rows

.discover-item-wrapper
  +flex(center, center)
  +flex-direction(column)

  .discover-item
    position: relative
    +flex(center, center)

    width: $discoverItemSize
    height: $discoverItemSize
    margin: 10px

    background:
      color: transparent
      position: 50% 50%
      size: cover
      repeat: no-repeat

    border-radius: $discoverItemBorderRadius
    transition: background 0.4s ease

    &:after
      content: ''
      background-color: $primaryColor
      opacity: 0.25
      width: 100%
      height: 100%
      transition: opacity 0.4s ease
      border-radius: $discoverItemBorderRadius

    &:hover
      cursor: pointer
      &:after
        opacity: 0

    /**
      * Discover pictures
      *
      * Here you can fill in manually the image src from chosen pictures
      */

    &.item-1
      background:
        image: $discoverItem1

    &.item-2
      background:
        image: $discoverItem2

    &.item-3
      background:
        image: $discoverItem3

    &.item-4
      background:
        image: $discoverItem4

  .discover-item-content
    a
      +font-semi-bold(20px, 30px)
      color: $blue