/* Base styles */
.responsive-iframe-container {
    position: relative;
    width: 100%; /* Full width on all devices */
    padding-top: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
}

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

/* Styles for screens wider than 600px (e.g., tablets and desktops) */
@media (min-width: 600px) {
    .responsive-iframe-container {
        padding-top: 45%; /* Aspect ratio about 16:9, but less height relative to width */
    }
}

/* Styles for screens smaller than 600px (e.g., smartphones) */
@media (max-width: 599px) {
    .responsive-iframe-container {
        padding-top: 275%; /* A taller aspect ratio for narrow screens */
    }
}