.card {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: card;
  overflow: hidden;
  border-radius: var(--md);
}
.card .card-footer {
  padding: var(--md) var(--md) var(--md) var(--md);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--md);
  flex-direction: row;
  justify-content: space-between;
}
@container card (width <= 360px) {
  .card .card-footer {
    flex-direction: column-reverse;
  }
}
@media screen and (width < 640px) {
  .card .card-footer {
    flex-direction: column-reverse;
  }
}
.card .card-footer .footer-top {
  width: 190px;
}
@media screen and (width < 640px) {
  .card .card-footer .footer-top {
    width: 100%;
  }
}
@container card (width <= 360px) {
  .card .card-footer .footer-top {
    width: 100%;
  }
}
.card .card-footer .footer-top .progress-bar {
  width: 100%;
}
@media screen and (width < 640px) {
  .card .card-footer .footer-top .progress-bar {
    max-width: unset;
  }
}
@container card (width <= 360px) {
  .card .card-footer .footer-top .progress-bar {
    max-width: unset;
  }
}
.card .card-footer .footer-bottom {
  display: flex;
  gap: var(--xs);
}
@media screen and (width < 640px) {
  .card .card-footer .footer-bottom {
    flex-direction: column;
  }
}
@media screen and (width < 640px) {
  .card .card-footer .footer-bottom .button {
    width: 100%;
  }
}
@container card (width <= 360px) {
  .card .card-footer .footer-bottom .button {
    width: 100%;
  }
}

.card-wrp-content {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--md) var(--md) 0 var(--md);
}
.card-wrp-content .card--body {
  font-size: var(--font-size-md);
  line-height: normal;
  margin-bottom: var(--xs);
}
.card-wrp-content .card--body p {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-wrp-content .card--body p:last-child {
  margin-bottom: 0;
}
.card-wrp-content .card--title {
  margin-bottom: 0;
}
.card-wrp-content .card--title a {
  color: inherit;
}
.card-wrp-content .card--link:hover,
.card-wrp-content .card--link:focus {
  text-decoration: underline;
}

.card-light {
  background: var(--Neutral-Light-Background);
  background: var(--Primary-Light-Gradient, linear-gradient(180deg, #ECF5F4 0%, #FFFFFF 100%));
}
.card-light .footer-bottom .button--variant-line-bg {
  background: transparent;
  color: var(--Primary-Light-Highlight);
}
.card-light .footer-bottom .button--variant-line-bg:hover {
  background: rgba(1, 131, 116, 0.1411764706);
}

.card-dark {
  background: var(--Primary-Light-Contrast);
}
.card-dark .card-header {
  padding: var(--md) var(--md) 0 var(--md);
}
.card-dark .card-header img {
  overflow: hidden;
  border-radius: var(--md) var(--md) 0 0;
}
.card-dark .card-content {
  color: var(--Texts-light);
}
.card-dark .card-content .body-block {
  color: var(--Texts-light);
  gap: 0;
}
.card-dark .card-footer {
  color: var(--Texts-light);
}

.card-country-map {
  background: var(--Primary-Light-Foreground);
}
.card-country-map.direction-horizontal .card-wrp-content {
  flex: 1;
  flex-basis: 0%;
}
.card-country-map .card-header {
  padding: var(--md) var(--md) 0 var(--md);
}
.card-country-map .card-header img {
  overflow: hidden;
  border-radius: var(--md) var(--md) 0 0;
}
.card-country-map .card-content {
  color: var(--Texts-light);
}
.card-country-map .card-content .body-block {
  color: var(--Texts-light);
}
.card-country-map .card-footer {
  color: var(--Primary-Light-Contrast);
}
.card-country-map .card-footer .button {
  background: var(--Pin-Map-Color);
  color: var(--Primary-Light-Contrast);
  border-color: var(--Pin-Map-Color);
}
.card-country-map .card-footer .button:hover {
  background: var(--Primary-Light-Contrast);
  border-color: var(--Primary-Light-Contrast);
  color: var(--Texts-light);
}
.card-country-map .card-footer .button--variant-line-bg {
  background: transparent;
  color: var(--Pin-Map-Color);
}
.card-country-map .card-footer .button--variant-line-bg:hover {
  background: var(--Primary-Light-Contrast);
  border-color: var(--Primary-Light-Contrast);
  color: var(--Texts-light);
}

.card-high-contrast {
  background: unset;
  background: var(--Primary-Light-Gradient, linear-gradient(180deg, #ECF5F4 0%, #FFFFFF 100%));
}
.card-high-contrast .card-header {
  padding: 0 var(--md) 0 var(--md);
}
.card-high-contrast .card-header img {
  overflow: hidden;
  border-radius: var(--sm) var(--sm) 0 0;
}
.card-high-contrast .card-wrp-content .card-content {
  color: var(--Primary-Light-Contrast);
}
.card-high-contrast .card-wrp-content .card-content .body-block {
  color: var(--Primary-Light-Contrast);
}
.card-high-contrast .footer-bottom .button--variant-line-bg {
  background: transparent;
  color: var(--Primary-Light-Highlight);
}
.card-high-contrast .footer-bottom .button--variant-line-bg:hover {
  background: rgba(1, 131, 116, 0.1411764706);
}
.card-high-contrast .card-footer .progress-bar .progress-bar-content .progress-bar-fill {
  background: var(--Primary-Light-Contrast);
}

.direction-vertical .wrp-header-content {
  flex-direction: column;
}

.direction-vertical-reverse .wrp-header-content {
  display: flex;
  flex-direction: column-reverse;
}

.direction-horizontal-reverse .wrp-header-content,
.direction-horizontal .wrp-header-content {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--md);
  padding: var(--md) var(--md) 0 var(--md);
}
@container card (width <= 360px) {
  .direction-horizontal-reverse .wrp-header-content,
  .direction-horizontal .wrp-header-content {
    flex-direction: column;
  }
}
.direction-horizontal-reverse .card-header,
.direction-horizontal .card-header {
  flex-basis: 190px;
}
@media screen and (width < 640px) {
  .direction-horizontal-reverse .card-header,
  .direction-horizontal .card-header {
    flex: 1;
  }
}
.direction-horizontal-reverse .card-header .image,
.direction-horizontal .card-header .image {
  aspect-ratio: 1/1;
}
.direction-horizontal-reverse .card-header .image img,
.direction-horizontal .card-header .image img {
  overflow: hidden;
  border-radius: var(--sm);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.direction-horizontal-reverse .card-wrp-content,
.direction-horizontal .card-wrp-content {
  flex: 1;
  flex-basis: 160px;
}
@media screen and (width < 640px) {
  .direction-horizontal-reverse .card-wrp-content,
  .direction-horizontal .card-wrp-content {
    flex-basis: unset;
  }
}
.direction-horizontal-reverse .card-wrp-content,
.direction-horizontal-reverse .card-header,
.direction-horizontal .card-wrp-content,
.direction-horizontal .card-header {
  padding: 0;
}

.direction-horizontal-reverse .wrp-header-content {
  flex-direction: row;
}
@container card (width <= 360px) {
  .direction-horizontal-reverse .wrp-header-content {
    flex-direction: column;
  }
}