<script lang="ts">
  import logoUfawards from '../../assets/images/turnkey-solution/ufawards.svg';
</script>

<div class="logo-ufawards">
  <div class="logo-ufawards__item">
    <img src={logoUfawards} alt="" />
  </div>
  <div class="logo-ufawards__item">
    <p>Best All-in-One <br />Brokerage Solution</p>
  </div>
</div>

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

  .logo-ufawards {
    display: flex;
    align-items: center;
    width: 355px;

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

    @include breakpoint-down('tabM') {
      width: 208px;
    }

    &__item {
      padding: 8px 20px 8px 0;
      margin-right: 20px;
      border-right: thin solid $techBluePrimary;

      @include breakpoint-down('deskL') {
        padding: 6px 14px 6px 0;
        margin-right: 14px;
      }

      @include breakpoint-down('deskS') {
        padding: 4px 10px 4px 0;
        margin-right: 10px;
      }

      > img {
        @include breakpoint-down('deskL') {
          width: 104px;
        }

        @include breakpoint-down('deskS') {
          width: 100px;
        }
      }

      > p {
        color: $techBluePrimary;
        font-size: 15px;
        font-weight: 600;
        line-height: 18px;

        @include breakpoint-down('deskL') {
          font-size: 12px;
          line-height: 14px;
        }

        @include breakpoint-down('deskS') {
          font-size: 10px;
          line-height: 12px;
        }
      }

      &:last-of-type {
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
      }
    }
  }
</style>