#eventsPage {
    background: #FDFAF7;
}

#eventsPage * {
    color: #171717;
}

.section-container {
    padding: 40px 20px;
    max-width: 1520px;
    margin: 0 auto;
}

.title-container {
    margin-bottom: 30px;
    padding-bottom: 40px;
    position: relative;
}

.title-container:after {
    position: absolute;
    content: " ";
    background: #8f6900;
    height: 1px;
    width: 150px;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
}

#eventsPage .title-container h1 {
    text-align: center;
    margin-bottom: 10px;
    color: #8f6900;
}

.title-container p {
    text-align: center;
    margin: 0;
}

#events h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #8f6900;
}

#events .articles-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#events article {
    background: white;
}

#events article img {
    height: 200px;
}

#events article .content {
    padding: 80px 20px 30px 20px;
    position: relative;
}

#events article .type {
    position: absolute;
    left: 0;
    top: 30px;
    background: black;
    color: white;
    text-transform: uppercase;
    padding: 10px 20px;
    line-height: 1;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 0.25);
}

#events article .date {
    display: flex;
    gap: 5px;
}

#events article .date span {
    line-height: 1;
}

#events article .date .hours {
    display: flex;
    gap: 5px;
    text-transform: uppercase;
}

#events article h3 {
    margin: 20px 0 10px 0;
    color: #8f6900;
}

#events article ul {
    margin: 0;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-wrap: initial;
}

#events article .location {
    margin-top: 20px;
}

#events article .location h4 {
    margin-bottom: 0;
    line-height: 1;
    color: #8f6900;
    font-size: 22px;
}

#events article .location p {
    margin: 0;
}

#events article a,
#events article .free-event {
    line-height: 1;
    display: block;
    width: max-content;
    padding: 10px 20px;
    background: #8f6900;
    color: white;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 0.25);
    border: 1px solid #8f6900;
}

#events article a:hover {
    background: white;
    color: #8f6900;
}

#events article .free-event {
    background: white;
    color: #8f6900;
    box-shadow: unset;
    margin: 0;
}

#events .booking {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 20px;
}


    /* Tablette version */
    @media screen and (min-width: 768px) {
        #eventsPage p,
        #eventsPage span,
        #eventsPage li,
        #eventsPage a {
            font-size: 15px;
        }

        .section-container {
            padding: 60px 40px;
        }

        .title-container {
            margin-bottom: 50px;
            padding-bottom: 50px;
        }

        #eventsPage .title-container h1 {
            margin-bottom: 15px;
        }

        #events h2 {
            margin-bottom: 30px;
        }

        #events .articles-container {
            gap: 50px;
        }

        #events article img {
            height: 400px;
        }

        #events article .content {
            padding: 90px 25px 25px 25px;
        }

        #events article .type {
            padding: 10px 25px;
        }

        #events article h3 {
            font-size: 28px;
        }

        #events article .location {
            margin-top: 25px;
        }

        #events article .location h4 {
            font-size: 26px;
        }
    }


        /* Desktop version */
        @media screen and (min-width: 992px) {
            #eventsPage p,
            #eventsPage span,
            #eventsPage li,
            #eventsPage a {
                font-size: 16px;
            }

            .section-container {
                padding: 80px 60px;
            }

            .title-container {
                margin-bottom: 70px;
                padding-bottom: 60px;
            }

            #eventsPage .title-container h1 {
                margin-bottom: 20px;
            }

            #events h2 {
                margin-bottom: 40px;
            }

            #events .articles-container {
                gap: 70px;
            }

            #events article {
                display: flex;
                flex-direction: row-reverse;
            }

            #events article figure {
                width: 50%;
            }

            #events article .content {
                padding: 100px 30px 30px 30px;
            }

            #events article .type {
                padding: 10px 30px;
            }

            #events article h3 {
                font-size: 32px;
            }

            #events article img {
                height: 100%;
            }

            #events article .content {
                width: 50%;
            }

            #events article .location h4 {
                font-size: 30px;
            }
        }