.himno {
    text-align: center;
    position: relative;
    margin-top: 30px;  /* Añade algo de espacio arriba para el audio */
}

.himno img {
    width: 60%;
    max-width: 100%;  /* Permite que la imagen se ajuste al 100% del contenedor */
    height: auto;     /* Mantiene la relación de aspecto */
}

.audio-himno {
    position: absolute;
    top: 10px;        /* Distancia desde la parte superior */
    left: 50%;        /* Centrado horizontal */
    transform: translateX(-50%);
    z-index: 10;
    width: 80%;       /* Tamaño flexible */
    max-width: 400px; /* Tamaño máximo para que no se expanda demasiado */
    background: #0fa759;
    padding: 10px;
    border-radius: 20px;
}

@media (max-width: 700px) {
    .himno img {
        width: 80%;
    }

    .audio-himno {
        width: 90%;  /* Ajuste el tamaño del audio en pantallas más pequeñas */
        max-width: 350px; /* Tamaño máximo para el reproductor en pantallas pequeñas */
    }
}