html, body {
  height: 100%;
  margin: 0;
}

body {
 display: grid;
 grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.divider {
    width: 4rem;
    height: .25rem;
    background: var(--brand-secondary-color);
    margin: 1.2rem 0;
    border-radius: 2px;
}

.fixed-header-on .header.fixed:not(.dark) {
    background-color: var(--brand-primary-color);
}

h1 { font-size: 28px; font-weight: unset; font-family: Merriweather;}
h2 { font-size: 24px; font-weight: unset; font-family: Merriweather;}
h3 { font-size: 20px; font-weight: unset; font-family: Merriweather;}
h4 { font-size: 18px; font-weight: unset; font-family: Merriweather;}
h5 { font-size: 16px; font-weight: unset; font-family: Merriweather;}
h6 { font-size: 14px; font-weight: unset; font-family: Merriweather;}

a{
  color: var(--brand-primary-color);
  text-decoration: underline;
  transition: color .2s;
}

a:hover{
  color: var(--brand-secondary-color);
}

.btn{
  display:inline-block;
  padding: .6em 1.2em;
  border-radius: .5rem;
  font-weight:600;
  text-decoration:none;
  transition: all .2s;
  border:2px solid transparent;
}
.btn-primary{
  background: var(--brand-primary-color);
  color:  #ffffff;
}
.btn-primary:hover{
  background: var(--brand-secondary-color);
  color: var(--kamnik-black);
  border-color: var(--brand-secondary-color);
}
.btn-outline{
  background: transparent;
  color: var(--brand-primary-color);
  border-color: var(--brand-primary-color);
}
.btn-outline:hover{
  background: var(--brand-primary-color);
  color:  #ffffff;
}

.card{
  background:  #ffffff;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.25em .6em;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-radius:.4rem;
  background:var(--brand-secondary-color);
  color:var(--kamnik-black);
}

.divider{
  width:4rem;
  height:.25rem;
  background:var(--brand-secondary-color);
  margin:1.2rem 0;
  border-radius:2px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}