<template>
<div class="fl-choose-district">
  <div class="fl-choose-district-vectors">
    <fl-icon
      name="vector"
      :width="232"
      :height="85"
      class="fl-choose-district-vector"
    />
    <fl-icon
        name="vector2"
        :width="129"
        :height="84"
        class="fl-choose-district-vector__two"
    />
  </div>
  <div class="fl-choose-district-title">
    Выберите жилой комплекс и дом, чтобы увидеть шахматку
  </div>
</div>
</template>

<script>
import FlIcon from '@/core-components/icon/FlIcon'
export default {
  name: 'FlChooseDistrict',
  components: { FlIcon }
}
</script>

<style lang="scss" scoped>
.fl-choose-district {
  position: relative;
  bottom: 40px;
  display: flex;
  margin-left: 60px;
  fill: $grey-04;
}

.fl-choose-district-title {
  position: relative;
  top: 50px;
  align-self: flex-end;
  max-width: 324px;
  margin-left: 28px;
  font-size: 24px;
}

.fl-choose-district-vectors {
  position: relative;
}

.fl-choose-district-vector__two {
  margin-left: -129px;
}

@include media-max-lg {
  .fl-choose-district {
    justify-content: center;
    margin-left: 0;
  }

  .fl-choose-district-vectors {
    display: none;
  }
}
</style>
