<script lang="ts">
  import { t } from '$lib/translations';

</script>

<div class="block-branded">
  <div class="container">
    <div class="block-branded__wrapper">
      <p class="block-branded__text">
        {$t('trading-platform.Build your own branded brokerage with our fully customizable white-label trading platform. Stand out on the market, choosing the color scheme, iconography, typography, and brand identity you want.')}
      </p>
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .block-branded {
    background: $blueLight;
    padding: 210px 0;

    @include breakpoint-down('deskL') {
      padding: 177px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 95px 0;
    }

    @include breakpoint-down('tabM') {
      padding: 198px 0;
    }

    &__wrapper {
      position: relative;
      z-index: 1;
    }

    &__text {
      color: $techWhite;
      text-align: center;
      width: 100%;
      max-width: 680px;
      margin-inline: auto;

      @include breakpoint-down('deskS') {
        max-width: 530px;
      }
    }
  }
</style>