*,
*::before,
*::after {
  box-sizing: inherit;
}
*:focus {
  outline: none;
}
html {
  box-sizing: border-box;
  line-height: 1;
  scroll-behavior: smooth;
  &.lock-scroll {
    position: relative;
    overflow: hidden;
    body {
      position: relative;
      overflow: hidden;
    }
  }
}
body {
  -webkit-tap-highlight-color: transparent;
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
}
a {
  display: inline-block;
  text-decoration: none;
  color: $black;
  transition: 0.3s;
  @include media-hover {
    color: $primary1;
  }
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
span,
ul,
ol,
li,
tr,
td,
th,
table,
blockquote {
  margin: 0;
  padding: 0;
}

// defaults
.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  font-family: $font;
  color: $black;
  .inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 25px;
    @include media-laptop {
      max-width: 100%;
    }
    @include media-tablet {
      padding: 0 10px;
    }
  }
  main {
    flex: 1 0;
    padding: 50px 0 70px;
  }
}
.ui {
  &-dn {
    display: none;
  }
  &-l-db {
    @include media-laptop {
      display: block;
    }
  }
  &-l-df {
    @include media-laptop {
      display: flex;
    }
  }
  &-l-dn {
    @include media-laptop {
      display: none;
    }
  }
  &-t-db {
    @include media-tablet {
      display: block;
    }
  }
  &-t-df {
    @include media-tablet {
      display: flex;
    }
  }
  &-t-dn {
    @include media-tablet {
      display: none;
    }
  }
}
