:root {
  --img-h-card:180px;
  --grid-col-cads:1fr;
  --color-disabled:var(--color-outline) ;
}

.cards-container {
  display: grid;
  grid-template-columns: var(--grid-col-cads);
  gap: 16px;
}

.card-container {
  border: 1px solid var(--color-outline);
  border-radius: 12px;
  overflow: hidden;
  min-height: 180px;
}
.card-container.disabled {
  color: var(--color-disabled);
  border-color: var(--color-disabled);
  fill: var(--color-disabled);
}
.card-container.disabled img {
  filter: grayscale(1);
}
.card-container > header:has(img) {
  min-height: var(--img-h-card);
  max-height: var(--img-h-card);
}
.card-container > header img {
  object-fit: cover;
  min-width: 100%;
}
.card-container > header:not(:has(img)), .card-container main, .card-container footer {
  padding: 0 16px;
}

@media screen and (min-width: 960px) {
  :root {
    --img-h-card:240px;
    --grid-col-cads:repeat(2, 1fr);
  }
}
@media screen and (min-width: 1600px) {
  :root {
    --img-h-card:280px;
    --grid-col-cads:repeat(3, 1fr);
  }
}

/*# sourceMappingURL=card.css.map */