<script lang="ts">
  import { t } from '$lib/translations';
  import inside from '../../../assets/images/back-office/inside/inside.svg';
</script>

<div class="block-inside">
  <div class="container">
    <p class="block-inside__title">{$t('back-office.What’s inside QBS Back Office?')}</p>
    <img src={inside} alt="" class="block-inside__image" loading="lazy" />
  </div>
</div>

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

  .block-inside {
    padding: 66px 0;

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

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

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

    &__title {
      @include titleXL;

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

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

      @include breakpoint-down('deskS') {
        margin-bottom: 40px;
      }
    }

    &__image {
      max-width: 1160px;
      margin: 0 auto;

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