h1{
    width: max-content;
    font-size: 94px;
    line-height: 90px;
    letter-spacing: 1px;
    margin:4rem;
}

h2{
    font-size:48px;
    line-height:52px;
    margin-bottom: 1rem;
}

.recent-events{
}

.recent-event-container{

    margin:4rem 0;

    >h3{
        max-width:80%;
        font-size:46px;
        line-height:50px;
        margin-bottom: 2rem;
    }

    >div{
        display:flex;
        gap:1rem;

        img{
            max-width: 40%;
            width: -webkit-fill-available;
            border-radius: 40px;
            min-height: -webkit-fill-available;
            object-fit: cover;
        }

        .text-frame{
            border:solid 1px gray;
            border-radius:40px;
            /*background-color:rgb(8,8,8);*/
            display:flex;
            width:-webkit-fill-available;

            >div{
                margin:auto;
                width:85%;

                >p:nth-child(1){
                    color:gray;
                    margin-top:0;
                }
            }
        }
    }
}



.event-container{

    margin:2rem 0;
    border:solid 1px gray;
    border-radius:40px;
    /*background-color:rgb(8,8,8);*/
    padding: 1.5rem 2rem;

    .event-header{
        display:flex;
        flex-direction:row;
        justify-content:space-between;

        >h3{
            font-size: 36px;
            line-height: 40px;
            margin: 0;
        }

        >p{
            color:gray;
            width:max-content;
            text-wrap:nowrap;
            margin:0;
            min-width: fit-content;
        }

    }
}


#events-screen{
    height:30rem;
    overflow-y:clip;
    transition:1s;
}

#events-track{
    transition:1s;
}


nav.events-pagination{
display: flex;
    ul{
        display:flex;
        padding:0;
        margin:2rem auto;

        li{
            list-style: none;

            >button{
                border:solid 1px gray;
                border-radius:8px;
                width:48px;
                height:48px;
                background-color:transparent;
                margin-inline:0.5rem;
                display:flex;

                >p{
                    margin:auto;
                }
            }

            >button.pagination-button.active{
                background:white;
                >p{
                    color:black !important;
                }
            }

            >button#backward-button,button#forward-button{
                /*background:white;
                >p{
                    color:black !important;
                }*/
            }
        }
    }
}


@media only screen and (max-width: 1280px){
    .recent-event-container p{
        /*font-size: 18px;
        line-height: 20px;*/
    }
}


@media only screen and (max-width: 1024px){
    h1{
        font-size: 48px;
        line-height: 48px;
    }

    h2{
        font-size:32px;
        line-height:36px;
    }

    .section div.text-frame{
        border-radius:20px;
    }

    .recent-event-container p{
        font-size: 16px;
        line-height: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        margin-block-start: 0.5rem;
        margin-block-end: 0.5rem;
    }
    .recent-event-container div img{border-radius:20px;}

    .event-container p{
        font-size: 20px;
        line-height: 24px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        margin-block-start: 0.5rem;
        margin-block-end: 0.5rem;
    }
}


@media only screen and (max-width: 768px){
    h1{
        font-size:32px;
        line-height:36px;
    }

    h2{
        font-size:24px;
        line-height:28px;
    }

    .recent-event-container>div{
        flex-direction: column;

        img{
            max-width: none;
            margin-inline: auto;
            max-height: 400px;
        }

        .text-frame>div{
            margin:0;
            width:auto;
            padding: 1.5rem;
        }
    }

    .event-container .event-header{
        flex-direction: column-reverse;
        >p{margin: 0 0 0.5rem;}
    }

    .event-container p{
        font-size: 20px;
        line-height: 24px;
    }
}