@import ../settings

section.inform-columns
  display: flex
  justify-content: center

  .inner-div
    display: grid
    grid-template-columns: 1fr 1fr
    grid-gap: 30px
    +resolution(0, 991)
      grid-template-columns: 1fr

    .item
      background: $light
      position: relative
      display: grid
      grid-template-rows: auto 1fr auto
      +resolution(576)
        padding: 40px
      +resolution(0, 575)
        padding: 30px 20px

      &:nth-child(odd)
        &::before
          content: ""
          position: absolute
          top: 0
          left: 0
          background-color: $white
          clip-path: polygon(0 0, 0 100%, 100% 0)
          +resolution(576)
            width: 40px
            height: 40px
          +resolution(0, 575)
            width: 20px
            height: 20px

        &::after
          content: ""
          position: absolute
          bottom: 0
          right: 0
          background-color: $white
          clip-path: polygon(100% 100%, 0 100%, 100% 0)
          +resolution(576, 992)
            width: 40px
            height: 40px
          +resolution(0, 575)
            width: 20px
            height: 20px

      &:nth-child(2n)
        &::before
          content: ""
          position: absolute
          top: 0
          left: 0
          background-color: $white
          clip-path: polygon(0 0, 0 100%, 100% 0)
          +resolution(576)
            width: 40px
            height: 40px
          +resolution(0, 575)
            width: 20px
            height: 20px

        &::after
          content: ""
          position: absolute
          bottom: 0
          right: 0
          background-color: $white
          clip-path: polygon(100% 100%, 0 100%, 100% 0)
          +resolution(576)
            width: 40px
            height: 40px
          +resolution(0, 575)
            width: 20px
            height: 20px

      .header
        display: flex
        flex-direction: column

        img 
          width: 54px
          height: 54px

        div

          h3
            font-weight: bold
            letter-spacing: $em
            color: $black
            margin-top: 16px
            +resolution(992)
              font-size: 24px
            +resolution(0, 991)
              font-size: 20px

      .content
        +resolution(992)
          margin: 24px 0
        +resolution(0, 991)
          margin: 16px 0

        p
          text-align: left
          font-size: 16px
          +resolution(992)
            margin-bottom: 20px
          +resolution(0, 991)
            margin-bottom: 15px
          &:last-child
            margin-bottom: 0

      a
        max-width: 291px
        min-height: 58px
        color: $black !important
        display: flex
        align-items: center
        font-weight: 700
        font-size: 16px
        text-decoration: none
        transition: 0.3s
        letter-spacing: $em

        &::after
          content: url('/img/global/link-arrow.svg')
          display: flex
          margin-left: 15px
          align-items: center
          padding-top: 5px

        &:hover
          color: $secondary !important

        &:active
          color: $primary !important