/* Imagens — proporções e responsividade global */

img,
video {
  max-width: 100%;
  height: auto;
}

.media-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-ratio {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-2, #f3f1ec);
}

.media-ratio > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-ratio--square { aspect-ratio: 1 / 1; }
.media-ratio--4x5 { aspect-ratio: 4 / 5; }
.media-ratio--16x10 { aspect-ratio: 16 / 10; }
.media-ratio--21x9 { aspect-ratio: 21 / 9; }

.card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f7f5f1;
}

.card__img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card {
  min-width: 0;
  height: 100%;
}

.grid > .card,
.row > .card {
  min-width: 0;
}