/* Thumbnail area: fixed height, independent of image aspect ratio */
.card--media .card__media{
  height: 170px;            /* tweak: 140–220px beroende på känsla */
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  margin-bottom: 10px;
}

.card--media .card__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* fyller rutan och croppar överskott */
  object-position: center;  /* ändra till 'center top' om du vill se mer av toppen */
}

/* Featured cards: consistent thumbnails regardless of image aspect ratio */
.grid--cards{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card--media .card__media{
  height: 180px;              /* justera 160–220 om du vill */
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Crop nicely */
.card--media .card__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* fills the box, crops overflow */
  object-position: center;
}

/* If image missing: show a subtle placeholder */
.card--media .card__media.is-missing{
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
}
.card--media .card__media.is-missing::after{
  content: "No preview";
  font-size: 0.9rem;
  opacity: 0.55;
}

/* Force: Featured cards with fixed thumbnail height */
.grid.grid--cards{
  display:grid !important;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* fixed thumbnail box (independent of image aspect ratio) */
.card.card--media .card__media{
  height: 180px !important;      /* ändra 160–220 */
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.06);
}

/* the important part: image must fill the box */
.card.card--media .card__media > img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;              /* crop to fill */
  object-position: center;
}