/**** landing sampler***/
.image-row {
	display: flex;
	flex-wrap: wrap;
	gap: 3em;
	justify-content: center;
  padding-bottom: 2em;
}
.image-item{
	cursor: pointer;
	flex: 1;
	min-width: 60px;
	max-width: 120px;
}
.image-item img {
	width: 100%;
	object-fit: cover;
	display: block;
	height: 100%;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}
.image-item.active img {
	border: 2px solid;
	border-radius: 50%;
}
.preview {
  display: flex;
  gap: 1em;
  align-items: center;   /* centra verticalmente la columna respecto a la img */
}
.preview > img {
  flex: 0 0 70%;   /* ocupa 70% fijo */
  max-width: 70%;
  height: auto;
  object-fit: contain;
}
.preview .image-row {
  display: flex;
  flex-direction: column; 
  gap: 1em;
  flex: 0 0 30%;          
  max-width: 30%;
  justify-content: center; /* centra verticalmente las miniaturas */
  align-items: center;
}
.image-item {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
}
.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .preview {
    flex-direction: column; /* apilados: img arriba, fila abajo */
    align-items: center;
  }
  .preview > img {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .preview .image-row {
    flex-direction: row;   
    justify-content: center;
    gap: 2em;
    width: 100%;
    max-width: 100%;
  }
  .image-item {
    width: 80px;
    height: 80px;
  }
}