$card-height: 460px
$card-colors: #2E368F, #000000, #22B04B, #FFFFFF, #002F3F
$card-over-width: 50px
$card-over-height: 50px
$card-padding: 40px
.bl-structure
  padding: $block-padding
  background-color: $gray-color
  .overview
    .big-title
      padding-right: 70px
  .cards
    padding-left: $card-over-width
    .card-row
      position: relative
      height: $card-height
      .card
        @extend .ease-animated
        bottom: 0
        position: absolute
        height: calc(100% - #{$card-over-height * 2})
        flex-grow: 0
        flex-shrink: 0
        flex-basis: 20%
        width: calc(20% + #{$card-over-width})
        border-radius: 33px
        @for $i from 1 through 5
          $length: 5
          &:nth-child(#{$i})
            left: calc(100% - 20% * #{$length - $i + 1} - #{$card-over-width})
            z-index: #{$length - $i + 1}
        display: flex
        flex-direction: column
        text-align: right
        &:first-child
          .logo
            img
              margin-left: 0
          .animate-height
            color: white
            padding-left: 0
        >a
          display: flex
          height: 100%
          width: 100%
          flex-direction: column
          padding: 40px
          &:hover
            text-decoration: none
        .animate-height
          color: white
          padding-left: 50px
          flex: 1
        .logo
          overflow: hidden
          text-align: right
          img
            max-width: 100%
            height: 70px
            width: auto
            margin-left: $card-padding
            object-fit: contain
        .link
          padding: 20px 0
          position: relative
          .after
            height: 100%
            width: 50px
            border-top-right-radius: 50%
            border-bottom-right-radius: 50%
            position: absolute
            left: calc(100% + #{$card-padding} - 36px)
            top: 0
          >span
            color: white
            position: relative
            .a-before,.a-after
              content: ''
              position: absolute
              width: 18px
              height: 3px
              border-radius: 4px
              right: -$card-padding
              background-color: white
              top: 50%
              z-index: 10
            .a-before
              transform: rotate(45deg) translateY(-50%)
              transform-origin: 96% 0%
            .a-after
              transform: rotate(-45deg) translateY(-50%)
              transform-origin: 96% 0%
        &:hover
          height: calc(100% + #{$card-over-height}) !important
        &.animated
          height: 100%