*{
    margin: 0;
    padding: 0;
    font: arial;
}

/* Estilos para el encabezado */
header {
    display: flex;
    justify-content: space-between; /* Alinea los elementos a los extremos (izquierda y derecha) del contenedor */
    align-items: center; /* Alinea verticalmente en el centro */
    padding: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* Estilos para el título */
#titulo {
    flex: 1; /* Ocupa todo el espacio disponible restante */
    text-align: center; /* Centra el texto horizontalmente */
   
    
}

/* Estilos para el h2 dentro del título */
#titulo h2 {
    margin-left: 270px; /* Elimina el margen por defecto del h2 */
}

/* Estilos para sessiones-listado */
#sessiones-listado {
 
    text-align: right; /* Alinea el texto hacia la derecha dentro del contenedor */
    padding: 5px; /* Agrega un espacio entre el texto y el borde del contenedor */
    width: 260px; /* Ancho deseado */
}




#eventos-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
    padding: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}

.evento{
    padding: 30px;
    margin: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    border: 1px solid #ddd;
    max-width: 600px;
    max-height: 600px;
}

 


img{
    max-width: 200px;
    max-height: 200px;
 
}


@media (max-width: 768px) {
    #eventos-container {
        display: inline-block; /* Cambia la propiedad display a inline-block en pantallas más pequeñas */
        width: auto; /* Deja que los divs ocupen el ancho disponible */
        margin: 5px;
    }

    #titulo {
          /* Ocupa todo el espacio disponible restante */
        text-align: center; /* Centra el texto horizontalmente */
       
        
    }
    
    /* Estilos para el h2 dentro del título */
    #titulo h2 {
        margin-left: 135px; /* Elimina el margen por defecto del h2 */
    }
}