/* ==========================================================================
	Card Item
============================================================================= */
.card-item {
  color: var(--color);
  background-color: var(--background-color);
  border-radius: 3px;
  border-radius: 0.1875rem;
  container-name: --card;
  container-type: inline-size;
}

.card-item__inner {
  display: grid;
  gap: 20px;
  gap: 1.25rem;
  grid-template-columns: 100%;
  padding: clamp(16px, -9.7777777778px + 8.8888888889cqi, 24px);
  padding: clamp(1rem, -0.61111rem + 8.8888888889cqi, 1.5rem);
}

.card-item__image {
  block-size: auto;
  inline-size: 100%;
}

.card-item__body {
  display: grid;
  align-items: start;
  gap: 10px;
  gap: 0.625rem;
  grid-template-columns: 100%;
}
.card-group__item--wide :where(.card-item__body) {
  max-inline-size: 700px;
  max-inline-size: 43.75rem;
}

.card-item__title {
  color: var(--title-color);
  font-size: clamp(24px, 12.8695652174px + 3.4782608696cqi, 44px);
  font-size: clamp(1.5rem, 0.80435rem + 3.4782608696cqi, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
}

.card-item__description {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.3;
}
@container (min-width: 400px) {
  .card-item__description {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.7777777778;
  }
}

.card-item__actions {
  font-size: 16px;
  font-size: 1rem;
  margin-block-start: 6px;
  margin-block-start: 0.375rem;
}
@container (min-width: 400px) {
  .card-item__actions {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
.card-group__item--is-featured .card-item__actions :where(.button-text), .card-group__carousel-item--is-featured .card-item__actions :where(.button-text) {
  --color: #fff;
}
.card-group__item--is-featured .card-item__actions :where(.button-text):focus-visible, .card-group__carousel-item--is-featured .card-item__actions :where(.button-text):focus-visible {
  --color: #001835;
}
@media (hover: hover) {
  .card-group__item--is-featured .card-item__actions :where(.button-text):hover, .card-group__carousel-item--is-featured .card-item__actions :where(.button-text):hover {
    --color: #001835;
  }
}
/*# sourceMappingURL=card-item.css.map */