@media (max-width: 860px) { 
    .events-wrapper {
        width: 100%;
        margin-left: 0px;

    }

    .events-wrapper .other-pages-tittle {
        margin-left: 30%;
    }
}

@media (max-width: 600px) { 

    .event-calendar-wrapper {
        padding: 2vw;
        width: 100%;
        height: 100vh;
    }

    .tittle-event p {
        font-size: 4vw;
    }

    .head-events {
        justify-content: flex-start;
        flex-flow: column;
        width: 100%;
        align-items: center;
        height: auto;
    }
    .type-events-wrapper ul {
        padding: 2vw;
        width: 100%;
        gap: 2vw;
    }

    .type-events-wrapper ul li {
        font-size: 3vw;
    }
}