@use '../../../theme/viewerDefs' as *;

.title-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inline {
  display: flex;
}

.title-card__title {
  font-weight: 600;
  font-size: clamp(32px, 3.5vw, 50px);
  color: var(--color-override, $viewer-color);
  line-height: 1.1em;
}

.title-card__label {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 400;
  color: var(--secondary-color-override, $viewer-secondary-color);
  margin-left: auto;
  text-transform: uppercase;

  &--accent {
    color: var(--accent-color-override, $accent-color);
  }
}

.title-card__secondary {
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  color: var(--secondary-color-override, $viewer-secondary-color);
  line-height: 1.1em;

  &::after {
    content: '\200b';
  }
}