.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    .header, .main, .footer {
        flex-direction: column;
        text-align: center;
    }

    .header img {
        width: 100%;
    }
}

/* Estilos para pantallas medianas (tabletas) */
@media (min-width: 601px) and (max-width: 1024px) {
    .container {
        padding: 15px;
    }

    .header, .main, .footer {
        flex-direction: row;
        text-align: left;
    }

    .header img {
        width: 50%;
    }
}

/* Estilos para pantallas grandes (escritorios) */
@media (min-width: 1025px) {
    .container {
        padding: 20px;
    }

    .header, .main, .footer {
        flex-direction: row;
        text-align: left;
    }

    .header img {
        width: 25%;
    }
}