@mixin fontPoppins($size: 16px) {
  font-family: 'Poppins', sans-serif;
  font-size: $size;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  src: local('Poppins-Regular'),
    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  src: local('Poppins-Medium'),
    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  src: local('Poppins-SemiBold'),
    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  src: local('Poppins-Bold'),
    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
}

.fontXs {
  @include fontPoppins(10px);
}

.fontSm {
  @include fontPoppins(12px);
}

.fontMd {
  @include fontPoppins(14px);
}

.fontLg {
  @include fontPoppins(16px);
}

.fontXL {
  @include fontPoppins(18px);
}

.font2Xl {
  @include fontPoppins(24px);
}

.font-size-8 {
  @include fontPoppins(8px);
}

.font-size-32 {
  @include fontPoppins(32px);
}

.font-size-80 {
  @include fontPoppins(80px);
}