.card {
  --bs-card-bg: var(--bs-gray-100);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-border-color: var(--bs-card-bg);
  --bs-card-height: 100%;
  --bs-card-spacer-x: 2rem;
  --bs-card-spacer-y: 2.5rem;
  --bs-card-title-spacer-y: 0.75rem;
  --card-actions-spacer-y: 0.75rem 0;
  --card-icon-size: 4rem;
  --card-media-align: start;
  --card-media-spacer-x: 0;
  --card-media-spacer-y: 0;
  --card-text-align: start;

  text-align: var(--card-text-align);
}

/* Reset 100% height if there's any sibling card */
.card:has(~ .card),
.card + .card {
  --bs-card-height: auto;
}

.card--buy_card {
  --bs-card-bg: var(--bs-white);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius-xl);
  --bs-card-inner-border-radius: var(--bs-border-radius-xl);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 2.25rem 2rem;
  --card-text-align: center;
  --card-header-height: calc(1.125rem * var(--bs-body-line-height) + var(--bs-card-cap-padding-y) * 2 + var(--bs-card-border-width));
}

.card--buy_card .card-actions {
  flex-grow: 1;
  margin-block-start: 2rem;
  align-items: center;
  gap: 0.25rem;
}

.card--buy_card .card-body {
  grid-auto-rows: auto;
}

.card--buy_card .card-title {
  margin-bottom: 1.25rem;
}

/* move buy card without subtitle to size of card-header */
.card--buy_card:not(:has(.card-header)) {
  --bs-card-height: calc(100% - var(--card-header-height));
  margin-top: var(--card-header-height);
}

.card--cta_card {
  --bs-card-bg: var(--bs-white);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-spacer-x: 2rem;
  --bs-card-spacer-y: 2.5rem 1.25rem;
  --card-icon-size: 7.625rem;
  --card-media-align: center;
  --card-text-align: center;

  transition: border-color 0.4s ease;
}

.card--cta_card:hover {
  --bs-card-border-color: var(--bs-blue);
}

.card--cta_card .card-body:has(.card__icon) {
  grid-template-rows: var(--card-icon-size) 1fr;
  gap: 1.5rem;
}

.card--cta_card .card-actions {
  flex-grow: 1;
  margin-block-start: 0;
  align-items: center;
}

.card--cta_card--small-media {
  --bs-card-border-radius: 15px;
  --card-icon-size: 6rem;
  --bs-card-border-color: transparent;
  --bs-card-spacer-y: 2.5rem;
}

.node--type-games .card--cta_card--small-media,
.node--type-customer-story .card--cta_card--small-media {
  --card-icon-size: 4rem;
}

.card--cta_card--small-media:hover {
  --bs-card-border-color: transparent;
}

.card--cta_card--small-media .card-actions {
  flex-grow: 0;
}

.card--cta_card--small-media .card__icon {
  width: auto;
}

.card--cta_card--small-media .card__icon img {
  max-height: 5rem;
}

.card--cta_card--small-media .card-body {
  padding-block-end: 4rem;
}

.node--type-games .card--cta_card--small-media .card-body {
  padding-block-end: 2.5rem;
}

.card--icon_card {
  --card-text-align: start;
  --card-actions-spacer-y: 3rem 0;
  --card-media-align: left;
  --bs-card-spacer-y: 2.5rem 1.5rem;

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.card--icon_card:hover {
  box-shadow: var(--bs-box-shadow-sm);
}

.card--icon_card:not(.card--no-animation):hover {
  transform: translateY(-10px);
}

.card--icon_card .card-body:has(.card__icon) {
  grid-template-rows: var(--card-icon-size) 1fr;
}

.card--icon_card .card-actions {
  margin-inline: -0.5rem;
  flex-grow: 1;
}
.card--icon_card .card-body {
  grid-template-rows: 1fr;
}

.card--flipping_card {
  --bs-card-height: auto;
  --bs-card-bg: var(--bs-enable-blue-50);
  --bs-aspect-ratio: 90%;

  transition: box-shadow 0.4s ease;
}

.card--flipping_card:hover {
  box-shadow: var(--bs-box-shadow-sm);
}

.card--flipping_card .card-body {
  background-color: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
  grid-auto-rows: auto;
  align-items: center;
  border-radius: var(--bs-card-border-radius);
  padding: 0;
}

.card--flipping_card.card:not(.card--flipping_card--rotate.isFlipped) .card__content-wrapper * {
  cursor: default;
  user-select: none;
}

.card--flipping_card .card__content-wrapper::-webkit-scrollbar-thumb {
  background: #16395d;
  border-radius: 10px;
}

.card--flipping_card .card__content-wrapper::-webkit-scrollbar-track {
  border-radius: 10px;
}

.card--flipping_card .card__content-wrapper::-webkit-scrollbar {
  width: 10px;
}

.card--flipping_card .card__content-wrapper {
  padding-inline: var(--bs-card-spacer-x);
  padding-block: var(--bs-card-spacer-y);
  max-height: 100%;
  overflow-y: scroll;
}

.is-flipped.card--flipping_card .card-body {
  opacity: 1;
}

.card--flipping_card .card-title {
  color: var(--bs-white);
  text-align: center;
}

.card--flipping_card.card:not(.card--flipping_card--rotate, .card--flipping_card--large) .card-title {
  min-height: calc(20% - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card--flipping_card .card-title .fontawesome-icons {
  margin-inline-end: 0.5rem;
}

.card--flipping_card .js-card-flipper {
  position: absolute;
  margin: 1.25rem;
}

.card--flipping_card--large {
  --bs-aspect-ratio: 60.33%;
  --bs-card-spacer-x: 3.75rem;
}

@media screen and (min-width: 768px) {
  .card--flipping_card--large {
    --bs-card-spacer-x: 11.25rem;
  }
}

.card--flipping_card--rotate {
  --bs-card-border-width: 2px;
  --bs-aspect-ratio: 66.7%;

  height: 420px;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

*:has(> .card--flipping_card--rotate) {
  perspective: 800px;
}

.card--flipping_card--rotate:hover {
  --bs-card-border-color: var(--bs-blue);
  box-shadow: none;
}

.card--flipping_card--rotate .card-body {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  align-items: stretch;
}

.card--flipping_card--rotate .card__flipping-media {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.card--flipping_card--rotate .card__content-wrapper {
  background-color: var(--bs-enable-blue-50);
  --bs-card-spacer-x: 2.5rem;
  --bs-card-spacer-y: 2.5rem 2rem;
}

.card--flipping_card--rotate .card__flipping-media img {
  max-width: 22.5rem;
  max-height: 9.375rem;
}

.card--flipping_card--rotate .card-img-overlay {
  position: static;
  padding-bottom: 0;
}

.card--flipping_card--rotate .card-title {
  color: #444;
  font-weight: 400;
  font-size: 1rem;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0;
  margin-top: 1rem;
}

.card--flipping_card--rotate .card-title i {
  color: var(--bs-enable-ras-dodger-blue);
  font-size: 1.25rem;
  font-weight: normal;
}

.card--flipping_card--rotate .js-card-flipper {
  margin: 1.75rem;
}

.is-flipped.card--flipping_card--rotate {
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

.is-flipped.card--flipping_card--rotate:hover {
  --bs-card-border-color: var(--bs-enable-blue-50);
}

.card--flipping_card--small-media:hover {
  --bs-card-border-color: transparent;
}

.card--flipping_card--small-media .card__flipping-media {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 2.5rem 1rem 1rem;
}

.card--flipping_card--small-media .card-img-overlay {
  position: relative;
  width: auto;
  height: auto;
  padding: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card--flipping_card--small-media .card__flipping-media img {
  max-width: 88px;
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: inherit;
}

.card--flipping_card--small-media .card__flipping-media .js-card-flipper {
  position: relative;
  margin: 0;
  align-self: end;
}

.card--flipping_card--small-media .card-title {
  margin-top: 1rem;
  color: var(--bs-heading-color);
  text-align: start;
  font-weight: 700;
  padding-inline: 0.5rem;
  flex: 1;
  font-size: 1.25rem;
}

.card--media_card {
  --bs-card-spacer-x: 0;
  --bs-card-spacer-y: 1.5rem;
  --bs-card-bg: transparent;
  --card-text-align: start;
  overflow: hidden;
}

.card--media_card--secondary {
  --bs-card-spacer-x: 1.5rem;
  transition: transform 0.2s ease-out;
}

.card--media_card--secondary:not(.card--no-animation):hover {
  transform: scale(1.05);
}

.card--media_card--small-media {
  --bs-card-spacer-y: 2.25rem;
}

.card--media_card--small-media .card__media img {
  max-height: 5rem;
  margin-inline: auto;
}

.card--media_card .card-actions {
  flex-grow: 1;
}

.card--media_card .card-body {
  grid-auto-rows: auto;
}

.card--popup_card {
  --bs-card-bg: var(--bs-white);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 2.5rem 1.25rem;
  --card-icon-size: 6.25rem;
  --card-media-align: center;
  --card-text-align: center;

  transition: transform 0.2s ease-out;
}

.card--popup_card .card-text {
  flex-grow: 1;
}

.card--popup_card .card-body {
  grid-auto-rows: auto;
}

.card--popup_card:not(.card--no-animation):hover {
  transform: scale(1.05);
}

.card--popup_card .card__action {
  margin-block: -0.25rem;
  margin-inline-end: -0.25rem;
}

.card--align--center {
  --card-media-align: center;
}

.card--align--left {
  --card-media-align: start;
}

.card--align--right {
  --card-media-align: end;
}

.card--align--vertical_shift :is(.card__icon, .card__media) {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.no-bg.card {
  background-color: transparent;
}

.card.card--rounded--sm {
  --bs-card-inner-border-radius: var(--bs-border-radius-sm);
  --bs-card-border-radius: var(--bs-border-radius-sm);
}

.card.card--rounded--lg {
  --bs-card-inner-border-radius: var(--bs-border-radius-lg);
  --bs-card-border-radius: var(--bs-border-radius-lg);
}

.card--px-7 {
  --bs-card-spacer-x: 2.5rem;
}

.card-actions {
  margin-block: var(--card-actions-spacer-y, 0px);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  flex-direction: column;
  align-items: end;
}

.card-body {
  display: grid;
  gap: 0.75rem;
  grid-auto-rows: max-content;
  padding-inline: var(--bs-card-spacer-x);
  padding-block: var(--bs-card-spacer-y);
}

.card-header {
  font-size: 1.125rem;
}

.card__icon {
  display: flex;
  line-height: 1;
  width: var(--card-icon-size, 4rem);
  height: var(--card-icon-size, 4rem);
  justify-self: var(--card-media-align);
}

.card__icon--bottom {
  align-self: var(--card-media-align);
  margin-top: 2.5rem;
}

.card__icon :is(.field--name-field-media, .field--name-field-media-image, .field--name-field-media-oembed-video, .field--name-field-media-video-file, video) {
  display: flex;
  line-height: 1;
  width: var(--card-icon-size, 4rem);
  height: var(--card-icon-size, 4rem);
  justify-self: var(--card-media-align);
}

.card--cta_card--small-media .card__icon * {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.node--type-games .card--cta_card--small-media .card__icon * {
  justify-content: end;
}

.card--cta_card--small-media .card-body:has(.card__icon) {
  gap: 1.5rem;
}

.node--type-games .card--cta_card--small-media .card-body:has(.card__icon) {
  gap: 1rem;
}

/* Fix for icon with media. */
.card__icon:has(> .fontawesome-icons + .field--name-field-media) {
  display: flex;
  width: calc(var(--card-icon-size) * 2);
}

.card__icon i {
  font-size: var(--card-icon-size);
  line-height: 1;
}

.card__flipping-media {
  border-radius: var(--bs-card-border-radius);
  overflow: hidden;
}

.card__flipping-media img {
  object-fit: cover;
  height: 100%;
}

.card:not(.card--flipping_card--rotate) .card__flipper-icon {
  transition: transform 0.5s ease-in-out;
  transform: rotate(-90deg);
}

.is-flipped:not(.card--flipping_card--rotate) .card__flipper-icon {
  transform: rotate(0deg);
}

.card__content-wrapper {
  display: flex;
  flex-direction: column;
}

.card-subtitle {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.card-text p:last-child {
  margin-bottom: 0;
}

.card-title {
  margin-top: 0;
}

.card.shadow {
  box-shadow: 0 4px 8px rgba(93, 93, 93, 0.35) !important;
}

.card__bg-icon {
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  width: 96px;
}

.card__bg-icon > * {
  width: 2.5rem;
  line-height: 1;
}

.card-title-highlight {
  --card-title-highlight-1: 18px;
  --card-title-highlight-2: 26px;
  --card-title-highlight-3: 70px;

  margin: 0;
  color: var(--bs-white);
  padding-inline: 5%;
  padding-block: 7vw;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  height: 100%;
  text-align: center;
}

@media (min-width: 565px) {
  .card-title-highlight {
    --card-title-highlight-2: 30px;
  }
}

@media (min-width: 625px) {
  .card-title-highlight {
    --card-title-highlight-1: 22px;
    --card-title-highlight-2: 35px;
    --card-title-highlight-3: 90px;
  }
}

@media (min-width: 992px) {
  .card-title-highlight {
    --card-title-highlight-2: 60px;
    --card-title-highlight-3: 150px;

    padding-block: min(8vw, 120px);
    grid-template-rows: 1fr auto auto 2fr;
  }

  .card-title-highlight__item--3 {
    line-height: 0.66;
  }
}

@media (min-width: 1400px) {
  .card-title-highlight {
    --card-title-highlight-2: 70px;
    --card-title-highlight-3: 172px;
  }
}

.card-title-highlight__item--1 {
  font-size: var(--card-title-highlight-1);
}

.card-title-highlight__item--2 {
  align-self: end;
  font-size: var(--card-title-highlight-2);
}

.card-title-highlight__item--3 {
  align-self: start;
  font-size: var(--card-title-highlight-3);
  line-height: 0.86;
}