/* Estilos generales */
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Media queries para diseño responsivo */
@media (max-width: 768px) {
    .iframe-container {
        padding-bottom: 1100px; /* Proporción 4:3 */
    }
}

@media (max-width: 480px) {
    .iframe-container {
        padding-bottom: 1100px; /* Proporción 1:1 */
    }
}