/* CARD BLOCK */

.card {
  --padding: var(--space-16);
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--padding);
  background-color: var(--color-background);
  border-radius: var(--rounded-2xl);
  row-gap: var(--row-gap);
}

.card.new::before {
  content: "" / "Nouvelles modifications";
  color: transparent;
  position: relative;
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--rounded-full);
  outline: .1875rem solid var(--color-white);
  background-color: var(--color-primary-100);
  overflow: hidden;
  position: absolute;
  top: 3.125rem;
  right: 0.875rem;
  z-index: 1;
}

.card__title {
  position: initial;
}
.card__title > a {
  font: inherit;
  color: currentColor;
  word-break: break-word;
}

.card__meta {
  font-size: var(--text-sm);
  margin-bottom: var(--space-16);
}

.card__images {
  display: grid;
  position: relative;
  width: 100%;
  border: 4px solid var(--color-grey-50);
  border-radius: var(--rounded-xl);
  overflow: hidden;
  margin-bottom: var(--space-16);
  aspect-ratio: 408/220;
  background-color: var(--color-grey-50);
}
.card__images[data-icon]::before {
  --icon: var(--icon-document);
  --icon-size: 4.5rem;
  --icon-color: var(--color-grey-300);
  position: absolute;
  left: 50%;
  top: 47.5%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.card__images[data-count]:not([data-count="1"]) {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 50%);
  gap: 4px;
}
.card__images[data-count] > :first-child {
  grid-row-end: span 2;
}
.card__images[data-count="2"] > :last-child {
  grid-row-end: span 2;
}
.card__images > img {
  height: 100%;
  width: 100%;
  background-color: var(--color-white);
}
.card__images > img[src$='.svg'],
.card__images > img[src$='.png'] {
  background-color: var(--color-white);
}
.card__images[data-plus]::after {
  content: '+'attr(data-plus);
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  background-color: var(--color-black-70);
  color: var(--color-white);
  border-radius: var(--rounded-lg);
  padding: .4rem var(--space-12) var(--space-8);
  font-size: var(--text-sm);
  font-weight: 500;
  height: 2.25rem; /* 36px */
}

.card--cta {
  border: 2px solid transparent;
  cursor: pointer;
  align-items: center;
  text-align: center;
}
.card--cta svg {
  color: var(--color-grey-800);
}
.card--cta:hover {
  background-color: var(--color-primary-10);
  border-color: var(--color-primary-10);
}
.card--cta:hover svg,
.card--cta:hover .text-lg {
  color: var(--color-primary-100);
}

.card > footer a {
  position: relative;
  z-index: 2;
}

.card.physical-sample header {
  background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-white);
}
.card.physical-sample h3 {
  position: static;
}
