@import '@/styles/_includes/mixins'

.container
  position: relative
  margin-bottom: 156px
  h3
    width: 512px
  h2
    text-align: center
    font-size: 2.3rem
.intro
  position: relative
  display: flex
  flex-direction: column
  align-items: center
  text-align: center
  margin-bottom: 32px
  box-shadow: var(--backbone-shadow)
  background-color: var(--color-black)

.ttsStt
  display: flex
  justify-content: space-around

.ttsSolutions, .sttSolutions
  display: grid
  grid-template-columns: repeat(3, 1fr)
  row-gap: 16px
  column-gap: 16px

.solution
  display: flex
  flex-direction: column
  align-items: center
  gap: 6px
  &.soon
    opacity: .5
  div
    display: flex
    align-items: center
    justify-content: center
    border-radius: 16px
    width: 70px
    height: 70px
    background-color: var(--color-white)
  span
    color: var(--color-white)
    font-size: .8rem
    font-weight: var(--fontWeight-semibold)

.backbone
  --width: 512px
  position: absolute
  transform: translateY(28px)
  z-index: -10
  left: calc(50% - (var(--width) / 2))
  width: var(--width)

@include tablet
  .container
    margin-bottom: 64px

@include mobile
  .container
    h3
      width: inherit
    h2
      text-align: center
      font-size: 2rem
  .ttsStt
    gap: 16px
    flex-direction: column
