<script lang="ts">
  import { t } from '$lib/translations';
  import award1 from '../../../assets/images/cfd-package/awards/award1.svg';
  import award2 from '../../../assets/images/cfd-package/awards/award2.svg';
  import award3 from '../../../assets/images/cfd-package/awards/award3.svg';
  import award4 from '../../../assets/images/cfd-package/awards/award4.svg';
</script>

<div class="block-awards">
  <div class="container">
    <p class="block-awards__title">{$t('cfd-package.Our Awards')}</p>
    <div class="block-awards__blocks">
      <div class="block-awards__block">
        <img src={award1} alt="">
      </div>
      <div class="block-awards__block">
        <img src={award2} alt="">
      </div>
      <div class="block-awards__block">
        <img src={award3} alt="">
      </div>
      <div class="block-awards__block">
        <img src={award4} alt="">
      </div>
    </div>
  </div>
</div>

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

  .block-awards {
    background-color: $headerDark;

    .container {
      padding-bottom: 52px;

      &::before {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: #464646;
        margin-bottom: 50px;

        @include breakpoint-down('deskM') {
          margin-bottom: 28px;
        }

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

      @include breakpoint-down('deskM') {
        padding-bottom: 36px;
      }

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

    &__title {
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: rgba(125, 125, 125, 1);
      text-align: center;
    }

    &__blocks {
      display: flex;
      justify-content: center;
      gap: 52.59px;
      padding: 7px 0 13px;
      margin-top: 23px;

      @include breakpoint-down('deskM') {
        gap: 27.88px;
        padding: 20px 0 3px;
        margin-top: 16px;
      }

      @include breakpoint-down('tabM') {
        flex-direction: column;
        align-items: center;
        gap: 39.59px;
        padding: 0;
        margin-top: 16px;
      }
    }

    &__block {
      img {
        width: 223.52447509765625px;
        height: 82.17726135253906px;

        @include breakpoint-down('deskM') {
          width: 118.49456787109375px;
          height: 43.56361770629883px;
        }

        @include breakpoint-down('tabM') {
          width: 168.26307678222656px;
          height: 61.8617057800293px;
        }
      }
    }
  }
</style>