.infoCard {
  --background-color: var(--Surface-Brand-Primary-1-Default);
  --topTitle-color: var(--Text-Brand-OnPrimary-1-Accent);
  --heading-color: var(--Text-Brand-OnPrimary-1-Heading);
  --text-color: var(--Text-Brand-OnPrimary-1-Default);
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: var(--Corner-radius-md);
  text-align: center;
  width: 100%;
  text-wrap: balance;
  overflow: hidden;
  background-color: var(--background-color);
  z-index: 0;
}

.height-fixed {
  height: 320px;
}

.height-dynamic {
  height: 100%;
}

.theme-primary-1 {
  --background-color: var(--Surface-Brand-Primary-1-Default);
  --topTitle-color: var(--Text-Brand-OnPrimary-1-Accent);
  --heading-color: var(--Text-Brand-OnPrimary-1-Heading);
  --text-color: var(--Text-Brand-OnPrimary-1-Default);
}
.theme-primary-2 {
  --background-color: var(--Surface-Brand-Primary-2-Default);
  --topTitle-color: var(--Text-Brand-OnPrimary-2-Accent);
  --heading-color: var(--Text-Brand-OnPrimary-2-Heading);
  --text-color: var(--Text-Brand-OnPrimary-2-Default);
}
.theme-primary-3 {
  --background-color: var(--Surface-Brand-Primary-3-Default);
  --topTitle-color: var(--Text-Brand-OnPrimary-3-Accent);
  --heading-color: var(--Text-Brand-OnPrimary-3-Heading);
  --text-color: var(--Text-Brand-OnPrimary-3-Default);
}
.theme-accent {
  --background-color: var(--Surface-Brand-Accent-Default);
  --topTitle-color: var(--Text-Brand-OnAccent-Accent);
  --heading-color: var(--Text-Brand-OnAccent-Heading);
  --text-color: var(--Text-Brand-OnAccent-Default);
}
.theme-white {
  --background-color: var(--Surface-Primary-Default);
  --topTitle-color: var(--Text-Accent-Primary);
  --heading-color: var(--Text-Heading);
  --text-color: var(--Text-Default);
}
.theme-image {
  --background-color: transparent;
  --topTitle-color: var(--Text-Inverted);
  --heading-color: var(--Text-Inverted);
  --text-color: var(--Text-Inverted);
}

.titleWrapper {
  display: grid;
  gap: var(--Space-x1);
  justify-items: center;
}

.topTitle {
  color: var(--topTitle-color);
}

.top-title-angled .topTitle {
  transform: rotate(-3deg);
  transform-origin: left;
}

.heading {
  color: var(--heading-color);
}

.bodyText {
  color: var(--text-color);
}

.backgroundImageWrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.36) 50%,
      rgba(0, 0, 0, 0.75) 100%
    );
  }
}

.backgroundImage {
  object-fit: cover;
  width: 100%;
  height: min(100%, 320px);
}

.content {
  display: grid;
  max-width: 800px;
  padding: var(--Space-x4) var(--Space-x3);
  gap: var(--Space-x2);
}

.buttonContainer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space-x1);
  align-items: center;
  justify-content: center;

  .primaryButton,
  .secondaryButton {
    flex-shrink: 0;
  }
}