/* Contenedor para embed de Instagram (usa clase específica para no romper Bootstrap) */
.ig-container {
    position: relative;
    overflow: hidden;
    height: 462px; /* Altura deseada después del recorte */
}

/* Contenedor para ocultar la parte superior */
.ocultar-arriba {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 54px; /* Altura que se va a ocultar */
    background-color: black; /* Color del fondo para ocultar */
    z-index: 1; /* Asegura que esté sobre el contenido principal */
}

.instagram-media {
    background: #FFF;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);
    max-width: 200px;
    min-width: 326px;
    padding: 0;
    width: 99.375%;
    width: -webkit-calc(100% - 2px);
    width: calc(100% - 2px);
    padding-top: 54px;
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total del elemento */
    z-index: 2; /* Asegura que esté sobre el contenedor de ocultar */
}

/* Estilos para pantallas más pequeñas (por ejemplo, menos de 768px de ancho) */
@media (max-width: 768px) {
    .ig-container {
        height: 462px; /* Ajusta la altura automáticamente para pantallas más pequeñas */
    }

    .ocultar-arriba {
        height: 54px; /* Oculta el contenedor para pantallas más pequeñas */
    }

    .instagram-media {
        max-width: 100%; /* Ajusta el ancho máximo para pantallas más pequeñas */
        padding-top: 0; /* Elimina el espacio superior en pantallas más pequeñas */
    }
}