.title {
  margin: 0;
  font-weight: 800;
  font-size: calc(var(--size) * 8);
  font-family: var(--primary-font);
}

.title--sm {
  font-size: calc(var(--size) * 7);
}

.title--xs {
  font-weight: 700;
  font-size: calc(var(--size) * 6);
}

.title--2xs {
  font-weight: 700;
  font-size: calc(var(--size) * 5);
}

.text {
  margin: 0;
  font-weight: 400;
  font-size: calc(var(--size) * 4);
  font-family: var(--secondary-font);
}

.text--sm {
  font-size: calc(var(--size) * 3.5);
}

.text--xs {
  font-weight: 300;
  font-size: calc(var(--size) * 3);
}

.interactive {
  margin: 0;
  font-weight: 600;
  font-size: calc(var(--size) * 3.5);
  font-family: var(--primary-font);
}

.interactive--2xl {
  font-weight: 700;
  font-size: calc(var(--size) * 5);
}

.interactive--xl {
  font-weight: 700;
  font-size: calc(var(--size) * 4.5);
}

.interactive--lg {
  font-size: calc(var(--size) * 4);
}

.interactive--sm {
  font-size: calc(var(--size) * 3);
}

.interactive--xs {
  font-weight: 500;
  font-size: calc(var(--size) * 2.5);
}

.img {
  display: block;
  object-fit: cover;
}

.img--logo {
  height: calc(var(--size) * 9);
  width: auto;
}

.img--background {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: 0.5;
}

.link {
  position: relative;
  color: var(--primary-text);
  text-decoration: none;
  transition: color var(--transition-duration);

  &::before {
    content: "";
    position: absolute;
    bottom: -0.125em;
    width: 100%;
    height: 0.0625em;
    background-color: var(--primary-color);
    transform: scale(0);
    transition: transform var(--transition-duration);
  }

  &:hover {
    color: var(--primary-color);
  }

  &:hover::before {
    transform: scale(1);
  }
}

.button {
  --primary-button-color: var(--primary-background);
  --primary-button-text: var(--primary-text);
  padding: 0.5em 1em;
  border: calc(var(--size) * 0.125) solid var(--primary-button-color);
  border-radius: calc(var(--size) * 2);
  background-color: var(--primary-button-color);
  color: var(--primary-button-text);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--primary-font);
  transition: box-shadow var(--transition-duration), filter var(--transition-duration);

  &:hover {
    box-shadow: 0 0 calc(var(--size) * 2) var(--primary-button-color);
    filter: opacity(0.875);
  }
}

.button--primary {
  --primary-button-color: var(--primary-color);
  --primary-button-text: var(--light-primary-text);
}

.button--outline-primary {
  background-color: transparent;
  --primary-button-color: var(--primary-color);
  --primary-button-text: var(--primary-text);
}

.badge {
  --primary-badge-color: var(--primary-background);
  --primary-badge-text: var(--primary-text);
  padding: 0.25em 0.5em;
  border-radius: calc(var(--size) * 2);
  background-color: var(--primary-badge-color);
  color: var(--primary-badge-text);
}

.badge--primary {
  --primary-badge-color: var(--primary-color);
  --primary-badge-text: var(--light-primary-text);
}