<template>
  <div class="StartPage main-bg">
    <header class="StartPage-Header">
      Единый<br />
      Реестр<br />
      Воинского<br />
      Учёта
    </header>
    <div class="StartPage-GerbField">
      <div class="StartPage-Gerb gerb"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.StartPage {
  height: 100%;
  flex: 1 1 auto;
  margin-bottom: -50px;
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-gap: 10px;

  &-Header {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: rgba(255, 255, 255, 0.7);
    color: #015e98;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #0148742E;
    font-family: 'Golos Text';
    font-size: 64px;
    font-style: normal;
    font-weight: 500;
    line-height: 72px;
    letter-spacing: -1.92px;
    @media (max-width: 1364px) {
      font-size: 4.7vw;
      line-height: 5.24vw;
    }
  }

  &-GerbField {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  &-Gerb {
    display: block;
    width: 60%;
  }
}
</style>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class Start extends Vue {
}
</script>
