@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Light.eot');
  src: local('Gilroy Light'), local('Gilroy-Light'),
    url('../fonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gilroy-Light.woff') format('woff'),
    url('../fonts/Gilroy-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.eot');
  src: local('Gilroy Regular'), local('Gilroy-Regular'),
    url('../fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gilroy-Regular.woff') format('woff'),
    url('../fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-RegularItalic.eot');
  src: local('Gilroy Regular Italic'), local('Gilroy-RegularItalic'),
    url('../fonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gilroy-RegularItalic.woff') format('woff'),
    url('../fonts/Gilroy-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.eot');
  src: local('Gilroy Medium'), local('Gilroy-Medium'),
    url('../fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gilroy-Medium.woff') format('woff'),
    url('../fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-SemiBold.eot');
  src: local('Gilroy SemiBold'), local('Gilroy-SemiBold'),
    url('../fonts/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gilroy-SemiBold.woff') format('woff'),
    url('../fonts/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.eot');
  src: local('Gilroy Bold'), local('Gilroy-Bold'),
    url('../fonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gilroy-Bold.woff') format('woff'),
    url('../fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

html {
  font-size: 16px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-style: normal;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  overflow-y: scroll;
  color: $black;
  background-color: $greybg;
}

a,
button,
input,
textarea {
  font-family: 'Gilroy', sans-serif;
  text-decoration: none;
}

a {
  transition: all ease-in-out 0.1s;

  &:hover {
    color: $blue;
  }

  &:active {
    color: $darkblue;
  }
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

h2 {
  margin: 0;
  font-weight: 500;
  font-size: 55px;
  line-height: 122%;
  letter-spacing: 0.01em;
  color: $darkgrey;
  text-align: center;

  & > span {
    font-weight: 700;
    color: $blue;
  }

  @include laptop {
    font-size: 40px;
  }

  @include tablet {
    font-size: 36px;
  }

  @include mobile {
    font-size: 28px;
  }
}

h3 {
  margin: 0;
  font-weight: 600;
  font-size: 23px;
  line-height: 127%;
  color: $grey;

  @include mobile {
    font-size: 20px;
  }
}