/* Contenedor principal para la publicación */
.publicacion-detalle {
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* Estilo para la imagen principal, que está fuera de la cuadrícula */
.imagen-principal-muestra-despliegue-publicacion-home {
    margin-bottom: 20px;
    max-width: 600px; /* Limita el ancho máximo a 600px */
    max-height: 400px; /* Limita la altura máxima a 400px */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    overflow: hidden; /* Oculta cualquier parte de la imagen que sobrepase el contenedor */
}

.imagen-principal-muestra-despliegue-publicacion-home img {
    width: 100%; /* Ajusta la imagen al ancho del contenedor */
    height: 100%; /* Ajusta la imagen a la altura del contenedor */
    object-fit: cover; /* Recorta la imagen para llenar el contenedor */
    display: block; /* Elimina el espacio debajo de la imagen */
}

/* Contenedor para las imágenes y videos */
.imagenes-videos-muestra-despliegue-publicacion-home {
    margin-top: 20px;
}

/* Estilo para la cuadrícula de imágenes y videos */
.imagenes-muestra-despliegue-publicacion-home,
.videos-muestra-despliegue-publicacion-home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Ajusta el tamaño mínimo a 200px */
    gap: 10px; /* Espacio entre las imágenes y videos */
}





/* Estilo para cada imagen en la cuadrícula */
.imagen-muestra-despliegue-publicacion-home img,
.video-muestra-despliegue-publicacion-home video {
    width: 100%;
    height: 200px; /* Altura fija */
    object-fit: cover; /* Ajusta la imagen/video para cubrir completamente el área */
    display: block;
}

/* Estilo para los títulos y descripciones */
.imagen-muestra-despliegue-publicacion-home p,
.video-muestra-despliegue-publicacion-home p {
    margin: 5px 0;
    text-align: center;
}


.publicacion-detalle p.correo-electronico-publicacion-despliegue-home,
.publicacion-detalle p.ambito-publicacion-despliegue-home {
    color: gray;
}


.imagen-muestra-despliegue-publicacion-home img,
.video-muestra-despliegue-publicacion-home video {
    cursor: pointer;
}


/* Para pantallas medianas (tabletas y pantallas similares) */
@media (min-width: 768px) {
    .imagenes-muestra-despliegue-publicacion-home {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas medianas */
    }
}

/* Para pantallas grandes (escritorios y pantallas más grandes) */
@media (min-width: 1024px) {
    .imagenes-muestra-despliegue-publicacion-home {
        grid-template-columns: repeat(4, 1fr); /* 4 columnas en pantallas grandes */
    }
}

/* Para pantallas muy grandes */
@media (min-width: 1440px) {
    .imagenes-muestra-despliegue-publicacion-home {
        grid-template-columns: repeat(5, 1fr); /* 5 columnas en pantallas muy grandes */
    }
}






.card-media-grid-publicacion-en-ambito {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    max-height: 300px; /* Ajusta la altura según tu diseño */
}

.card-media-grid-publicacion-en-ambito video {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover; /* Ajusta el video sin deformarlo */
}