<script lang="ts">
  import { t } from '$lib/translations';
  import img1 from '../../../assets/images/turnkey-solution/grow.svg';
</script>

<div class="block-grow">
  <div class="container">
    <div class="block-grow__wrapper">
      <p class="block-grow__title">{$t('turnkey-solution.Grow your brokerage business with cutting-edge infrastructure')}</p>
      <p class="block-grow__subtitle">
        {$t("turnkey-solution.Fast, Secure and Reliable. We take care of everything from setup to ongoing maintenance, so you can focus on your business goals. It's the ultimate hassle-free solution.")}
      </p>
      <img src={img1} alt="" class="block-grow__img" loading="lazy" />
    </div>
  </div>
</div>

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

  .block-grow {
    background: $techBlue2;
    padding-top: 105px;
    padding-bottom: 125px;

    @include breakpoint-down('deskL') {
      padding-top: 108px;
      padding-bottom: 106px;
    }

    @include breakpoint-down('deskS') {
      padding-top: 64px;
      padding-bottom: 81px;
    }

    @include breakpoint-down('tabM') {
      padding-top: 75px;
      padding-bottom: 75px;
    }

    &__wrapper {
      width: 100%;
      max-width: 680px;
      margin-inline: auto;

      @include breakpoint-down('deskL') {
        max-width: 544px;
      }
    }

    &__title {
      @include titleL;

      text-align: center;
      margin-bottom: 24px;

      @include breakpoint-down('deskL') {
        margin-bottom: 16px;
      }

      @include breakpoint-down('tabM') {
        margin-bottom: 8px;
      }
    }

    &__subtitle {
      text-align: center;
      margin-bottom: 40px;

      @include breakpoint-down('deskS') {
        @include smallDefault;

        width: 100%;
        max-width: 529px;
        margin-inline: auto;
      }
    }

    &__img {
      @include breakpoint-down('deskS') {
        width: 68.5%;
        max-width: 544px;
        margin-inline: auto;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
      }
    }
  }
</style>