*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.btn { display: inline-block; padding: 14px 28px; border-radius: var(--radius); font-weight: 600; transition: opacity .2s; }
.btn:hover { opacity: .85; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-sm { padding: 8px 20px; font-size: 14px; border-radius: 999px; }