@import "src/styles/common"

.container
  background-color: #080713
  color: #fff
  padding: 96px 0
  background: url(./assets/bg-homepage-banner.jpg) no-repeat center top
  background-attachment: fixed
  background-size: cover
  @include on-mobile()
    padding: 0

.main
  @include on-desktop()
    @include container

.banner
  display: flex
  justify-content: space-between
  padding: 0 32px
  @include on-mobile()
    flex-wrap: wrap-reverse
    text-align: center
    justify-content: center
    align-items: center
    padding: 0
  h1
    margin-top: 2.5rem
    margin-bottom: 1rem
    font-size: 24px
    color: #fff
    @include on-mobile()
      font-size: 20px
  p
    max-width: 554px
    font-size: 18px
    line-height: 1.8
    @include on-mobile()
      max-width: 100%
      font-size: 16px
  &_start
    margin-right: 32px
    display: flex
    flex-direction: column
    @include on-mobile()
      align-items: center
      margin-top: 16px
      margin-right: 0
      padding: 16px
    &_logo
      max-width: 554px
      width: 100%
      height: auto
    &_button
      margin-top: 24px
      display: flex
      align-items: center
      a
        font-size: 16px
        font-weight: 300
        color: $color-primary
        cursor: pointer
  &_end
    &_image
      //max-height: 400px
      //height: 100%
      //width: auto
      max-width: 586px
      width: 100%
      height: auto

.feature
  padding: 72px 16px
  text-align: center
  @include on-mobile()
    padding: 64px 16px
  //&_icon
  //  width: 64px
  //  height: 64px
  &_title
    margin-top: 32px
    color: #fff
    font-size: 20px
    //font-weight: 600

.architecture
  padding: 72px 16px
  text-align: center
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  @include on-mobile()
    padding: 64px 16px
  h2
  &_summary
    margin-top: 32px
    line-height: 1.75
    padding: 0 32px
  &_image
    margin-top: 32px
    width: 100%
    img
      width: 100%

.comparison
  padding: 72px 16px
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  @include on-mobile()
    padding: 64px 16px
  h2
    margin-bottom: 64px
  //&_row
    //background-color: rgba(#000, 0)
  &_table
    overflow: auto
    height: calc(100vh - 72px)
    //margin: 0 auto
    //*
    //  color: #FFF
    //  background: rgba(0, 0, 0, 0) !important
    &_check
      text-align: center
    &_title
      text-align: center
      @include on-mobile()
        width: 40px
  table
    th
      white-space: nowrap
    thead
      tr
        th
          position: sticky
          top: 0
          background-color: rgba(14,14,40,.9)
    tbody
      //height: calc(100vh - 72px)
      height: 72px
      overflow: scroll
      th
        text-align: left
        background-color: #313139
    th, td
      padding: 24px
      border: 1px solid #414050
      @include on-desktop()
        min-width: 320px
      @include on-mobile()
        padding: 12px
        font-size: 14px