.card,
.paragraph--view-mode--card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
}

@media screen and (min-width: 768px) {
  .card--card-extended {
    flex-direction: row;
  }
}

@media screen and (min-width: 960px) {
  .card--teaser {
    flex-direction: row;
  }
}

.card--has-image {
  border-radius: var(--border-radius);
}

.card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: var(--spacing);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
}

.card--has-image .card__inner {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.card--has-image.card--teaser .card__inner,
.card--has-image.card--card-extended .card__inner {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

@media screen and (min-width: 768px) {
  .card--card-extended .card__image {
    width: 75%;
  }

  .card--card-extended .card__inner {
    width: 25%;
  }
}

.card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card__inner > * + * {
  margin-top: var(--spacing);
}
.card__content > * {
  margin-bottom: var(--spacing);
}
.card__content > *:last-child {
  margin-bottom: 0;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing);
}

.card__meta-item--archived {
  display: inline-block;
  margin-left: auto;
  padding: var(--spacing-xsmall) var(--spacing);
  background-color: var(--color-grey-light-a);
}

.card__meta-item--award {
  margin-left: auto;
}
.card__meta-item--award .slimline-icon svg path {
  fill: var(--color-secondary-a);
}

.card__meta-item--flag {
  margin-left: auto;
  border: 1px solid #CCC;
}

.card__meta-item--video {
  padding: var(--spacing-xsmall) var(--spacing);
  background-color: var(--color-secondary-b);
}

.card a {
  color: var(--color-primary-b);
}

.card__title {
  font-size: var(--font-size-responsive-xxx-large);
}
.card__title a {
  text-decoration: none;
  color: var(--color-link);
}

.card__title a:focus,
.card__title a:hover {
  text-decoration: underline;
}

.card__image {
  position: relative;
}

.card__image > a {
  display: block;
}

.card__image img {
  width: 100%;
  object-fit: cover;
}

.card__image--rounded {
  width: 200px;
  height: 200px;
  margin-right: auto;
  margin-left: auto;
}
.card__image--rounded img {
  border-radius: var(--border-radius-full);
}
.card__image--rounded.card__image--icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card__image--rounded .card__image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-secondary-b);
  width: 200px;
  height: 200px;
  border-radius: 999rem;
}
.card__image--rounded .card__image-placeholder svg {
  width: 80px;
  height: 80px;
}
.card__image--rounded .card__image-placeholder svg path {
  fill: var(--color-primary);
}

@media screen and (min-width: 768px) {
  .card--card-extended .card__image *:not(.contextual),
  .card--teaser .card__image *:not(.contextual) {
    height: 100%; /* So that images fill the height of the card to align with content beside them */
  }
}

.card__body {
  color: var(--color-black);
}

.card__upcoming {
  position: absolute;
  z-index: 1;
  top: var(--spacing);
  right: var(--spacing);
  padding: var(--spacing-xsmall) var(--spacing-small);
  border: var(--border);
  border-color: var(--color-white);
  border-radius: var(--border-radius);
  background-color: var(--color-primary-c);
  color: var(--color-text);
}

.card__categories {
  margin-top: auto;
}

.card__categories a {
  display: inline-block;
  padding: var(--spacing-xxsmall) var(--spacing-small);
  text-decoration: none;
  color: var(--color-black);
  border: var(--border);
  border-color: var(--color-secondary-b);
  border-radius: var(--border-radius-full);
  background-color: var(--color-secondary-b);
  font-size: var(--font-size-small-a);
}
.card__categories a:focus,
.card__categories a:hover {
  text-decoration: underline;
  color: var(--color-primary);
  background-color: var(--color-white);
}

.card__categories > .field__items,
.card__people .paragraph--type--member > .field__items,
.card__people > .field__items,
.card__people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing);
  align-items: center;
}

.card__and-more {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing);
}

.card__people .card__and-more {
  margin-bottom: 0;
}

.card__people-title {
  width: 100%;
  margin-bottom: 0;
  color: var(--color-grey-light);
  font-size: var(--font-size-responsive-medium);
  font-weight: 400;
}

.card__people-sections .card__people-title {
  font-weight: bold;
}

.card__people-sections .card__and-more {
  margin-bottom: 0;
}

.card__meta-item--country,
.card__meta-item--date {
  display: flex;
  gap: var(--spacing-xsmall);
  align-items: center;
}

.card__parent-topic {
  display: flex;
  gap: var(--spacing-small);
  flex-wrap: wrap;
  align-items: center;
}

.card__parent-topic-label a {
  display: inline-block;
  padding: var(--spacing-small);
  color: var(--color-black);
  border-radius: var(--border-radius);
  background-color: var(--color-secondary-b);
}

.card.profile .card__title {
  text-align: center;
}

.card.profile .card__categories {
  color: var(--color-primary-b);
}

.card.profile,
.card.profile-card--paragraph {
  text-align: center;
}

.card.profile .card__categories > .field__items,
.card.profile-card--paragraph .card__categories > .field__items {
  justify-content: center;
}

.card--sponsor {
  justify-content: center;
}

.card--sponsor .card__inner {
  display: none;
}

/* Specific styling for Institution cards */
.card--institution .card__title {
  text-align: center;
}

.card--institution .card__image + .card__inner .card__meta {
  border-top: var(--border-light);
  padding-top: var(--spacing);
}

.card--institution .card__image {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 200px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0; /* so the aspect ratio is respected */
}
.card--institution .card__image img {
  padding: var(--spacing-large);
  max-height: 200px;
  object-fit: contain;
}

.card__meta-item--date {
  color: var(--color-black);
}

.layout--bg-1 .embedded-content .card,
.layout--bg-5 .embedded-content .card,
.view--bg-5 .card {
  box-shadow: var(--box-shadow);
}

.view-topic-with-parents .card__parent-topic {
  display: none;
}

.card--video .card__people > div {
  width: 45%;
}

.card--video .card__people .field__items {
  width: 100%;
}

.card .profile-name {
  align-items: center;
}

.card.card--series .card__meta-item--flag {
  position: absolute;
  top: 0;
  right: 0;
}

.card.card--series .card__meta-item--flag img {
  height: auto;
  width: auto;
}

.card__series-meta .label {
  color: var(--color-primary);
  font-weight: bold;
}