HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers84/zuiderbos.nl/wwwroot/css/partials/landingspage/_servicesSelection.sass
.services-selection
  text-align: center
  margin-bottom: 100px

  > .grid-col
    background-color: $servicesGray
    +flex(flex-start, center)
    position: relative
    height: 240px
    margin: 0 auto
    padding: 0
    text-decoration: none
    transition: background-color 0.3s

    .logo
      +flex(center, center)
      height: 240px
      width: 25%
      background-color: $globalBlue

      &:after
        content: ''
        display: inline-block
        +sprite(-205px -220px, 100px, 205px)


    a
      text-align: left
      position: relative
      width: 25%
      height: 100%
      padding: 0 40px 0 30px
      color: white
      font-size: 1.3rem
      text-decoration: none
      line-height: 1.3
      font-weight: bold()
      +flex(space-between, center)
      background: linear-gradient(to right, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.0))

      &:hover
        background-color: darken($servicesGray, 5%)
        span
          +translate3d(15px,0,0)

      //a
      //  text-decoration: none
      //  color: white

      sub
        display: block
        opacity: 0.7
        font-size: 1rem
        font-weight: regular()

    span
      position: absolute
      right: 30px
      top: 60px
      +sprite(-95px -365px, 40px, 31px)
      +translate3d(0,0,0)
      transition: transform 0.3s

      +respond-to-width(1300)
        +arrowWhite
        top: 75px


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



    +respond-to-width(1400)
      width: column(11, 12)
    //  width: column(7, 12)
    //
    //+respond-to-width(1000)
    //  width: column(11, 12)

  +respond-to-width(840)
    margin: 0 auto 20px
    width: 100%

    > .grid-col
      width: 100%

      .logo
        display: none

      a
        width: 33%

        p
          width: 100%

  +respond-to-width(600)
    > .grid-col
      height: auto
      width: 100%
      display: block

      a
        width: 100%
        height: auto
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.0))

        p
          text-align: center