:root {
  --font: 'Lato';
}

@mixin font-xs {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  line-height: 13.2px;
}

@mixin font-xs-bold {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  line-height: 13.2px;
  font-weight: bold;
}

@mixin font-s {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  line-height: 16px;
}

@mixin font-s-bold {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: bold;
}

@mixin font-base {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 24px;
}

@mixin font-m {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 32px;
}

@mixin font-l {
  font-family: 'Lato', sans-serif;
  font-size: 25px;
  line-height: 32px;
}

@mixin font-xl {
  font-family: 'Lato', sans-serif;
  font-size: 31px;
  line-height: 42px;
}

@mixin font-xxl {
  font-family: 'Lato', sans-serif;
  font-size: 39px;
  line-height: 48px;
}

@mixin font-xxxl {
  font-family: 'Lato', sans-serif;
  font-size: 48px;
  line-height: 56px;
}

@mixin font-4l {
  font-family: 'Lato', sans-serif;
  font-size: 61px;
  line-height: 72px;
}

@mixin font-5l {
  font-family: 'Lato', sans-serif;
  font-size: 76px;
  line-height: 82px;
}

.font-xs {
  @include font-xs;
}

.font-s {
  @include font-s;
}

.font-base {
  @include font-base;
}

.font-m {
  @include font-m;
}

.font-l {
  @include font-l;
}

.font-xl {
  @include font-xl;
}

.font-xl {
  @include font-xl;
}

.font-xxl {
  @include font-xxl;
}

.font-xxxl {
  @include font-xxxl;
}

.font-4l {
  @include font-4l;
}

.font-5l {
  @include font-5l;
}
